basic react app configuration

.eslintignore

@@ -0,0 +1,4 @@
+coverage/*
+dist/
+node_modules/
+jest.config.js

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
+  "extends": [
+    "airbnb",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "prettier"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "comma-dangle": "off",
+    "array-callback-return": "off",
+    "no-param-reassign": "off",
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
+    "import/prefer-default-export": "off",
+    "react/jsx-props-no-spreading": "off",
+    "arrow-parens": "off",
+    "no-alert": 0,
+    "no-console": 0,
+    "linebreak-style": 0,
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 120,
+        "trailingComma": "es5",
+        "jsxSingleQuote": true,
+        "singleQuote": true,
+        "tabWidth": 2,
+        "bracketSpacing": true,
+        "jsxBracketSameLine": true,
+        "semi": true
+      }
+    ]
+  }
+}

.gitignore

@@ -21,3 +21,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+### Emacs ###
+*~
+/temp
+/.vscode
+/module.config.js
+
+.eslintcache
+.idea
+dist/

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.+(js|jsx)": ["eslint --fix", "git add"],
+  "*.+(json|css|md)": ["prettier --write", "git add"]
+}

package.json

@@ -1,21 +1,54 @@
 {
-  "name": "humedo",
+  "name": "react-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.5.2",
+    "classnames": "2.2.6",
+    "formik": "^2.2.0",
+    "history": "^5.0.0",
+    "i18next": "^19.8.3",
+    "jquery": "^3.5.1",
+    "js-cookie": "^2.2.1",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.3.2",
+    "prop-types": "15.7.2",
+    "qs": "^6.9.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-select": "^3.1.1",
+    "react-toastify": "^6.0.9",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "coverage": "react-scripts test --coverage"
+  },
+  "lint-staged": {
+    "*.+(js|jsx)": "eslint --fix",
+    "*.+(json|css|md)": "prettier --write"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run format"
+    }
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +67,19 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^7.29.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "flow-bin": "^0.153.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "jest": "26.6.0"
   }
 }

src/App.js

@@ -1,25 +1,19 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+import ProtectedRoute from './routes/ProtectedRoute';
+import Login from './components/Login';
+import ROUTES from './routes/Routes';
+import './App.scss';
+
+const App = () => (
+  <Switch>
+    <Route path='/login' exact component={Login} />
+    {ROUTES.map((route) => (
+      <ProtectedRoute key={route.key} {...route} />
+    ))}
+    <Route component={() => <h1>Not Found!</h1>} />
+  </Switch>
+);
 
 export default App;

src/App.test.js

@@ -1,8 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
 });

src/components/Example.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const Example = () => <h1>hi Example</h1>;
+export default Example;

src/components/Login.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const Login = () => <h1>hi Login</h1>;
+export default Login;

src/components/Page.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const Page = () => <h1>hi page</h1>;
+export default Page;

src/index.js

@@ -1,17 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import initializeStore from './store';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import './index.scss';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Provider store={initializeStore()}>
+        <App />
+      </Provider>
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

src/reducers/exampleReducer.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const slice = createSlice({
+  name: 'discussions',
+  initialState: {
+    appIds: [],
+    status: '',
+  },
+  reducers: {
+    selectApp: (state, { payload }) => {
+      const { appId } = payload;
+      state.selectedAppId = appId;
+    },
+    updateStatus: (state, { payload }) => {
+      const { status } = payload;
+      state.status = status;
+    },
+  },
+});
+
+export const { loadApps, selectApp, updateStatus } = slice.actions;
+
+export const { reducer } = slice;

src/reducers/rootReducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { reducer as exampleReducer } from './exampleReducer';
+
+const rootReducer = combineReducers({
+  exampleReducer,
+});
+
+export default rootReducer;

src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

src/routes/ProtectedRoute.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const ProtectedRoute = ({ isAuth, component: Component, ...rest }) => {
+  console.log('route', { ...rest });
+  return (
+    <Route
+      {...rest}
+      render={(props) => {
+        if (isAuth) {
+          return <Component {...props} />;
+        }
+        return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
+      }}
+    />
+  );
+};
+
+ProtectedRoute.propTypes = {
+  isAuth: PropTypes.bool,
+  component: PropTypes.elementType.isRequired,
+  location: PropTypes.instanceOf(Object),
+};
+
+ProtectedRoute.defaultProps = {
+  isAuth: false,
+  location: {},
+};
+
+export default ProtectedRoute;

src/routes/Routes.js

@@ -0,0 +1,19 @@
+import Example from '../components/Example';
+import Page from '../components/Page';
+
+const ROUTES = [
+  {
+    path: '/app',
+    key: 'APP',
+    exact: true,
+    component: Example,
+  },
+  {
+    path: '/app/page',
+    key: 'APP_PAGE',
+    exact: true,
+    component: Page,
+  },
+];
+
+export default ROUTES;

src/store.js

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit';
+import logger from 'redux-logger';
+
+import rootReducer from './reducers/rootReducer';
+
+export const initializeStore = () =>
+  configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
+  });
+
+export default initializeStore;