Update packages to latest

package.json

@@ -7,19 +7,17 @@
     "react-scripts": "1.1.1"
   },
   "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",
-    "react-router-redux": "^5.0.0-alpha.6",
-    "redux": "^3.6.0",
-    "redux-devtools-extension": "^2.13.2",
-    "redux-logger": "^3.0.1",
-    "superagent": "^3.8.2",
+    "connected-react-router": "^6.6.0",
+    "history": "^4.10.1",
+    "marked": "^0.7.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
+    "superagent": "^5.1.0",
     "superagent-promise": "^1.1.0"
   },
   "scripts": {

src/components/App.js

@@ -1,7 +1,7 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
 import agent from '../agent';
 import Header from './Header';
-import React from 'react';
-import { connect } from 'react-redux';
 import { APP_LOAD, REDIRECT } from '../constants/actionTypes';
 import { Route, Switch } from 'react-router-dom';
 import Article from '../components/Article';
@@ -13,15 +13,14 @@ import ProfileFavorites from '../components/ProfileFavorites';
 import Register from '../components/Register';
 import Settings from '../components/Settings';
 import { store } from '../store';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router'
 
-const mapStateToProps = state => {
-  return {
-    appLoaded: state.common.appLoaded,
-    appName: state.common.appName,
-    currentUser: state.common.currentUser,
-    redirectTo: state.common.redirectTo
-  }};
+const mapStateToProps = state => ({
+  appLoaded: state.common.appLoaded,
+  appName: state.common.appName,
+  currentUser: state.common.currentUser,
+  redirectTo: state.common.redirectTo
+});
 
 const mapDispatchToProps = dispatch => ({
   onLoad: (payload, token) =>
@@ -30,57 +29,52 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: REDIRECT })
 });
 
-class App extends React.Component {
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.redirectTo) {
-      // this.context.router.replace(nextProps.redirectTo);
-      store.dispatch(push(nextProps.redirectTo));
-      this.props.onRedirect();
-    }
-  }
-
-  componentWillMount() {
+const App = ({ redirectTo, appLoaded, appName, currentUser, onLoad, onRedirect }) => {
+  useEffect(() => {
     const token = window.localStorage.getItem('jwt');
     if (token) {
       agent.setToken(token);
     }
 
-    this.props.onLoad(token ? agent.Auth.current() : null, token);
-  }
+    onLoad(token ? agent.Auth.current() : null, token);
+  }, []);
 
-  render() {
-    if (this.props.appLoaded) {
-      return (
-        <div>
-          <Header
-            appName={this.props.appName}
-            currentUser={this.props.currentUser} />
-            <Switch>
-            <Route exact path="/" component={Home}/>
-            <Route path="/login" component={Login} />
-            <Route path="/register" component={Register} />
-            <Route path="/editor/:slug" component={Editor} />
-            <Route path="/editor" component={Editor} />
-            <Route path="/article/:id" component={Article} />
-            <Route path="/settings" component={Settings} />
-            <Route path="/@:username/favorites" component={ProfileFavorites} />
-            <Route path="/@:username" component={Profile} />
-            </Switch>
-        </div>
-      );
+  useEffect(() => {
+    if (redirectTo) {
+      store.dispatch(push(redirectTo));
+      onRedirect();
     }
+
+  }, [redirectTo]);
+
+  if (appLoaded) {
     return (
       <div>
         <Header
-          appName={this.props.appName}
-          currentUser={this.props.currentUser} />
+          appName={appName}
+          currentUser={currentUser} />
+          <Switch>
+          <Route exact path="/" component={Home}/>
+          <Route path="/login" component={Login} />
+          <Route path="/register" component={Register} />
+          <Route path="/editor/:slug" component={Editor} />
+          <Route path="/editor" component={Editor} />
+          <Route path="/article/:id" component={Article} />
+          <Route path="/settings" component={Settings} />
+          <Route path="/@:username/favorites" component={ProfileFavorites} />
+          <Route path="/@:username" component={Profile} />
+          </Switch>
       </div>
     );
   }
-}
 
-// App.contextTypes = {
-//   router: PropTypes.object.isRequired
-// };
+  return (
+    <div>
+      <Header
+        appName={appName}
+        currentUser={currentUser} />
+    </div>
+  );
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/Article/ArticleActions.js

@@ -9,12 +9,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: DELETE_ARTICLE, payload })
 });
 
