# Support Room Frontend Documentation

- [Quick Start](#quick-start)
- [Project Structure](#project-structure)
- [Component Structure](#component-structure)
- [Styling](#styling)
  - [Global Styles](#global-styles)
  - [Styled Components](#styled-components)
  - [Themes](#themes)
- [Development Workflow](#development-workflow)

---

## Quick Start

In the project root you can run:

- `yarn` — Installs project rependencies

- `yarn start` — Runs the app in the development mode and serves the project on [http://localhost:3000](http://localhost:3000).

- `yarn build` — Builds the app for production to the `/build` directory.

> This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). See the official docs for all available scripts and configuration options.

---

## Project Structure

Components relating to specific Routes are contained in three main areas:
- `/Neutral`, for pages which are not user specific
- `/Patient`, for patient routes
- `/Therpist`, for therapist routes

### Naming
Components should be named in PascalCase and be nested in relevant folders following either of these patterns:- `/ComponentName/ComponentName.js` or `/ComponentName/index.js`.

Use the `index.js` file inside certain partent directories to export the components within it to make it possible to import named-exports from a single location.


## Component Structure

Function Components are preferred over Class components wherever possible. These should be declared as arrow functions and should always include a default export.

Components are generaly structured in this order.

```
- Imports
- Component Body
- propTypes / defaultProps
- Styled components
- Export
```

An example of a simple component structure:

```javascript
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Button = (props) => {
  return <StyledButton {...props}>{props.children}</StyledButton>;
};

Button.propTypes = {
  block: PropTypes.bool,
};
Button.defaultProps = {
  block: false,
};

const StyledButton = styled.button`
  // button styles here...
`;

export default Button;
```

Within the component body itself, code is generally organised in this order:

```
- Variables
- State
- Functions
- Lifecycle Methods / Effects
- Render / Return
```

---

## Styling

### Global Styles

Global styling is declared in `/styles` and is written in SCSS. The variables used in `_variables.scss` are only used for the global styles. Variables for styled components are handled by the [theme](#themes).

The global styling applies mainly to html elements but does not declare any colours at this point. Colours are handled by Styled Components.

Overrides for the "react-calendar" plugin are also placed in global styles.

### Styled Components

All components are styled using [Styled Components](https://styled-components.com/).

Styled component names should be descriptive enough to allow the developer to quickly scan the code and get a picture of what the component might look like.

For example, the sidebar of the dashboard should be called `<DashboardSidebar>` rather than `<LeftColumn>`.

### Themes

Themes are defined in `/styles/theme.js`.

The themes are split into 'Common', 'Patient' and 'Therapist'.

In `App.js`, the whole application is wrapped in a `ThemeProvider` which imports the 'common' theme. This is made available to all child components via `props.theme`.

Nested inside the common theme is another `ThemeProvider` which imports the 'patient' theme. All components receive the patient theme by default.

Inside `/Routes/Route.js` there is a test to check if a route is for the Therapist role, at which point the route is wrpped in the therapist ThemeProvider.

```javascript
{
  role === 'therapist' ? (
    <ThemeProvider theme={TherapistTheme}>
      <Component {...props} />
    </ThemeProvider>
  ) : (
    <Component {...props} />
  );
}
```

**Using Theme variables in Styled Components**

ThemeProvider passes the theme to its child components via props. In order to use a theme variable within a component, the component must be passed `props`, and then the variables can be used like this:

```javascript
const StyledInput = styled.input`
  display: block;
  background: ${({ theme }) => theme.white};
  border: ${(props) => props.border || '2px solid ' + props.theme.primaryMedium};
  color: ${({ theme }) => theme.primary};
`;

const Input = (props) => {
  return <StyledInput {...props} />;
};
```

> **NOTE:**
>
> If you want to do any sort of ternary operation within the Styled Component CSS, you need to spread `props` into the component iteself.

```javascript
const StyledButton = styled.button`
  display: ${(props) => (props.block ? 'block' : 'inline-block')};
  min-width: ${(props) => (props.block ? '100%' : '100px')};
`;

const Button = (props) => {
  return <StyledButton {...props}>Click Here</StyledButton>;
};
```

## Development Workflow

The base branch for this project is `dev`.

New features should be branched off `dev` and be given descriptive names.

Feature Pull Requests should be made back into `dev` and tested locally

When new features are ready to be deployed, the `dev` branch should be merged into `master` which will trigger a build on Netlify and deploy to [https://supportroom-preview.netlify.app](https://supportroom-preview.netlify.app) where the features can be tested.

> Deploying to the production server is currently a manual process handled by Tris.