Merge pull request #146 from strichliste/refactor-remove-react-redux

Refactor remove react redux
strichliste · Feb 23, 2019 · 5a467d4 · 5a467d4
2 parents 9b9d95b + ae697dd
commit 5a467d4
Show file tree

Hide file tree

Showing 89 changed files with 1,627 additions and 2,500 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+.eslintrc.js
+**/node_modules
+build/
+coverage/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,44 @@
+const pkg = require('./package.json');
+
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended',
+  ],
+  env: {
+    browser: true,
+    node: true,
+    'jest/globals': true,
+  },
+  plugins: ['jest', 'react', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  globals: {
+    Class: true,
+    Event: true,
+    Promise: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': false,
+    '@typescript-eslint/no-empty-interface': false,
+    'sort-vars': 0,
+    'max-lines-per-function': 0,
+    'sort-imports': 0,
+    'react/no-children-prop': 0,
+    'react/prop-types': 0,
+  },
+};
diff --git a/package.json b/package.json
@@ -9,21 +9,19 @@
     "howler": "^2.1.1",
     "inter-ui": "^3.2.0",
     "lodash": "^4.17.10",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
     "react-intl": "^2.8.0",
-    "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
     "redux": "^4.0.0",
-    "redux-react-hook": "^3.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-react-hook": "^3.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "lint": "tslint --project tsconfig.json --config tslint.json",
+    "lint": "eslint --ext .tsx,.ts src/",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
@@ -36,21 +34,24 @@
     "@types/react": "16.8.1",
     "@types/react-dom": "16.0.11",
     "@types/react-intl": "^2.3.15",
-    "@types/react-redux": "6.0.6",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.2.4",
     "@types/redux-mock-store": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^1.3.0",
+    "@typescript-eslint/parser": "^1.3.0",
     "awesome-typescript-loader": "^5.2.0",
-    "babel-core": "^6.26.3",
     "babel-preset-jest": "^23.2.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "husky": "^1.1.2",
     "lint-staged": "^8.0.4",
     "prettier": "^1.16.4",
-    "react-testing-library": "^5.4.4",
+    "react-testing-library": "^5.8.0",
     "redux-mock-store": "^1.5.3",
     "ts-config": "^20.4.0",
     "ts-jest": "~23.10.4",