-const ArticleActions = props => {
-  const article = props.article;
+const ArticleActions = ({ article, canModify, onClickDelete }) => {
   const del = () => {
-    props.onClickDelete(agent.Articles.del(article.slug))
+    onClickDelete(agent.Articles.del(article.slug))
   };
-  if (props.canModify) {
+
+  if (canModify) {
     return (
       <span>
 

src/components/Article/ArticleMeta.js

@@ -2,8 +2,7 @@ import ArticleActions from './ArticleActions';
 import { Link } from 'react-router-dom';
 import React from 'react';
 
-const ArticleMeta = props => {
-  const article = props.article;
+const ArticleMeta = ({ article, canModify }) => {
   return (
     <div className="article-meta">
       <Link to={`/@${article.author.username}`}>
@@ -19,7 +18,7 @@ const ArticleMeta = props => {
         </span>
       </div>
 
-      <ArticleActions canModify={props.canModify} article={article} />
+      <ArticleActions canModify={canModify} article={article} />
     </div>
   );
 };

src/components/Article/Comment.js

@@ -2,10 +2,9 @@ import DeleteButton from './DeleteButton';
 import { Link } from 'react-router-dom';
 import React from 'react';
 
-const Comment = props => {
-  const comment = props.comment;
-  const show = props.currentUser &&
-    props.currentUser.username === comment.author.username;
+const Comment = ({ currentUser, comment, slug }) => {
+  const show = currentUser &&
+    currentUser.username === comment.author.username;
   return (
     <div className="card">
       <div className="card-block">
@@ -26,7 +25,7 @@ const Comment = props => {
         <span className="date-posted">
           {new Date(comment.createdAt).toDateString()}
         </span>
-        <DeleteButton show={show} slug={props.slug} commentId={comment.id} />
+        <DeleteButton show={show} slug={slug} commentId={comment.id} />
       </div>
     </div>
   );

src/components/Article/CommentContainer.js

@@ -3,19 +3,19 @@ import CommentList from './CommentList';
 import { Link } from 'react-router-dom';
 import React from 'react';
 
-const CommentContainer = props => {
-  if (props.currentUser) {
+const CommentContainer = ({ currentUser, comments, slug, errors }) => {
+  if (currentUser) {
     return (
       <div className="col-xs-12 col-md-8 offset-md-2">
         <div>
-          <list-errors errors={props.errors}></list-errors>
-          <CommentInput slug={props.slug} currentUser={props.currentUser} />
+          <list-errors errors={errors}></list-errors>
+          <CommentInput slug={slug} currentUser={currentUser} />
         </div>
 
         <CommentList
-          comments={props.comments}
-          slug={props.slug}
-          currentUser={props.currentUser} />
+          comments={comments}
+          slug={slug}
+          currentUser={currentUser} />
       </div>
     );
   } else {
@@ -29,9 +29,9 @@ const CommentContainer = props => {
         </p>
 
         <CommentList
-          comments={props.comments}
-          slug={props.slug}
-          currentUser={props.currentUser} />
+          comments={comments}
+          slug={slug}
+          currentUser={currentUser} />
       </div>
     );
   }

src/components/Article/CommentInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import agent from '../../agent';
 import { connect } from 'react-redux';
 import { ADD_COMMENT } from '../../constants/actionTypes';
@@ -8,51 +8,39 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: ADD_COMMENT, payload })
 });
 
-class CommentInput extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      body: ''
-    };
+const CommentInput = ({ currentUser, slug, onSubmit }) => {
+  const [body, setBody] = useState('');
 
-    this.setBody = ev => {
-      this.setState({ body: ev.target.value });
-    };
+  const createComment = ev => {
+    ev.preventDefault();
+    const payload = agent.Comments.create(slug, { body });
+    setBody('');
+    onSubmit(payload);
+  };
 
-    this.createComment = ev => {
-      ev.preventDefault();
-      const payload = agent.Comments.create(this.props.slug,
-        { body: this.state.body });
-      this.setState({ body: '' });
-      this.props.onSubmit(payload);
-    };
-  }
-
-  render() {
-    return (
-      <form className="card comment-form" onSubmit={this.createComment}>
-        <div className="card-block">
-          <textarea className="form-control"
-            placeholder="Write a comment..."
-            value={this.state.body}
-            onChange={this.setBody}
-            rows="3">
-          </textarea>
-        </div>
-        <div className="card-footer">
-          <img
-            src={this.props.currentUser.image}
-            className="comment-author-img"
-            alt={this.props.currentUser.username} />
-          <button
-            className="btn btn-sm btn-primary"
-            type="submit">
-            Post Comment
-          </button>
-        </div>
-      </form>
-    );
-  }
-}
+  return (
+    <form className="card comment-form" onSubmit={createComment}>
+      <div className="card-block">
+        <textarea className="form-control"
+          placeholder="Write a comment..."
+          value={body}
+          onChange={(ev) => setBody(ev.target.value)}
+          rows="3">
+        </textarea>
+      </div>
+      <div className="card-footer">
+        <img
+          src={currentUser.image}
+          className="comment-author-img"
+          alt={currentUser.username} />
+        <button
+          className="btn btn-sm btn-primary"
+          type="submit">
+          Post Comment
+        </button>
+      </div>
+    </form>
+  );
+};
 
 export default connect(() => ({}), mapDispatchToProps)(CommentInput);

src/components/Article/CommentList.js

@@ -1,16 +1,16 @@
 import Comment from './Comment';
 import React from 'react';
 
-const CommentList = props => {
+const CommentList = ({ currentUser, comments, slug }) => {
   return (
     <div>
       {
-        props.comments.map(comment => {
+        comments.map(comment => {
           return (
             <Comment
               comment={comment}
-              currentUser={props.currentUser}
-              slug={props.slug}
+              currentUser={currentUser}
+              slug={slug}
               key={comment.id} />
           );
         })

src/components/Article/DeleteButton.js

@@ -8,20 +8,21 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: DELETE_COMMENT, payload, commentId })
 });
 
-const DeleteButton = props => {
+const DeleteButton = ({ commentId, show, slug, onClick }) => {
   const del = () => {
-    const payload = agent.Comments.delete(props.slug, props.commentId);
-    props.onClick(payload, props.commentId);
+    const payload = agent.Comments.delete(slug, commentId);
+    onClick(payload, commentId);
   };
 
-  if (props.show) {
-    return (
-      <span className="mod-options">
-        <i className="ion-trash-a" onClick={del}></i>
-      </span>
-    );
+  if (!show) {
+    return null;
   }
-  return null;
+
+  return (
+    <span className="mod-options">
+      <i className="ion-trash-a" onClick={del}></i>
+    </span>
+  );
 };
 
 export default connect(() => ({}), mapDispatchToProps)(DeleteButton);