Express Routing

array.sort((x, y) => +new Date(x.createdAt) - +new Date(y.createdAt));

import thunk, { ThunkDispatch } from 'redux-thunk'

export type IRootThunkDispatch = ThunkDispatch<IRootState, null, IRootAction>

const store = createStore<IRootState,IRootAction,{},{}>(
    rootReducer,
    composeEnhancers(
        applyMiddleware(logger),
        applyMiddleware(routerMiddleware(history)),
        applyMiddleware(thunk),
    )
);

export default store;

// store.ts
import {
  RouterState,
  connectRouter,
  routerMiddleware,
  CallHistoryMethodAction
} from 'connected-react-router';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

export interface IRootState{
    board: IBoardState,
    score: IScoreState
    router: RouterState
}

const rootReducer = combineReducers<IRootState>({
    board: boardReducers,
    score: scoreReducers,
    router: connectRouter(history)
});

type  IRootAction = ... | CallHistoryMethodAction;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

let store = createStore<IRootState,IRootAction,{},{}>(
                rootReducer,
                composeEnhancers(
                    applyMiddleware(logger),
                    applyMiddleware(routerMiddleware(history))
                )
            );

export default store;


//-----------------------------------------
// App.tsx
import { ConnectedRouter } from 'connected-react-router';
import { history } from './store';
import { Link } from 'react-router-dom';
/*Other imports are omitted for simplicity reason*/

class App extends React.Component {
  public render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <div>
            <nav className="nav-bar">
              <Link to="/" className="link">Home</Link>
              <Link to="/board" className="link">Open Board</Link>
              <Link to="/scores" className="link">Score Board</Link>
              <Link to="/about" className="link">About us</Link>
            </nav>
            <div>
                <Switch>
                  <Route path="/" exact={true} component={Home} />
                  <Route path="/scores"  component={Scores} />
                  <Route path="/board" component={Board} />
                  <Route path="/about" component={About} />
                  <Route component={NoMatch} />
                </Switch>
            </div>
          </div>
        </ConnectedRouter>
      </Provider>
    );
  }
}

export default App

import multer from 'multer';

// see customize section
const upload = multer({dest:'uploads/'})

const app = express();
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.post('/contact',upload.single('profile'),(req,res)=>{
    console.log(req.file.key); // get the name of the file
    console.log(req.body); // Other fields are in req.body
    res.redirect('/');
})

// ----------------------------------
// upload options
upload.single("field-name");
upload.array("field-name");
upload.fields([
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: 8 }
])

// ---------------------------------
// customize multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, path.resolve('/uploads'));
    },
    filename: function (req, file, cb) {
      cb(null, `${file.fieldname}-${Date.now()}.${file.mimetype.split('/')[1]}`);
    }
  })
const upload = multer({storage})

import {createStore, combineReducers, compose, applyMiddleware} from "redux";

declare global {
    /* tslint:disable:interface-name */
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
    }
}
....

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore<IRootState,IRootAction,{},{}>(
    rootReducer,
    composeEnhancers(
      applyMiddleware(logger)
    )
);

import React, { useEffect } from 'react'
import { Button, Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'

type FormState = {
  name: string
  color: string
  gender: string
}

export default function FormDemo() {
  const { register, handleSubmit, watch } = useForm<FormState>({
    defaultValues: {
      name: '',
      color: '#c0ffee',
      gender: '',
    },
  })

  useEffect(() => {
    let sub = watch(data => {
      console.log('update form data:', data)
    })
    return () => sub.unsubscribe()
  }, [watch])

  function submit(data: FormState) {
    console.log('submit form data:', data)
  }

  return (
    <div className="container">
      <h1>Form Demo</h1>
      <Form onSubmit={handleSubmit(submit)}>
        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" {...register('name')} />
        </Form.Group>
        <Form.Group>
          <Form.Label>Color</Form.Label>
          <Form.Control
            type="color"
            {...register('color')}
            className="d-inline"
          />
          <Form.Text className="text-muted">
            Custom the background color
          </Form.Text>
        </Form.Group>
        <Form.Group>
          <Form.Label>Gender</Form.Label>
          <Form.Control as="select" custom {...register('gender')}>
            <option value="">Prefer not to say</option>
            <option>M</option>
            <option>F</option>
            <option>T</option>
            <option>Others</option>
          </Form.Control>
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </div>
  )
}

import React from 'react';
import { connect } from 'react-redux';
import { RootState, Item } from '../redux/state';
import { addItem, deleteItem, RootDispatch } from '../redux/action';

type Props = {
    author: string,
    items: Item[],
    handleAddItem: (newItemText: string) => void,
    handleDeleteItem: (targetId: number) => void
}
    
class TodoList extends React.Components<Props, {}> {
  constructor(props: Props) {
    super(props);
    // ...
  }
  
  // using redux dispatcher
  addItem(text: string) {
    this.props.handleAddItem(text);
  }
  
  render() {
    return (
      <>
      	<button onClick={() => this.addItem('123')}>Add item</button>
      	// using redux state
      	{this.props.items.map(item => return <p>item.name</p>)}
      </>
    )
  }
}

const mapStateToProps = (state: RootState) => {
    return {
        author: state.author,
        items: state.items
    }
}

const mapDispatchToProps = (dispatch: RootDispatch) => {
    return {
        handleAddItem: (newItemText: string) => {
            dispatch(addItem(newItemText));
        },
        handleDeleteItem: (targetId: number) => {
            dispatch(deleteItem(targetId));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

import { createStore }from 'redux';
import { RootAction } from './action';

import { RootState } from './state';
import { rootReducer } from './reducer';

declare global {
    /* tslint:disable:interface-name */
    interface Window {
       __REDUX_DEVTOOLS_EXTENSION__: any
    }
}

const store = createStore<RootState, RootAction, {}, {}>(
    rootReducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

import { useState } from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../redux/store';

export default function TodoList() {
  // state from redux store
  const items = useSelector((state: RootState) => state.items);
  
  // normal state
  const [nextId, setNextId] = useState<number>(0);
  
  // proceed to use state as usual
  return (
    <>
    	{items.map(item => {
         	return (
         		<TodoItem
         			text={item.name}
    			/>
         	)
        })}
    </>
  )
}

import React from 'react';

import { connect } from 'react-redux';
import { RootState } from '../redux/store';

type State = { 
  //...
}

class TodoList extends React.Components<RootState, State> {
  // rootstate is integrated into props of class component
  constructor(props: RootState) {
    super(props);
    this.state = { 
      // ... 
    }
  }
  
  render() {
    return (
      <>
      	<this.props.items>
      </>
    )
  }
}

const mapStateToProps = (state: RootState) => {
  return {
    items: state.items;
  }
}

export default connect(mapStateToProps)(TodoList);

import {createStore, Action} from "redux";


export interface IRootState{
    squares : Array<string|null>
    oIsNext: boolean
}

const initialState = {
    squares: [],
    oIsNext: true
}

const rootReducer = (state:IRootState = initialState) => {
    return {
        squares: [null,null,null,null,'O','X',null,null,null],
        oIsNext: true
    }
}

const store = createStore<IRootState,Action<any>,{},{}>(rootReducer);
export default store;

import { Provider} from 'react-redux';
import store from './store';
import Board from './Board';


class App extends React.Component {
  public render() {
    return (
      <Provider store={store}>
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      </Provider>
    );
  }
}

import '@testing-library/jest-dom'
import React from 'react';
import {render, screen} from '@testing-library/react'

yarn add bootstrap@4
//----------------------

import 'bootstrap/dist/css/bootstrap.min.css'; // Add this line
import './App.css';