-    "tslint": "^5.12.1",
     "typescript": "3.3.3"
   },
   "eslintConfig": {
@@ -79,8 +80,8 @@
       ],
       "*.{ts,tsx}": [
         "prettier --write",
-        "git add",
-        "tslint --project tsconfig.json --config tslint.json"
+        "yarn lint --fix",
+        "git add"
       ],
       "*.css": [
         "prettier --write",

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
 import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';
-import { StoreContext } from 'redux-react-hook';
+import { StoreContext, useDispatch } from 'redux-react-hook';
 
 import {
   Global,
@@ -14,18 +13,17 @@ import {
 } from 'bricks-of-sand';
 import { IntlProvider } from 'react-intl';
 import { ArticleRouter } from './components/article/article-router';
-import { ConnectedErrorMessage } from './components/common/error-message';
+import { ErrorMessage } from './components/common/error-message';
 import { HeaderMenu } from './components/common/header-menu';
-import { ConnectedSettingsLoader } from './components/settings';
 import { SplitInvoiceForm } from './components/transaction';
 import { MainFooter, baseCss, mobileStyles } from './components/ui';
-import { GlobalLoadingIndicator } from './components/ui/loader';
 import { UserRouter } from './components/user/user-router';
 import { en } from './locales/en';
 import { store } from './store';
 
 // tslint:disable-next-line:no-import-side-effect
 import 'inter-ui';
+import { startLoadingSettings } from './store/reducers';
 
 const newLight: Theme = {
   ...light,
@@ -54,47 +52,45 @@ const TouchStyles = () => {
   return null;
 };
 
-class Layout extends React.Component {
-  // tslint:disable-next-line:prefer-function-over-method
-  public render(): JSX.Element {
-    return (
-      <Grid>
-        <Global styles={resetCss} />
-        <Global styles={baseCss} />
-        <TouchStyles />
-        <GlobalLoadingIndicator />
-        <ConnectedErrorMessage />
-        <ConnectedSettingsLoader />
-        <HeaderMenu />
-        <Switch>
-          <Route path="/articles" component={ArticleRouter} />
-          <Route path="/user" component={UserRouter} />
-          <Route path="/split-invoice" component={SplitInvoiceForm} />
-          <Redirect from="/" to="/user/active" />
-        </Switch>
-        <MainFooter />
-      </Grid>
-    );
-  }
-}
+const Layout = () => {
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    startLoadingSettings(dispatch);
+  }, []);
+
+  return (
+    <Grid>
+      <Global styles={resetCss} />
+      <Global styles={baseCss} />
+      <TouchStyles />
+      <ErrorMessage />
+      <HeaderMenu />
+      <Switch>
+        <Route path="/articles" component={ArticleRouter} />
+        <Route path="/user" component={UserRouter} />
+        <Route path="/split-invoice" component={SplitInvoiceForm} />
+        <Redirect from="/" to="/user/active" />
+      </Switch>
+      <MainFooter />
+    </Grid>
+  );
+};
 
 class App extends React.Component {
   // tslint:disable-next-line:prefer-function-over-method
   public render(): JSX.Element {
     return (
       <ThemeProvider themes={{ light: newLight, dark: newDark }}>
         <StoreContext.Provider value={store}>
-          <Provider store={store}>
-            <IntlProvider
-              textComponent={React.Fragment}
-              locale="en"
-              messages={en}
-            >
-              <HashRouter hashType="hashbang">
-                <Layout />
-              </HashRouter>
-            </IntlProvider>
-          </Provider>
+          <IntlProvider
+            textComponent={React.Fragment}
+            locale="en"
+            messages={en}
+          >
+            <HashRouter hashType="hashbang">
+              <Layout />
+            </HashRouter>
+          </IntlProvider>
         </StoreContext.Provider>
       </ThemeProvider>
     );

diff --git a/src/components/article/__tests__/validator.spec.tsx b/src/components/article/__tests__/validator.spec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { cleanup } from 'react-testing-library';
 
 import { renderWithContext } from '../../../spec-configs/render';
-import { ConnectedArticleValidator } from '../validator';
+import { ArticleValidator } from '../validator';
 
 afterEach(cleanup);
 
@@ -11,7 +11,7 @@ describe('ArticleValidator', () => {
     it('is valid if user has enough balance', () => {
       const mockRender = jest.fn();
       renderWithContext(
-        <ConnectedArticleValidator value={8} userId={1} render={mockRender} />,
+        <ArticleValidator value={8} userId={1} render={mockRender} />,
         {
           user: {
             1: {
@@ -27,11 +27,7 @@ describe('ArticleValidator', () => {
     it('is invalid if user has not enough balance', () => {
       const mockRender = jest.fn();
       renderWithContext(
-        <ConnectedArticleValidator
-          value={2010}
-          userId={1}
-          render={mockRender}
-        />,
+        <ArticleValidator value={2010} userId={1} render={mockRender} />,
         {
           user: {
             1: {
@@ -47,7 +43,7 @@ describe('ArticleValidator', () => {
     it('is valid if article is cheaper than boundary', () => {
       const mockRender = jest.fn();
       renderWithContext(
-        <ConnectedArticleValidator value={80} render={mockRender} />,
+        <ArticleValidator value={80} render={mockRender} />,
         {}
       );
 
@@ -57,7 +53,7 @@ describe('ArticleValidator', () => {
     it('is invalid if article is more expensive then boundary', () => {
       const mockRender = jest.fn();
       renderWithContext(
-        <ConnectedArticleValidator value={20000} render={mockRender} />,
+        <ArticleValidator value={20000} render={mockRender} />,
         {}
       );
       expect(mockRender).toHaveBeenCalledWith(false);

diff --git a/.../article/views/article-edit-form-view.tsx → ...onents/article/article-edit-form-view.tsx b/.../article/views/article-edit-form-view.tsx → ...onents/article/article-edit-form-view.tsx
@@ -1,15 +1,15 @@
 import { Card } from 'bricks-of-sand';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { ConnectedArticleForm } from '../article-form';
+import { ArticleForm } from './article-form';
 
 export function ArticleEditFormView({
   match,
   history,
 }: RouteComponentProps<{ id: string }>): JSX.Element {
   return (
     <Card>
-      <ConnectedArticleForm
+      <ArticleForm
         onCreated={history.goBack}
         articleId={Number(match.params.id)}
       />