# frontend-content

This is the repo for the `Orchard Content` react application. `frontend-content` (fka `frontend-content-review`) is a collection of 'sub-projects' 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

-   [Install the Node version manager NVM](https://github.com/nvm-sh/nvm#intro)
-   [Configure NPM to access our private packages](https://www.notion.so/Javascript-Package-Setup-9553d5d491c94835aa787fdf0fc4838d)

## Setup

```shell
# Switch to the currently supported node version.
nvm use

# install dependencies
yarn install

# create environment configuration
cp .env.shadow .env
```

## 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)

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](http://localhost:8080) to view it in the browser.

The page 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).

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

### `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).

### `yarn build`

Builds the app for production to the `build` folder.
It bundles React in production mode and optimizes the build for the best performance.

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

### 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.

Examples:

```shell
# run unit tests only for the "contentReview" module
yarn test:unit:contentReview

# run unit tests matching "catalogPage" the "neighbouringRights" module
yarn test:unit:neighbouringRights --watch catalogPage

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

# run type checking only for the "contentReview" module
yarn test:types:orchardSoundRecording

# run eslint only for the "contentReview" module
yarn lint:js:contentReview

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

# run stylelint only for the "contentReview" module
yarn lint:css:contentReview

# run stylelint for the "neighbouringRights" module and fix issues
yarn lint:css:neighbouringRights --fix

# run prettier on all files within a module
yarn run prettier --write <path-to-module>
```

## Type generation

We use generated TypeScript definitions for our GraphQL queries and mutations.
The generated types are stored in `__generated__` folders along side 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 "contentReview" module
yarn generate:types:contentReview
```

## 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)

## Coding Guidelines

-   [Query Parameters](https://github.com/theorchard/docs/blob/master/javascript/query-parameters.md)