Frontend README

Golden rule: Think before you type

Principles

Single source ot truth is redux. For every side effect we use redux-saga. We prefer hooks over HoC Data fetching and changing on server is done by (@inventi/keep)[https://www.npmjs.com/package/@inventi/keep] (useFetch, useMutate, etc.) - see examples. For styling we use styled-component and (xstyled)[https://xstyled.dev/]. We never use units in padding, margins, etc - that's what xstyled does. See theme in src/App directory. For user permissions we have set up ACL. See permissions in src/App directory.

Creating components

Do NOT create component files youself or by copying older ones. Use scaffolding tool yarn generate in this frontend directory for generating:

• components
• pages
• redux saga modules

Project structure

Explore structure if this project to see all these rules in action.

Components

Divided into groups by its size. All components should contain storybook stories for better development and example usage.

• Elements

  Basic brick and simplest pieces of puzzle in your application. Must NOT use any other element or block. Never use Redux on an kind of state inside it. Intended to be used by other components.

• Blocks

  Middle-complex building block in your application. Must NOT use any other block. Never use Redux on an kind of state inside it. If you need it stateful, separate it into Container under Page. Intended to be used by other components.

• Pages

  The biggest type of component. It can NEVER use other pages inside. Expected to collocate containers and components that are only related to specific page.

Store

We use redux. Every logical entity separate into its folder. See for example (cat module)[/src/store/cat].

index.ts is everytime a (duck)[/src/store/cat]. Duck is selector, action type, action create and reducer - all in one.

sagas.ts is only for sagas - sideeffects. Sideeffect is for example data fetching, saving to localStorage, and so on.

Before commit

Check your code style

• all components in src/components should have storybook
• Check if storybook works.
• yarn test => all tests must be passing
• yarn lint:js =>lint

Challenge implementation of your code if it is (and see further reading below):

• simple
• has single responsibility
• is encapsulated
• reusable
• composable

Further reading

• https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/

Cookbook

TS Typeguards

// We take advantage of TS semantic sugar 'value is Date' which indicates that
// if the function returns 'true' => value is indeed an instance of Date... and NOTHING ELSE !
const isDate = (value: Date | any): value is Date => {
  // Do any logic to check whether 'value' is of expected type
  return value instanceof Date
}

function main() {
  // START READING HERE <<
  // Imagine function getDate() returns value representation of some Date,
  // HOWEVER it might return someting else.. you don't know.
  const date: Date | any = getDate()
  
  // When we need to call function Date.toISOString() on it..
  // Calling it on variable which might be undefined or null will result in error.
  
  console.log(date.toISOString()) // Might resolve in following errors
  // TypeError: Cannot read property 'toISOString' of undefined
  // TypeError: Cannot read property 'toISOString' of null
  // TypeError: date.toISOString is not a function
  
  // That's why we need to check whether 'date' is instance of Date
  if (isDate(date)) {
    // We can safely call .toISOString() here..
    console.log(date.toISOString())
  }
}