update dependencies

package.json

@@ -3,35 +3,37 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
     "babel-eslint": "^10.1.0",
-    "cross-env": "^5.1.4",
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.10.0",
-    "eslint-plugin-import": "^2.25.3",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.7.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-promise": "^4.1.1",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "react-scripts": "1.1.1"
+    "react-router": "^5.2.1",
+    "react-scripts": "5.0.0"
   },
   "dependencies": {
-    "history": "^4.6.3",
-    "marked": "^0.3.6",
-    "prop-types": "^15.5.10",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.1.2",
-    "react-router-dom": "^4.1.2",
+    "connected-react-router": "^6.9.2",
+    "history": "^4.7.2",
+    "marked": "^4.0.10",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "5.3.0",
     "react-router-redux": "^5.0.0-alpha.6",
-    "redux": "^3.6.0",
+    "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.2",
-    "redux-logger": "^3.0.1",
+    "redux-logger": "^3.0.6",
     "styled-components": "^5.3.3",
-    "superagent": "^3.8.2",
+    "superagent": "^7.1.1",
     "superagent-promise": "^1.1.0"
   },
   "scripts": {
@@ -40,5 +42,17 @@
     "test": "cross-env PORT=4100 react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js,.jsx ."
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/agent.js

@@ -1,3 +1,4 @@
+/* eslint-disable semi */
 import superagentPromise from 'superagent-promise';
 import _superagent from 'superagent';
 

src/components/App/App.jsx

@@ -22,7 +22,8 @@ const mapStateToProps = state => {
     appName: state.common.appName,
     currentUser: state.common.currentUser,
     redirectTo: state.common.redirectTo
-  }};
+  };
+};
 
 const mapDispatchToProps = dispatch => ({
   onLoad: (payload, token) =>
@@ -32,15 +33,15 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class App extends React.Component {
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.redirectTo) {
       // this.context.router.replace(nextProps.redirectTo);
       store.dispatch(push(nextProps.redirectTo));
       this.props.onRedirect();
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const token = window.localStorage.getItem('jwt');
     if (token) {
       agent.setToken(token);

src/components/Article/ArticleActions.js

@@ -12,7 +12,7 @@ const mapDispatchToProps = dispatch => ({
 const ArticleActions = props => {
   const article = props.article;
   const del = () => {
-    props.onClickDelete(agent.Articles.del(article.slug))
+    props.onClickDelete(agent.Articles.del(article.slug));
   };
   if (props.canModify) {
     return (

src/components/Article/index.js

@@ -3,7 +3,7 @@ import CommentContainer from './CommentContainer';
 import React from 'react';
 import agent from '../../agent';
 import { connect } from 'react-redux';
-import marked from 'marked';
+import {marked} from 'marked';
 import { ARTICLE_PAGE_LOADED, ARTICLE_PAGE_UNLOADED } from '../../constants/actionTypes';
 
 const mapStateToProps = state => ({
@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class Article extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.onLoad(Promise.all([
       agent.Articles.get(this.props.match.params.id),
       agent.Comments.forArticle(this.props.match.params.id)

src/components/ArticlePreview.js

@@ -67,13 +67,13 @@ const ArticlePreview = props => {
                 <li className="tag-default tag-pill tag-outline" key={tag}>
                   {tag}
                 </li>
-              )
+              );
             })
           }
         </ul>
       </Link>
     </div>
   );
-}
+};
 
 export default connect(() => ({}), mapDispatchToProps)(ArticlePreview);

src/components/Editor.js

@@ -70,7 +70,7 @@ class Editor extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.match.params.slug !== nextProps.match.params.slug) {
       if (nextProps.match.params.slug) {
         this.props.onUnload();
@@ -80,7 +80,7 @@ class Editor extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.match.params.slug) {
       return this.props.onLoad(agent.Articles.get(this.props.match.params.slug));
     }
@@ -146,7 +146,7 @@ class Editor extends React.Component {
                           return (
                             <span className="tag-default tag-pill" key={tag}>
                               <i  className="ion-close-round"
-                                  onClick={this.removeTagHandler(tag)}>
+                                onClick={this.removeTagHandler(tag)}>
                               </i>
                               {tag}
                             </span>

src/components/Home/MainView.js

@@ -9,13 +9,13 @@ const YourFeedTab = props => {
     const clickHandler = ev => {
       ev.preventDefault();
       props.onTabClick('feed', agent.Articles.feed, agent.Articles.feed());
-    }
+    };
 
     return (
       <li className="nav-item">
         <a  href=""
-            className={ props.tab === 'feed' ? 'nav-link active' : 'nav-link' }
-            onClick={clickHandler}>
+          className={ props.tab === 'feed' ? 'nav-link active' : 'nav-link' }
+          onClick={clickHandler}>
           Your Feed
         </a>
       </li>

src/components/Home/index.js

@@ -28,7 +28,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class Home extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const tab = this.props.token ? 'feed' : 'all';
     const articlesPromise = this.props.token ?
       agent.Articles.feed :

src/components/ListPagination.js

@@ -22,7 +22,7 @@ const ListPagination = props => {
     if(props.pager) {
       props.onSetPage(page, props.pager(page));
     }else {
-      props.onSetPage(page, agent.Articles.all(page))
+      props.onSetPage(page, agent.Articles.all(page));
     }
   };
 

src/components/Profile.js

@@ -38,9 +38,9 @@ const FollowUserButton = props => {
   const handleClick = ev => {
     ev.preventDefault();
     if (props.user.following) {
-      props.unfollow(props.user.username)
+      props.unfollow(props.user.username);
     } else {
-      props.follow(props.user.username)
+      props.follow(props.user.username);
     }
   };
 
@@ -75,7 +75,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class Profile extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.onLoad(Promise.all([
       agent.Profile.get(this.props.match.params.username),
       agent.Articles.byAuthor(this.props.match.params.username)
@@ -135,7 +135,7 @@ class Profile extends React.Component {
                   user={profile}
                   follow={this.props.onFollow}
                   unfollow={this.props.onUnfollow}
-                  />
+                />
 
               </div>
             </div>

src/components/ProfileFavorites.js

@@ -16,7 +16,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class ProfileFavorites extends Profile {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.onLoad(page => agent.Articles.favoritedBy(this.props.match.params.username, page), Promise.all([
       agent.Profile.get(this.props.match.params.username),
       agent.Articles.favoritedBy(this.props.match.params.username)

src/components/Register.js

@@ -20,7 +20,7 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: UPDATE_FIELD_AUTH, key: 'username', value }),
   onSubmit: (username, email, password) => {
     const payload = agent.Auth.register(username, email, password);
-    dispatch({ type: REGISTER, payload })
+    dispatch({ type: REGISTER, payload });
   },
   onUnload: () =>
     dispatch({ type: REGISTER_PAGE_UNLOADED })
@@ -35,7 +35,7 @@ class Register extends React.Component {
     this.submitForm = (username, email, password) => ev => {
       ev.preventDefault();
       this.props.onSubmit(username, email, password);
-    }
+    };
   }
 
   componentWillUnmount() {

src/components/Settings.js

@@ -38,7 +38,7 @@ class SettingsForm extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.currentUser) {
       Object.assign(this.state, {
         image: this.props.currentUser.image || '',
@@ -49,7 +49,7 @@ class SettingsForm extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.currentUser) {
       this.setState(Object.assign({}, this.state, {
         image: nextProps.currentUser.image || '',

src/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { store, history} from './store';
 
 import { Route, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'react-router-redux';
+import { ConnectedRouter } from 'connected-react-router';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import LucidaSansUnicodeWoff from './fonts/lucida-sans-unicode.woff';
 import LucidaSansUnicodeWoff2 from './fonts/lucida-sans-unicode.woff2';

src/middleware.js

@@ -14,21 +14,23 @@ const promiseMiddleware = store => next => action => {
     const currentView = store.getState().viewChangeCounter;
     const skipTracking = action.skipTracking;
 
+    // eslint-disable-next-line promise/catch-or-return
     action.payload.then(
       res => {
-        const currentState = store.getState()
+        const currentState = store.getState();
+        // eslint-disable-next-line promise/always-return
         if (!skipTracking && currentState.viewChangeCounter !== currentView) {
-          return
+          return;
         }
         console.log('RESULT', res);
         action.payload = res;
         store.dispatch({ type: ASYNC_END, promise: action.payload });
         store.dispatch(action);
       },
       error => {
-        const currentState = store.getState()
+        const currentState = store.getState();
         if (!skipTracking && currentState.viewChangeCounter !== currentView) {
-          return
+          return;
         }
         console.log('ERROR', error);
         action.error = true;
@@ -65,4 +67,4 @@ function isPromise(v) {
 }
 
 
-export { promiseMiddleware, localStorageMiddleware }
+export { promiseMiddleware, localStorageMiddleware };

src/reducer.js

@@ -2,14 +2,14 @@ import article from './reducers/article';
 import articleList from './reducers/articleList';
 import auth from './reducers/auth';
 import { combineReducers } from 'redux';
+import { connectRouter } from 'connected-react-router';
 import common from './reducers/common';
 import editor from './reducers/editor';
 import home from './reducers/home';
 import profile from './reducers/profile';
 import settings from './reducers/settings';
-import { routerReducer } from 'react-router-redux';
 
-export default combineReducers({
+export default (history) => combineReducers({
   article,
   articleList,
   auth,
@@ -18,5 +18,5 @@ export default combineReducers({
   home,
   profile,
   settings,
-  router: routerReducer
+  router: connectRouter(history),
 });

src/reducers/article.js

@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import {
   ARTICLE_PAGE_LOADED,
   ARTICLE_PAGE_UNLOADED,
@@ -7,7 +8,7 @@ import {
 
 export default (state = {}, action) => {
   switch (action.type) {
-    case ARTICLE_PAGE_LOADED:
+  case ARTICLE_PAGE_LOADED:
       return {
         ...state,
         article: action.payload[0].article,
@@ -24,7 +25,8 @@ export default (state = {}, action) => {
           (state.comments || []).concat([action.payload.comment])
       };
     case DELETE_COMMENT:
-      const commentId = action.commentId
+      // eslint-disable-next-line no-case-declarations
+      const commentId = action.commentId;
       return {
         ...state,
         comments: state.comments.filter(comment => comment.id !== commentId)