Ts/mobx/classes

craco.config.js

@@ -4,7 +4,7 @@ module.exports = function({ env, paths }) {
   return {
     babel: {
       presets: [],
-      plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
+      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
       // loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ },
       // loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
     },

package.json

@@ -44,51 +44,47 @@
   "dependencies": {
     "axios": "0.19.0",
     "classnames": "2.2.6",
-    "connected-react-router": "6.5.2",
+    "connected-react-router": "6.6.1",
     "dayjs": "1.8.17",
     "history": "4.10.1",
     "lodash.groupby": "4.6.0",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
-    "react-redux": "7.1.3",
+    "mobx": "5.15.0",
+    "mobx-react": "6.1.4",
+    "mobx-react-router": "4.1.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "5.1.2",
-    "redux": "4.0.4",
-    "redux-devtools-extension": "2.13.8",
-    "redux-freeze": "0.1.7",
-    "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
     "semantic-ui-css": "2.4.1",
-    "semantic-ui-react": "0.88.1",
+    "semantic-ui-react": "0.88.2",
     "sjs-base-model": "1.9.0",
     "uuid": "3.3.3"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4",
-    "@babel/plugin-proposal-optional-chaining": "7.6.0",
-    "@craco/craco": "5.6.1",
+    "@babel/plugin-proposal-decorators": "7.7.4",
+    "@craco/craco": "5.6.2",
     "@types/classnames": "2.2.9",
     "@types/history": "4.7.3",
-    "@types/jest": "24.0.22",
-    "@types/node": "12.12.7",
-    "@types/react": "16.9.11",
+    "@types/jest": "24.0.23",
+    "@types/node": "12.12.17",
+    "@types/react": "16.9.16",
     "@types/react-dom": "16.9.4",
-    "@types/react-redux": "7.1.5",
-    "@types/react-router-dom": "5.1.2",
+    "@types/react-router-dom": "5.1.3",
     "@types/uuid": "3.4.6",
-    "@typescript-eslint/eslint-plugin": "2.7.0",
-    "@typescript-eslint/parser": "2.7.0",
+    "@typescript-eslint/eslint-plugin": "2.11.0",
+    "@typescript-eslint/parser": "2.11.0",
     "cross-env": "6.0.3",
-    "eslint": "6.6.0",
-    "eslint-config-prettier": "6.5.0",
+    "eslint": "6.7.2",
+    "eslint-config-prettier": "6.7.0",
     "eslint-plugin-prettier": "3.1.1",
-    "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-react": "7.17.0",
     "generate-template-files": "2.2.0",
     "gh-pages": "2.1.1",
-    "husky": "3.0.9",
+    "husky": "3.1.0",
     "node-sass": "4.13.0",
     "prettier": "1.19.1",
     "pretty-quick": "2.0.1",
-    "react-scripts": "3.2.0",
-    "typescript": "3.7.2"
+    "react-scripts": "3.3.0",
+    "typescript": "3.7.3"
   }
 }

src/index.tsx

@@ -2,25 +2,27 @@ import './index.scss';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Store } from 'redux';
-import { Provider } from 'react-redux';
 import { createBrowserHistory, History } from 'history';
-import IStore from './models/IStore';
-import rootStore from './stores/rootStore';
 import App from './views/App';
 import environment from 'environment';
+import { Provider } from 'mobx-react';
+import { syncHistoryWithStore } from 'mobx-react-router';
+import { rootStore } from './stores/rootStore';
+import { configure } from 'mobx';
+
+configure({ enforceActions: 'always' }); // https://mobx.js.org/refguide/api.html#enforceactions
 
 (async (window: Window): Promise<void> => {
-  const initialState: Partial<IStore> = {};
-  const history: History = createBrowserHistory({ basename: environment.route.baseRoute });
-  const store: Store<IStore> = rootStore(initialState, history);
+  // const initialState: Partial<unknown> = {};
+  const browserHistory: History = createBrowserHistory({ basename: environment.route.baseRoute });
+  const history = syncHistoryWithStore(browserHistory, rootStore.routingStore);
 
   const rootEl: HTMLElement | null = document.getElementById('root');
 
   const render = (Component: typeof App, el: HTMLElement | null): void => {
     ReactDOM.render(
-      <Provider store={store}>
-        <Component history={history} dispatch={store.dispatch} />
+      <Provider {...rootStore}>
+        <Component history={history} />
       </Provider>,
       el
     );

src/models/IRequestStatus.ts

@@ -0,0 +1,15 @@
+import HttpErrorResponseModel from './HttpErrorResponseModel';
+
+export interface IRequestStatus<T> {
+  isRequesting: boolean;
+  data: T;
+  error: HttpErrorResponseModel | null;
+  meta: any;
+}
+
+export const initialRequestStatus = <T>(defaultValue: T): IRequestStatus<T> => ({
+  isRequesting: false,
+  error: null,
+  data: defaultValue,
+  meta: null,
+});