Update React hooks & Context api with MobX

package.json

@@ -22,7 +22,7 @@
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.1",
+    "react-scripts": "^3.4.0",
     "typescript": "~3.7.2"
   },
   "scripts": {
@@ -34,6 +34,25 @@
   "eslintConfig": {
     "extends": "react-app"
   },
+  "babel": {
+    "presets": [
+      "react-app"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ]
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

src/api/posts.ts

@@ -0,0 +1,34 @@
+import request from 'lib/request';
+import { AxiosResponse } from 'axios';
+
+export const getPosts = (): Promise<AxiosResponse> =>
+  request({
+    url: `https://jsonplaceholder.typicode.com/posts/`,
+    method: 'GET',
+  });
+
+export const getPostById = (id: number): Promise<AxiosResponse> =>
+  request({
+    url: `https://jsonplaceholder.typicode.com/posts/${id}`,
+    method: 'GET',
+  });
+
+export const createPosts = ({ data }: any): Promise<AxiosResponse> =>
+  request({
+    url: `https://jsonplaceholder.typicode.com/posts/`,
+    method: 'POST',
+    data,
+    headers: { 'Content-type': 'application/json; charset=UTF-8' },
+  });
+
+export const editPosts = (id: number): Promise<AxiosResponse> =>
+  request({
+    url: `https://jsonplaceholder.typicode.com/posts/${id}`,
+    method: 'PUT',
+  });
+
+export const deletePosts = (id: number): Promise<AxiosResponse> =>
+  request({
+    url: `https://jsonplaceholder.typicode.com/posts/${id}`,
+    method: 'DELETE',
+  });

src/components/common/Input.tsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+interface IInputProps {
+  type?: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  id?: string;
+  name: string;
+}
+
+class InputComponent extends Component<IInputProps> {
+  render() {
+    const { id, name, type, onChange, value } = this.props;
+    return (
+      <input
+        id={id ?? ''}
+        name={name}
+        type={type ?? 'text'}
+        onChange={onChange}
+        value={value ?? ''}
+      />
+    );
+  }
+}
+
+export default InputComponent;

src/components/common/TextArea.tsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+interface ITextAreaProps {
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  value: string;
+  id?: string;
+  name: string;
+}
+
+class InputComponent extends Component<ITextAreaProps> {
+  render() {
+    const { id, name, onChange, value } = this.props;
+    return (
+      <textarea id={id ?? ''} name={name} onChange={onChange} value={value} />
+    );
+  }
+}
+
+export default InputComponent;

src/hooks/useStore.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import RootStore from 'stores';
+
+export default () => React.useContext(RootStore);

src/lib/request.ts

@@ -0,0 +1,12 @@
+import Axios, { AxiosRequestConfig } from 'axios';
+
+export default ({ ...config }: AxiosRequestConfig): Promise<any> =>
+  new Promise((resolve, reject) => {
+    Axios({ ...config })
+      .then(res => {
+        resolve(res);
+      })
+      .catch(err => {
+        reject(err);
+      });
+  });

src/pages/counter/Counter.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames/bind';
+
+import useStore from 'hooks/useStore';
+
+import styles from './Counter.scss';
+
+const cx = classnames.bind(styles);
+
+const Counter = observer(() => {
+  const { counterStore } = useStore();
+  const { counter, increase, decrease } = counterStore;
+  return (
+    <div className={cx('counter-container')}>
+      <h2>{counter}</h2>
+      <div>
+        <button onClick={increase}>+</button>
+        <button onClick={decrease}>-</button>
+      </div>
+    </div>
+  );
+});
+
+export default Counter;

src/pages/home/Home.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classnames from 'classnames/bind';
+
+import styles from './Home.scss';
+
+const cx = classnames.bind(styles);
+
+function Home():JSX.Element {
+  return (
+    <>
+      <section className={cx('section-2')}>
+        <Link to="/counter">Go to Counter test</Link>
+      </section>
+    </>
+  );
+}
+
+export default Home;

src/shared/App.tsx

@@ -1,12 +1,25 @@
 import React from 'react';
+import { Switch, Route } from 'react-router-dom';
 import classnames from 'classnames/bind';
 
+import Home from 'pages/home/Home';
+import Counter from 'pages/counter/Counter';
+
 import styles from './App.scss';
 
 const cx = classnames.bind(styles);
 
 function App(): JSX.Element {
-  return <div className={cx('App')}></div>;
+  return (
+    <div className={cx('app-container')}>
+      <main className={cx('main-container')}>
+        <Switch>
+          <Route path="/" component={Home} exact />
+          <Route path="/counter" component={Counter} />
+        </Switch>
+      </main>
+    </div>
+  );
 }
 
 export default App;

src/stores/Couter.ts

@@ -0,0 +1,18 @@
+import { observable, action } from 'mobx';
+
+export default class CounterStore {
+  @observable
+  public counter: number = 0;
+
+  @action
+  increase = (): void => {
+    this.counter++;
+    console.log('counter', this.counter);
+  };
+
+  @action
+  decrease = (): void => {
+    this.counter--;
+    console.log('counter', this.counter);
+  };
+}

src/stores/index.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import CounterStore from './Couter';
+
+const RootStore = React.createContext({
+  counterStore: new CounterStore(),
+});
+
+export default RootStore;

src/stores/interfaces/store.ts

@@ -0,0 +1,9 @@
+export interface ICounterStore {
+  counter: number;
+  increase: () => void;
+  decrease: () => void;
+}
+
+export interface IRootStore {
+  counterStore?: ICounterStore;
+}