# frontend-distribution-suite

This is the repo for the `Distribution Suite` React application.
`frontend-distribution-suite` is a collection of 'subprojects' separated as isolated modules that are dynamically loaded based on routing.
Each module lives in the root modules folder and is a "mini app" with its own src and standard folders ( data, components, pages, utils ).
[Read more about modules here](https://www.notion.so/Modules-support-7d610b897a6b42808fdd6a27531f5ffc)

## Prerequisites

1. Make sure you have [nvm](https://github.com/nvm-sh/nvm#intro) and [yarn](https://yarnpkg.com/) installed.
2. We are using private npm packages from our [monorepo](https://github.com/theorchard/orchard-suite).
   Follow this guide on how to set up NPM access.
   https://www.notion.so/Javascript-Package-Management-Setup-9553d5d491c94835aa787fdf0fc4838d
3. Familiarize yourself with [The Orchard Suite](https://www.notion.so/Orchard-Suite-React-2277a0e1ac32464a863757c1e5added8) before contributing!

## Setup

```shell
# Use supported node version
nvm use

# Install dependencies
yarn install

# Create environment configuration
cp .env.shadow .env

# Start your server
yarn start
```

## Available Scripts

This project uses our own Webpack tooling frontend-cli.
It has several built-in commands to run and build the project. Read more about it here:
[frontend-cli cheat sheet](https://www.notion.so/frontend-cli-cheat-sheet-b33a00c2dcc74930934fcf15744d11fc)

**NOTE:**
**Running the project locally requires an active VPN connection.**

This project follows the standard pattern where we have the following main scripts:

-   `yarn start`
-   `yarn test`
-   `yarn build`

### `yarn start`

Runs the app in the development mode.
Open http://localhost:8080 to view the app in the browser.
The server will reload if you make edits.

If you've added/updated a translation in an `i18n.json` file, running `yarn start` will automatically generate the changes in the `default.json` file (and `locale/types.ts` file, where relevant).

### `yarn test`

Runs all formatting, linting, types and unit tests.
This script is run during PR commits and in the Jenkins pipeline.
Run this script before you create your PR (or a module subset) in order not to have any errors on build.

### `yarn build`

Builds the app for production to the `build` folder.<br />

Note that this command is not required to run locally, it is run during the jenkins pipeline.

### `yarn prepare`

Enables git hooks for husky.

### Module scripts

When working on a single module, it makes sense to run tests only for that code.
All scripts can be filtered to a single module with the `:<MODULE>` suffix.

```shell
 # Runs the jest unit tests in watch mode for whole project
 # In watch mode type `p` to enter a filter
 yarn test:unit --watch

 # Run unit tests only for the "neighbouringRights" module
 yarn test:unit:neighbouringRights

 # Run unit tests matching "createOrder" the "neighbouringRights" module
 yarn test:unit:neighbouringRights --watch createOrder

 # Run type checking only for the "neighbouringRights" module
 yarn test:types:neighbouringRights

 # Run unit tests only for a specific module
 yarn test:unit <path-to-module>

 # Run eslint only for the "neighbouringRights" module
 yarn lint:js:neighbouringRights

 # Run eslint for the "neighbouringRights" module and fix issues
 yarn lint:js:neighbouringRights --fix

 # Run stylelint only for the "neighbouringRights" module
 yarn lint:css:neighbouringRights

 # Run prettier on all files within neighbouringRights module
 yarn run prettier --write neighbouringRights
```

## Type generation

We use generated TypeScript definitions for our GraphQL queries and mutations.
The generated types are stored in `__generated__` folders alongside with the .gql file.

Note. this does not have anything to do with the `test:types` script. That's for doing TypeScript type checking.

When the query/mutation change, you need to update the generated types. Use the following scripts to do so:

### `yarn generate:types`

Generates typescript definitions for all queries and mutations.

### `yarn generate:types:<MODULE>`

Fetches the updated graphql schema and generates typescript definitions from the queries and mutation files in the given module.

Examples:

```shell
# Generates types for the "neighbouringRights" module
yarn generate:types:neighbouringRights
```

### `yarn download:schema:<SUB-PROJECT>`

Downloads the graphql schema and any updates made to it since last downloaded. The <SUB-PROJECT> arg is referenced in the `./downloadSchemaUtil.sh` script using $1 (i.e. the first argument).

Examples:

```shell
# Downloads the scheme for neighbouringRights
# This script would use configuration in the `apollo.config.js` file
yarn download:schema:neighbouringRights
```

## References

-   [Troubleshooting](https://www.notion.so/Troubleshooting-4ba0b23b6c2943ce927c44a205975e44)
-   [Project structure](https://www.notion.so/Project-structure-dbd97b9a4b3b4a839e4a0b8d890f076e)
-   [Solfège application (VPN required)](https://solfege.qaorch.com/)
-   [Solfège Design System](https://www.notion.so/Solf-ge-Design-System-206bc70af9184095825a93b74a0e8f07)
-   [The Orchard Suite Framework](https://www.notion.so/The-Orchard-Suite-Framework-2277a0e1ac32464a863757c1e5added8)