Refactor root container(s) to use react hook

Author: rokoroku

README.md

@@ -2,7 +2,7 @@
 
 A bare minimum react-mobx-webpack-typescript boilerplate with TodoMVC example.
 
-Note that this project does not include **Server-Side Rendering**,  **Testing Frameworks** and other stuffs that makes the package unnecessarily complicated.
+Note that this project does not include **Server-Side Rendering**, **Testing Frameworks** and other stuffs that makes the package unnecessarily complicated.
 
 Ideal for creating React apps from the scratch.
 
@@ -15,24 +15,18 @@ See also: [react-redux-typescript-boilerplate](https://github.com/rokoroku/react
 - [x] [React Router](https://github.com/ReactTraining/react-router) 4
 - [x] [Mobx](https://github.com/mobxjs/mobx) 5
 - [x] [Mobx React](https://github.com/mobxjs/mobx-react)
-- [x] [Mobx React Router](https://github.com/alisd23/mobx-react-router/)
-- [x] [Mobx React Devtools](https://github.com/mobxjs/mobx-react-devtools)
 - [x] [TodoMVC example](http://todomvc.com)
 
 ### Build tools
 
 - [x] [Webpack](https://webpack.github.io) 4
-  - [x] [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
-  - [x] [Webpack Dev Server](https://github.com/webpack/webpack-dev-server)
+- [x] [React Hot Loader](https://github.com/gaearon/react-hot-loader)
 - [x] [Typescript Loader](https://github.com/TypeStrong/ts-loader)
 - [x] [PostCSS Loader](https://github.com/postcss/postcss-loader)
   - [x] [PostCSS Preset Env](https://preset-env.cssdb.org/)
   - [x] [CSS modules](https://github.com/css-modules/)
-- [x] [React Hot Loader](https://github.com/gaearon/react-hot-loader)
-- [x] [Mini CSS Extract Plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
 - [x] [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin)
 
-
 ## Setup
 
 ```

src/app/components/Footer/index.tsx

@@ -4,7 +4,7 @@ import * as style from './style.css';
 import {
   TodoFilter,
   TODO_FILTER_TITLES,
-  TODO_FILTER_TYPES
+  TODO_FILTER_TYPES,
 } from 'app/constants';
 
 export interface FooterProps {
@@ -35,7 +35,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
     const title = TODO_FILTER_TITLES[filter];
     const { filter: selectedFilter, onChangeFilter } = this.props;
     const className = classNames({
-      [style.selected]: filter === selectedFilter
+      [style.selected]: filter === selectedFilter,
     });
 
     return (

src/app/components/TodoItem/index.tsx

@@ -84,7 +84,7 @@ export class TodoItem extends React.Component<TodoProps, TodoState> {
     const classes = classNames({
       [style.completed]: todo.completed,
       [style.editing]: this.state.editing,
-      [style.normal]: !this.state.editing
+      [style.normal]: !this.state.editing,
     });
 
     return <li className={classes}>{element}</li>;

src/app/components/TodoItem/style.css

@@ -13,11 +13,11 @@
 }
 
 .normal .toggle:after {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23ededed" stroke-width="3"/></svg>');
 }
 
 .normal .toggle:checked:after {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23bddad5" stroke-width="3"/><path fill="%235dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
 }
 
 .normal label {

src/app/components/TodoTextInput/index.tsx

@@ -21,7 +21,7 @@ export class TodoTextInput extends React.Component<
   constructor(props?: TodoTextInputProps, context?: any) {
     super(props, context);
     this.state = {
-      text: this.props.text || ''
+      text: this.props.text || '',
     };
   }
 
@@ -50,7 +50,7 @@ export class TodoTextInput extends React.Component<
     const classes = classNames(
       {
         [style.edit]: this.props.editing,
-        [style.new]: this.props.newTodo
+        [style.new]: this.props.newTodo,
       },
       style.normal
     );

src/app/constants/index.ts

@@ -1,2 +1 @@
-export * from './stores';
 export * from './todos';

src/app/constants/stores.ts

@@ -1,23 +1,23 @@
 export enum TodoFilter {
   ALL = 0,
   ACTIVE,
-  COMPLETED
+  COMPLETED,
 }
 
 export const TODO_FILTER_TYPES = [
   TodoFilter.ALL,
   TodoFilter.ACTIVE,
-  TodoFilter.COMPLETED
+  TodoFilter.COMPLETED,
 ];
 
 export const TODO_FILTER_TITLES = {
   [TodoFilter.ALL]: 'All',
   [TodoFilter.ACTIVE]: 'Active',
-  [TodoFilter.COMPLETED]: 'Completed'
+  [TodoFilter.COMPLETED]: 'Completed',
 };
 
 export const TODO_FILTER_LOCATION_HASH = {
   [TodoFilter.ALL]: '#',
   [TodoFilter.ACTIVE]: '#active',
-  [TodoFilter.COMPLETED]: '#completed'
+  [TodoFilter.COMPLETED]: '#completed',
 };

src/app/constants/todos.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as style from './style.css';
+import { observer } from 'mobx-react';
+import { useLocation, useHistory } from 'react-router';
+import { Header } from 'app/components/Header';
+import { Footer } from 'app/components/Footer';
+import { TodoList } from 'app/components/TodoList';
+import { TodoModel } from 'app/models';
+import { useTodoStore } from 'app/stores/TodoStore';
+import { TODO_FILTER_LOCATION_HASH, TodoFilter } from 'app/constants';
+
+export const TodoContainer = observer(() => {
+  const todoStore = useTodoStore([
+    new TodoModel('Use MobX'),
+    new TodoModel('Use React'),
+  ]);
+  const history = useHistory();
+  const location = useLocation();
+  const [filter, setFilter] = React.useState(TodoFilter.ALL);
+
+  // location change callback
+  React.useEffect(() => {
+    console.log('effect');
+    const nextFilter = Object.keys(TODO_FILTER_LOCATION_HASH)
+      .map((key) => Number(key) as TodoFilter)
+      .find((item) => TODO_FILTER_LOCATION_HASH[item] === location.hash);
+    setFilter(nextFilter ?? TodoFilter.ALL);
+  }, [location.hash, setFilter]);
+
+  // filter change callback
+  const handleFilterChange = React.useCallback(
+    (nextFilter: TodoFilter) => {
+      setFilter(nextFilter);
+      const nextHash = TODO_FILTER_LOCATION_HASH[nextFilter];
+      history.replace(nextHash);
+    },
+    [history, setFilter]
+  );
+
+  const itemsToDisplay =
+    filter === TodoFilter.ALL
+      ? todoStore.todos
+      : filter === TodoFilter.ACTIVE
+      ? todoStore.activeTodos
+      : todoStore.completedTodos;
+
+  return (
+    <div className={style.normal}>
+      <Header addTodo={todoStore.addTodo} />
+      <TodoList
+        todos={itemsToDisplay}
+        completeAll={todoStore.completeAll}
+        deleteTodo={todoStore.deleteTodo}
+        editTodo={todoStore.editTodo}
+      />
+      <Footer
+        filter={filter}
+        activeCount={todoStore.activeTodos.length}
+        completedCount={todoStore.completedTodos.length}
+        onClearCompleted={todoStore.clearCompleted}
+        onChangeFilter={handleFilterChange}
+      />
+    </div>
+  );
+});

src/app/containers/Root/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { Router, Route, Switch } from 'react-router';
-import { Root } from 'app/containers/Root';
-import { TodoApp } from 'app/containers/TodoApp';
+import { TodoContainer } from 'app/containers/TodoContainer';
 
 // render react DOM
-export const App = hot(({ history }) => (
-  <Root>
+export const App = hot(({ history }) => {
+  return (
     <Router history={history}>
       <Switch>
-        <Route path="/" component={TodoApp} />
+        <Route path="/" component={TodoContainer} />
       </Switch>
     </Router>
-  </Root>
-));
+  );
+});