Init

.eslintignore

@@ -0,0 +1 @@
+src/serviceWorker.js

.eslintrc

@@ -0,0 +1,43 @@
+{
+  "env": {
+    "jest": true,
+    "browser": true
+  },
+  "parser": "babel-eslint",
+  "extends": ["airbnb", "plugin:import/errors"],
+  "rules": {
+    "linebreak-style": 0,
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": 0,
+    "react/no-did-mount-set-state": 0,
+    "global-require": 0,
+    "id-length": 0,
+    "max-len": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/label-has-for": 0,
+    "import/default": 0,
+    "no-param-reassign": [
+      2,
+      {
+        "props": false
+      }
+    ],
+    "consistent-return": 0,
+    "arrow-parens": 0,
+    "no-underscore-dangle": 0,
+    "import/no-dynamic-require": 0,
+    "import/prefer-default-export": 0,
+    "newline-per-chained-call": 0,
+    "object-curly-newline": [
+      "error",
+      {
+        "ObjectPattern": {
+          "multiline": false
+        }
+      }
+    ],
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+  }
+}

package.json

@@ -5,13 +5,40 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.2"
+    "react-scripts": "3.1.2",
+    "axios": "^0.19.0",
+    "classnames": "^2.2.6",
+    "connected-react-router": "^4.3.0",
+    "draft-js": "^0.11.0",
+    "draft-js-plugins-editor": "^3.0.0",
+    "draft-js-side-toolbar-plugin": "^3.0.2",
+    "draft-js-static-toolbar-plugin": "^3.0.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^6.2.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "expect.js": "^0.3.1",
+    "history": "^4.7.2",
+    "husky": "^3.0.4",
+    "react-redux": "^5.0.7",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.6.5",
+    "redux-persist": "^5.10.0",
+    "redux-saga": "^1.0.5",
+    "rxjs": "5.5.2",
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "node_modules/.bin/eslint ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -27,5 +54,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.2",
+    "node-sass": "^4.12.0"
   }
 }

src/components/pages/Login/Login.component.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Login = () => {
+  return (
+    <div>
+      Login
+    </div>
+  )
+}
+
+export default Login

src/components/pages/Login/Login.container.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import Login from './Login.styled';
+
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Login);

src/components/pages/Login/Login.styled.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Login = () => {
+  return (
+    <div>
+      Login
+    </div>
+  )
+}
+
+export default Login

src/components/pages/index.js

@@ -0,0 +1,5 @@
+import Login from './Login/Login.container';
+
+export {
+  Login
+}

src/index.js

@@ -1,12 +1,25 @@
+import { PersistGate } from 'redux-persist/integration/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import { store, persistor, history } from './state';
 import * as serviceWorker from './serviceWorker';
+import Routes from './routes';
+import './style.scss';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={store}>
+    <PersistGate persistor={persistor}>
+      <ConnectedRouter history={history}>
+        {Routes}
+      </ConnectedRouter>
+    </PersistGate>
+  </Provider>,
+  document.getElementById('root'),
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

src/routes.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import {
+  Login,
+} from './components/pages';
+
+
+const Routes = (
+  <div>
+    <Switch>
+      <Route path="/" exact component={() => <Login />} />
+    </Switch>
+  </div>
+);
+
+export default Routes;

src/state/UI/actionCreators.js

@@ -0,0 +1,6 @@
+
+import { createAction } from 'redux-actions';
+import * as actionTypes from './actionTypes';
+
+export const setLoading = createAction(actionTypes.SET_LOADING, isLoading => ({ isLoading }));
+export const setError = createAction(actionTypes.SET_ERROR, error => ({ error }));

src/state/UI/actionTypes.js

@@ -0,0 +1,3 @@
+
+export const SET_LOADING = 'SET_LOADING';
+export const SET_ERROR = 'SET_ERROR';

src/state/UI/initial.state.js

@@ -0,0 +1,4 @@
+export default {
+  isLoading: false,
+  error: false,
+};

src/state/UI/selectors.js

@@ -0,0 +1,10 @@
+import { handleActions } from 'redux-actions';
+import initialState from './initial.state';
+import * as actions from './actionCreators';
+
+const ui = handleActions(
+  {},
+  initialState,
+);
+
+export default ui;

src/state/User/actionCreators.js

@@ -0,0 +1,5 @@
+
+import { createAction } from 'redux-actions';
+import * as actionTypes from './actionTypes';
+
+export const login = createAction(actionTypes.LOGIN, user => ({ user }));

src/state/User/actionTypes.js

@@ -0,0 +1,2 @@
+export const LOGIN = 'LOGIN';
+export const SET_USER = 'SET_USER';

src/state/User/initial.state.js

@@ -0,0 +1,5 @@
+export default {
+  id: null,
+  email: null,
+  role: null,
+};

src/state/User/reducer.js

@@ -0,0 +1,9 @@
+import { handleActions } from 'redux-actions';
+import initialState from './initial.state';
+
+const user = handleActions(
+  {},
+  initialState,
+);
+
+export default user;

src/state/index-reducers.js

@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux';
+import ui from './UI/reducer';
+import user from './User/reducer';
+
+const AppReducer = combineReducers({ ui, user });
+
+const rootReducer = (state, action) => {
+  if (action.type === 'LOGOUT') return AppReducer({}, action);
+  return AppReducer(state, action);
+};
+
+export default rootReducer;

src/state/index.js

@@ -0,0 +1,39 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { persistStore, persistReducer } from 'redux-persist';
+import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
+import storage from 'redux-persist/lib/storage';
+import createSagaMiddleware from 'redux-saga';
+import { createBrowserHistory } from 'history';
+import { connectRouter, routerMiddleware } from 'connected-react-router';
+
+import rootReducer from './index-reducers';
+import rootSagas from './sagas-registration';
+
+const sagaMiddleware = createSagaMiddleware();
+
+const history = createBrowserHistory();
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // eslint-disable-line no-undef
+const enhancer = composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware));
+
+const persistConfig = {
+  key: 'root',
+  storage,
+  blacklist: ['ui'],
+  stateReconciler: autoMergeLevel2,
+};
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const configureStore = (initialState = {}) => {
+  const store = createStore(connectRouter(history)(persistedReducer), initialState, enhancer);
+  const persistor = persistStore(store);
+  sagaMiddleware.run(rootSagas);
+  routerMiddleware(history);
+  persistStore(store);
+
+  return { store, persistor };
+};
+
+const { store, persistor } = configureStore();
+
+export { store, persistor, history };

src/state/sagas-registration.js

@@ -0,0 +1,5 @@
+import { all } from 'redux-saga/effects';
+
+export default function* root() {
+  yield all([]);
+}