Update to React 16.9 and Hooks

package.json

@@ -10,8 +10,8 @@
     "history": "^4.6.3",
     "marked": "^0.3.6",
     "prop-types": "^15.5.10",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",

src/components/App.js

@@ -1,6 +1,6 @@
 import agent from '../agent';
 import Header from './Header';
-import React from 'react';
+import React, {useEffect} from 'react';
 import { connect } from 'react-redux';
 import { APP_LOAD, REDIRECT } from '../constants/actionTypes';
 import { Route, Switch } from 'react-router-dom';
@@ -30,57 +30,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();
+const App = props => {
+  const {redirectTo, appLoaded, appName, currentUser} = props;
+
+  useEffect(() => {
+    if (redirectTo) {
+      store.dispatch(push(redirectTo));
+      props.onRedirect();
     }
-  }
+  }, [redirectTo]);
 
-  componentWillMount() {
+  useEffect(() => {
     const token = window.localStorage.getItem('jwt');
     if (token) {
       agent.setToken(token);
     }
 
-    this.props.onLoad(token ? agent.Auth.current() : null, token);
-  }
+    props.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>
-      );
-    }
+  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>
     );
   }
+  return (
+    <div>
+      <Header
+        appName={appName}
+        currentUser={currentUser} />
+    </div>
+  );
 }
 
-// App.contextTypes = {
-//   router: PropTypes.object.isRequired
-// };
-
 export default connect(mapStateToProps, mapDispatchToProps)(App);

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,43 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: ADD_COMMENT, payload })
 });
 
-class CommentInput extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      body: ''
-    };
+const CommentInput = props => {
+  const [body, setBody] = useState('');
 
-    this.setBody = ev => {
-      this.setState({ body: ev.target.value });
-    };
+  const setBodyFromEvent = ev => {
+    setBody(ev.target.value);
+  };
 
-    this.createComment = ev => {
-      ev.preventDefault();
-      const payload = agent.Comments.create(this.props.slug,
-        { body: this.state.body });
-      this.setState({ body: '' });
-      this.props.onSubmit(payload);
-    };
-  }
+  const createComment = ev => {
+    ev.preventDefault();
+    const payload = agent.Comments.create(props.slug, {body});
+    setBody('');
+    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={setBodyFromEvent}
+          rows="3">
+        </textarea>
+      </div>
+      <div className="card-footer">
+        <img
+          src={props.currentUser.image}
+          className="comment-author-img"
+          alt={props.currentUser.username} />
+        <button
+          className="btn btn-sm btn-primary"
+          type="submit">
+          Post Comment
+        </button>
+      </div>
+    </form>
+  );
 }
 
 export default connect(() => ({}), mapDispatchToProps)(CommentInput);

src/components/Article/index.js

@@ -1,6 +1,6 @@
 import ArticleMeta from './ArticleMeta';
 import CommentContainer from './CommentContainer';
-import React from 'react';
+import React, {useEffect} from 'react';
 import agent from '../../agent';
 import { connect } from 'react-redux';
 import marked from 'marked';
@@ -18,80 +18,77 @@ const mapDispatchToProps = dispatch => ({
     dispatch({ type: ARTICLE_PAGE_UNLOADED })
 });
 
-class Article extends React.Component {
-  componentWillMount() {
-    this.props.onLoad(Promise.all([
-      agent.Articles.get(this.props.match.params.id),
-      agent.Comments.forArticle(this.props.match.params.id)
-    ]));
-  }
+const Article = props => {
+  console.log("SBD - Article 1");
 
-  componentWillUnmount() {
-    this.props.onUnload();
-  }
+  useEffect(() => {
+    console.log("SBD - Article 2");
+    props.onLoad(Promise.all([
+      agent.Articles.get(props.match.params.id),
+      agent.Comments.forArticle(props.match.params.id)
+    ]));
 
-  render() {
-    if (!this.props.article) {
-      return null;
+    return () => {
+      console.log("SBD - Article 3");
+      return props.onUnload();
     }
+  }, []);
 
-    const markup = { __html: marked(this.props.article.body, { sanitize: true }) };
-    const canModify = this.props.currentUser &&
-      this.props.currentUser.username === this.props.article.author.username;
-    return (
-      <div className="article-page">
+  if (!props.article) {
+    return null;
+  }
 
-        <div className="banner">
-          <div className="container">
+  const markup = { __html: marked(props.article.body, { sanitize: true }) };
+  const canModify = props.currentUser &&
+    props.currentUser.username === props.article.author.username;
 
-            <h1>{this.props.article.title}</h1>
-            <ArticleMeta
-              article={this.props.article}
-              canModify={canModify} />
+  return (
+    <div className="article-page">
 
-          </div>
+      <div className="banner">
+        <div className="container">
+          <h1>{props.article.title}</h1>
+          <ArticleMeta
+            article={props.article}
+            canModify={canModify} />
         </div>
+      </div>
 
-        <div className="container page">
-
-          <div className="row article-content">
-            <div className="col-xs-12">
-
-              <div dangerouslySetInnerHTML={markup}></div>
-
-              <ul className="tag-list">
-                {
-                  this.props.article.tagList.map(tag => {
-                    return (
-                      <li
-                        className="tag-default tag-pill tag-outline"
-                        key={tag}>
-                        {tag}
-                      </li>
-                    );
-                  })
-                }
-              </ul>
-
-            </div>
+      <div className="container page">
+        <div className="row article-content">
+          <div className="col-xs-12">
+            <div dangerouslySetInnerHTML={markup}></div>
+
+            <ul className="tag-list">
+              {
+                props.article.tagList.map(tag => {
+                  return (
+                    <li
+                      className="tag-default tag-pill tag-outline"
+                      key={tag}>
+                      {tag}
+                    </li>
+                  );
+                })
+              }
+            </ul>
           </div>
+        </div>
 
-          <hr />
+        <hr />
 
-          <div className="article-actions">
-          </div>
+        <div className="article-actions"></div>
 
-          <div className="row">
-            <CommentContainer
-              comments={this.props.comments || []}
-              errors={this.props.commentErrors}
-              slug={this.props.match.params.id}
-              currentUser={this.props.currentUser} />
-          </div>
+        <div className="row">
+          <CommentContainer
+            comments={props.comments || []}
+            errors={props.commentErrors}
+            slug={props.match.params.id}
+            currentUser={props.currentUser} />
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Article);