Technologies

Tech Stack

We use the following technologies on the Frontend:

• React

• React Hooks

• Apollo

• GraphQL

• TypeScript

• Sentry

• Day.js

Below summarises the MUST(s) & SHOULD(s) regarding these technologies

Hooks

• We MUST write all new code with hooks and not HOCs.

• We SHOULD look to remove instances of HOCs when editing files containing them and replace them with hooks.

Correct ✅

import { useLocationId } from "utils/hooks"
const locationId = useLocationId()

Incorrect❌

<MyLocation>
    {(locationId) => (
...
</MyLocation>

GraphQL

• We MUST put all new queries into operations.graphl then run yarn gql and then use the generated query, mutation or relevant hook from generated/graphql.

• We SHOULD try to move existing queries into operations.graphql and then follow the above process, when possible.

TypeScript

• We MUST write all new code in TypeScript.

• We MUST not use any as a type.

• We MUST write types for all props & state in a component.

• We SHOULD try to convert JavaScript files into TypeScript files when writing new code.

Day.js

MomentJS is no longer being maintained (see here). We have begun a process of migrating over to Day.js.

• We MUST not use moment.js in any new code.

• We MUST use day.js for any new date/time code.

• We SHOULD remove instances of moment.js and replace with day.js