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
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())
}
}