Upgrade React && Material UI

kokororin · Feb 23, 2020 · e80ec82 · e80ec82
1 parent 3acd85a
commit e80ec82
Show file tree

Hide file tree

Showing 18 changed files with 1,369 additions and 2,562 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,7 +15,8 @@ module.exports = {
     node: true,
     mocha: true
   },
-  extends: ['kotori'],
+  plugins: ['react', 'prettier'],
+  extends: ['kotori', 'plugin:react/recommended'],
   globals: {
     autobind: true
   },
@@ -26,6 +27,8 @@ module.exports = {
   },
   rules: {
     'linebreak-style': 'error',
-    'react/sort-comp': 'off'
+    'react/sort-comp': 'off',
+    'react/prop-types': 'off',
+    'prettier/prettier': 'error'
   }
 };
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    '@babel/transform-async-to-generator',
+    'react-hot-loader/babel'
+  ]
+};
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-transform-async-to-generator": "^7.8.3",
+    "@babel/plugin-transform-react-jsx": "^7.8.3",
     "@babel/polyfill": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
@@ -49,16 +50,16 @@
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "copyfiles": "^2.2.0",
-    "coveralls": "^2.13.1",
+    "coveralls": "^3.0.9",
     "cross-env": "^7.0.0",
     "eslint": "^6.8.0",
     "eslint-config-kotori": "^0.3.5",
     "eslint-loader": "^3.0.3",
+    "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
     "file-loader": "^5.1.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "gh-pages": "^2.2.0",
-    "glob": "^7.1.6",
     "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.8.0",
     "istanbul-instrumenter-loader": "^3.0.1",
@@ -70,13 +71,12 @@
     "karma-mocha-reporter": "^2.0.0",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^4.0.2",
-    "minimist": "^1.2.0",
-    "mocha": "^3.5.0",
-    "nock": "^9.0.14",
+    "mocha": "^7.0.1",
     "nodemon": "^2.0.2",
     "null-loader": "^3.0.0",
     "open-browser-webpack-plugin": "^0.0.5",
     "optimize-js-plugin": "^0.0.4",
+    "prettier": "^1.19.1",
     "puppeteer": "^2.1.1",
     "react-hot-loader": "4.12.19",
     "react-test-renderer": "^16.12.0",
@@ -92,8 +92,9 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@material-ui/core": "^1.3.0",
-    "@material-ui/icons": "^1.1.0",
+    "@material-ui/core": "^4.9.3",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.9.0",
     "animation-frame": "^0.3.0",
     "autobind-decorator": "^2.4.0",
     "body-parser": "^1.19.0",
@@ -104,26 +105,25 @@
     "express": "^4.17.1",
     "helmet": "^3.21.2",
     "honoka": "^0.4.17",
-    "inobounce": "^0.1.6",
-    "jss-vendor-prefixer": "^8.0.0",
+    "inobounce": "^0.2.0",
     "jszip": "^3.1.4",
     "moment": "^2.24.0",
     "namespaced-types": "^0.1.2",
     "node-cache": "^5.1.0",
     "pixiv-app-api": "^1.0.4",
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
+    "react": "^16.8.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.8.0",
     "react-event-listener": "^0.6.1",
     "react-ga": "^2.7.0",
-    "react-image": "^1.0.1",
+    "react-image": "^2.4.0",
     "react-intl": "^2.4.0",
     "react-masonry-component": "^6.2.1",
-    "react-md-spinner": "^0.2.5",
+    "react-md-spinner": "^1.0.0",
     "react-modal": "^3.4.5",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.3.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.0.0",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "response-time": "^2.3.2",

