====== React ======
===== References =====
  * [[https://github.com/typescript-cheatsheets/react-typescript-cheatsheet|React-Typescript cheatsheet]]

===== Starter commands =====
<code bash>
yarn create react-app projectName --template typescript
yarn add node-sass react-router-dom @types/react-router-dom @types/react-dom
</code>

===== .htaccess =====
<code config>
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
</code>

===== Environments =====
Development / production environments can be set as following
<code javascript>
interface Env {
  ENV_STATUS: string;
  API_HOST: string;
}

const development: Env = {
  ENV_STATUS: "development",
  API_HOST: "localhost:3333"
};

const production: Env = {
  ENV_STATUS: "production",
  API_HOST: "https://server.paperkeeper.org:3333"
};

const config =
  process.env.REACT_APP_ENV === "development" ? development : production;

export const Environment = {
  ...config
};
</code>

To pass the the env variable modify ''package.json'' to
<code bash>
...
    "start": "REACT_APP_ENV=production react-scripts start",
    "start:dev": "REACT_APP_ENV=development react-scripts start",
    "build": "REACT_APP_ENV=production react-scripts build",
...
</code>

===== Snippets =====
==== Component props ====
<code javascript>
import React from 'react';

type CardProps = {
  title: string,
  paragraph: string
  parentFunc: (s: string) => void;
}

export const Card = ({ title, paragraph }: CardProps) => <div>
  <h2>{ title }</h2>
  <p>
    { paragraph }
  </p>
</div>

const el = <Card title="Welcome!" paragraph="To this example" onClick={() => parentFunc(title)} />
</code>

====Redux ====

Redux store implementation which appeals to me these days.

<code javascript index.ts>
import { createStore, compose } from 'redux';
import { rootReducer } from './reducers';

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION__?: Function;
    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
  }
}

export interface StoreState {
  bill: number;
  percentage: number;
  split: number;
}

export const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
</code>

<code javascript actions.ts>
import { Action } from 'redux';

export enum ActionTypes {
  BillChange = '[Bill] change',
  PercentageChange = '[Percentage] change',
  SplitIncrement = '[Split] increment',
  SplitDecrement = '[Split] decrement',
  Reset = '[Reset]',
}

export interface BillChangeAction extends Action {
  type: ActionTypes.BillChange;
  payload: string;
}

export interface PercentageChangeAction extends Action {
  type: ActionTypes.PercentageChange;
  payload: string;
}

export interface SplitIncrementAction extends Action {
  type: ActionTypes.SplitIncrement;
}

export interface SplitDecrementAction extends Action {
  type: ActionTypes.SplitDecrement;
}

export interface ResetAction extends Action {
  type: ActionTypes.Reset;
}

export type Actions =
  | BillChangeAction
  | PercentageChangeAction
  | SplitIncrementAction
  | SplitDecrementAction
  | ResetAction;
</code>

<code javascript reducers.ts>
import { Reducer } from 'redux';
import { StoreState } from '.';
import { Actions, ActionTypes } from './actions';

export const initalState: StoreState = {
  bill: 0,
  percentage: 0,
  split: 1,
};

export const rootReducer: Reducer<StoreState, Actions> = (
  state = initalState,
  action,
) => {
  switch (action.type) {
    case ActionTypes.BillChange:
      return {
        ...state,
        bill: Number(action.payload),
      };
    case ActionTypes.PercentageChange:
      return {
        ...state,
        percentage: Number(action.payload),
      };
    case ActionTypes.SplitIncrement:
      return {
        ...state,
        split: state.split + 1,
      };
    case ActionTypes.SplitDecrement:
      const split = state.split - 1;
      return {
        ...state,
        split: split >= 1 ? split : state.split,
      };
    case ActionTypes.Reset:
      return initalState;
    default:
      return state;
  }
};
</code>


<code javascript selectors.ts>
import { StoreState } from '.';

export type StoreSelector<T> = (state: StoreState) => T;

export const selectBill: StoreSelector<number> = state => state.bill;

export const selectPercentage: StoreSelector<number> = state =>
  state.percentage;

export const selectSplit: StoreSelector<number> = state => state.split;

export const selectTotal: StoreSelector<string> = state => {
  const total = state.bill + state.bill * (state.percentage / 100);
  return total.toFixed(2);
};

export const selectTip: StoreSelector<string> = state => {
  const tip = state.bill * (state.percentage / 100);
  return tip.toFixed(2);
};

export const selectPerPerson: StoreSelector<string> = state => {
  const perPerson =
    (state.bill + state.bill * (state.percentage / 100)) / state.split;
  return perPerson.toFixed(2);
};
</code>

<code javascript component.ts>
import * as React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectBill, selectSplit, selectPercentage } from '../store/selectors';
import { ActionTypes } from '../store/actions';

export const MyComponent = () => {
  const split = useSelector(selectSplit);
  const dispatch = useDispatch();
  return (
     <div>
     {split}
     <button onClick={
     dispatch({
              type: ActionTypes.BillChange,
              payload: 10,
            })
      }>
      Act</button>
      </div>
  )
}
</code>


===== Useful libraries =====
  * [[https://react-icons.netlify.com|react-icons]]
  * [[https://reacttraining.com/react-router/web/guides/quick-start|react-router-dom]]
  * [[https://www.npmjs.com/package/react-masonry-css|react-mansory-css]]
  * [[https://www.npmjs.com/package/uuid|uuid]]
  * [[https://react-hook-form.com/|react-hook-form]]