diff --git a/src/actions/gallery.js b/src/actions/gallery.js
@@ -76,7 +76,11 @@ function fetchSource() {
           }
         })
         .then(data => {
-          if (data.status === 'success' && data.response.illusts) {
+          if (
+            data.status === 'success' &&
+            data.response.illusts &&
+            data.response.illusts.length > 0
+          ) {
             data.response.illusts.forEach(elem => {
               dispatch(setItems(elem));
             });
@@ -105,7 +109,11 @@ function fetchSource() {
         }
       })
       .then(data => {
-        if (data.status === 'success' && data.response.illusts) {
+        if (
+          data.status === 'success' &&
+          data.response.illusts &&
+          data.response.illusts.length > 0
+        ) {
           data.response.illusts.forEach(elem => {
             dispatch(setItems(elem));
           });

diff --git a/src/components/Item.js b/src/components/Item.js
@@ -111,15 +111,6 @@ export default class Item extends React.Component {
     masonry: PropTypes.object
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      width: 0,
-      height: 0
-    };
-  }
-
   get classes() {
     return this.props.classes;
   }

diff --git a/src/components/LanguageSelector.js b/src/components/LanguageSelector.js
@@ -1,12 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import DoneIcon from '@material-ui/icons/Done';
-import LanguageIcon from '@material-ui/icons/Language';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { Done as DoneIcon, Language as LanguageIcon } from '@material-ui/icons';
 import { FormattedMessage } from 'react-intl';
-
+import shortid from 'shortid';
 import config from '@/config';
 import Storage from '@/utils/Storage';
 import chooseLocale from '@/locale/chooseLocale';
@@ -40,29 +37,27 @@ export default class LanguageSelector extends React.Component {
   renderLanguages() {
     const languages = config.languages;
 
-    return (
-      <>
-        <MenuItem disabled>
-          <FormattedMessage id="Language" />
-        </MenuItem>
-        {languages.map(elem => {
-          const lang = Storage.get('lang');
-          const highlight = elem.value === lang;
+    return [
+      <MenuItem key={shortid.generate()} disabled>
+        <FormattedMessage id="Language" />
+      </MenuItem>,
+      ...languages.map(elem => {
+        const lang = Storage.get('lang');
+        const highlight = elem.value === lang;
 
-          return (
-            <MenuItem
-              key={elem.value}
-              onClick={() => {
-                this.onLanguageClick(elem.value);
-                this.onMenuClose();
-              }}>
-              {highlight && <DoneIcon style={{ color: '#4caf50' }} />}
-              {elem.name}
-            </MenuItem>
-          );
-        })}
-      </>
-    );
+        return (
+          <MenuItem
+            key={elem.value}
+            onClick={() => {
+              this.onLanguageClick(elem.value);
+              this.onMenuClose();
+            }}>
+            {highlight && <DoneIcon style={{ color: '#4caf50' }} />}
+            {elem.name}
+          </MenuItem>
+        );
+      })
+    ];
   }
 
   render() {

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Modal from 'react-modal';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import ClearIcon from '@material-ui/icons/Clear';
+import { Button, TextField } from '@material-ui/core';
+import { Clear as ClearIcon } from '@material-ui/icons';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';

diff --git a/src/components/Refresh.js b/src/components/Refresh.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import { Fab } from '@material-ui/core';
+import { Refresh as RefreshIcon } from '@material-ui/icons';
 
 const styles = {
   floatBtn: {
@@ -15,9 +15,9 @@ const styles = {
 
 const Refresh = ({ classes, ...props }) => (
   <div className={classes.floatBtn}>
-    <Button variant="fab" color="secondary" aria-label="add" {...props}>
+    <Fab color="secondary" {...props}>
       <RefreshIcon />
-    </Button>
+    </Fab>
   </div>
 );
 

diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import EventListener from 'react-event-listener';
-import SearchIcon from '@material-ui/icons/Search';
-// import Checkbox from '@material-ui/core/Checkbox';
+import { Search as SearchIcon } from '@material-ui/icons';
+// import { Checkbox } from '@material-ui/core';
 
 const styles = {
   searchRoot: {

diff --git a/src/components/TrackPageView.js b/src/components/TrackPageView.js
@@ -9,11 +9,11 @@ export default class TrackPageView extends React.Component {
     ReactGA.initialize(config.trackingID);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.track();
   }
 
-  componentWillUpdate() {
+  UNSAFE_componentWillUpdate() {
     this.track();
   }
 
@@ -30,6 +30,6 @@ export default class TrackPageView extends React.Component {
   }
 
   render() {
-    return <Route children={this.props.children} />;
+    return <Route>{this.props.children}</Route>;
   }
 }
diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 import {
+  StylesProvider,
   MuiThemeProvider,
   createMuiTheme,
   createGenerateClassName,
@@ -9,16 +10,10 @@ import {
 import blue from '@material-ui/core/colors/blue';
 import red from '@material-ui/core/colors/red';
 import { create } from 'jss';
-import vendorPrefixer from 'jss-vendor-prefixer';
-import JssProvider from 'react-jss/lib/JssProvider';
 
 import honoka from 'honoka';
 
 import { history } from '@/stores';
-import GalleryContainer from '@/containers/GalleryContainer';
-import IllustContainer from '@/containers/IllustContainer';
-import RedirectContainer from '@/containers/RedirectContainer';
-import NotFoundContainer from '@/containers/NotFoundContainer';
 
 import Baseline from '@/components/Baseline';
 import ScrollContext from '@/components/ScrollContext';
@@ -33,34 +28,43 @@ const theme = createMuiTheme({
   }
 });
 
-const jss = create({ plugins: [...jssPreset().plugins, vendorPrefixer()] });
+const jss = create({ plugins: [...jssPreset().plugins] });
 const generateClassName = createGenerateClassName();
 
 honoka.defaults.baseURL = config.apiBaseURL;
 honoka.defaults.timeout = 30e3;
 
 const AppContainer = () => (
-  <JssProvider jss={jss} generateClassName={generateClassName}>
+  <StylesProvider jss={jss} generateClassName={generateClassName}>
     <MuiThemeProvider theme={theme}>
       <Baseline>
         <Router history={history}>
           <ScrollContext>
             <TrackPageView>
               <Switch>
-                <Route exact path="/" component={GalleryContainer} />
+                <Route
+                  exact
+                  path="/"
+                  component={require('@/containers/GalleryContainer').default}
+                />
                 <Route
                   path="/illust/:illustId(\d+)"
-                  component={IllustContainer}
+                  component={require('@/containers/IllustContainer').default}
+                />
+                <Route
+                  path="/:illustId(\d+)"
+                  component={require('@/containers/RedirectContainer').default}
+                />
+                <Route
+                  component={require('@/containers/NotFoundContainer').default}
                 />
-                <Route path="/:illustId(\d+)" component={RedirectContainer} />
-                <Route component={NotFoundContainer} />
               </Switch>
             </TrackPageView>
           </ScrollContext>
         </Router>
       </Baseline>
     </MuiThemeProvider>
-  </JssProvider>
+  </StylesProvider>
 );
 
 export default AppContainer;