updating app.js to functional component with effecthook

src/components/App.js

@@ -1,9 +1,9 @@
 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 React, {useEffect} 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';
 import Editor from '../components/Editor';
 import Home from '../components/Home';
@@ -12,75 +12,72 @@ import Profile from '../components/Profile';
 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 {store} from '../store';
+import {push} from 'react-router-redux';
 
 const mapStateToProps = state => {
-  return {
-    appLoaded: state.common.appLoaded,
-    appName: state.common.appName,
-    currentUser: state.common.currentUser,
-    redirectTo: state.common.redirectTo
-  }};
+    return {
+        appLoaded: state.common.appLoaded,
+        appName: state.common.appName,
+        currentUser: state.common.currentUser,
+        redirectTo: state.common.redirectTo
+    }
+};
 
 const mapDispatchToProps = dispatch => ({
-  onLoad: (payload, token) =>
-    dispatch({ type: APP_LOAD, payload, token, skipTracking: true }),
-  onRedirect: () =>
-    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();
+    onLoad: (payload, token) =>
+        dispatch({type: APP_LOAD, payload, token, skipTracking: true}),
+    onRedirect: () => {
+        dispatch({type: REDIRECT});
     }
-  }
 
-  componentWillMount() {
-    const token = window.localStorage.getItem('jwt');
-    if (token) {
-      agent.setToken(token);
-    }
+});
+
+const App = (props) => {
+    useEffect(() => {
+        if (props.redirectTo) {
+            store.dispatch(push(props.redirectTo));
+            props.onRedirect();
+        }
+    }, [props.redirectTo]);
 
-    this.props.onLoad(token ? agent.Auth.current() : null, token);
-  }
+    useEffect(() => {
+        // settings token
+        const token = window.localStorage.getItem('jwt');
+        if (token) {
+            agent.setToken(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 (props.appLoaded) { console.log('here1');
+        return (
+            <div>
+                <Header
+                    appName={props.appName}
+                    currentUser={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>
+        );
+    } else {
+        return (
+            <div>
+                <Header
+                    appName={props.appName}
+                    currentUser={props.currentUser}/>
+            </div>
+        );
     }
-    return (
-      <div>
-        <Header
-          appName={this.props.appName}
-          currentUser={this.props.currentUser} />
-      </div>
-    );
-  }
 }
 
-// App.contextTypes = {
-//   router: PropTypes.object.isRequired
-// };
-
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/Article/CommentInput.js

@@ -1,58 +1,56 @@
-import React from 'react';
+import React, {useState} from 'react';
 import agent from '../../agent';
-import { connect } from 'react-redux';
-import { ADD_COMMENT } from '../../constants/actionTypes';
+import {connect} from 'react-redux';
+import {ADD_COMMENT} from '../../constants/actionTypes';
+import useSingleton from "../../hooks/useSingleton";
 
 const mapDispatchToProps = dispatch => ({
-  onSubmit: payload =>
-    dispatch({ type: ADD_COMMENT, payload })
+    onSubmit: payload =>
+        dispatch({type: ADD_COMMENT, payload})
 });
 
-class CommentInput extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      body: ''
-    };
+const CommentInput = (props) => {
+    const [state, setState] = useState({
+        body: ''
+    });
+    this.state = state;
+    useSingleton(() => {
+        this.setBody = ev => {
+            setState({body: ev.target.value});
+        };
 
-    this.setBody = ev => {
-      this.setState({ body: ev.target.value });
-    };
+        this.createComment = ev => {
+            ev.preventDefault();
+            const payload = agent.Comments.create(props.slug,
+                {body: this.state.body});
+            setState({body: ''});
+            props.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">
+        <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">
+                    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>
+            </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,35 +18,31 @@ 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) => {
+  useEffect(() => {
+    props.onLoad(Promise.all([
+      agent.Articles.get(props.match.params.id),
+      agent.Comments.forArticle(props.match.params.id)
     ]));
-  }
+    return () => props.onUnload();
+  }, []);
 
-  componentWillUnmount() {
-    this.props.onUnload();
-  }
-
-  render() {
-    if (!this.props.article) {
+    if (!props.article) {
       return null;
     }
 
-    const markup = { __html: marked(this.props.article.body, { sanitize: true }) };
-    const canModify = this.props.currentUser &&
-      this.props.currentUser.username === this.props.article.author.username;
+    const markup = { __html: marked(props.article.body, { sanitize: true }) };
+    const canModify = props.currentUser &&
+      props.currentUser.username === props.article.author.username;
     return (
       <div className="article-page">
 
         <div className="banner">
           <div className="container">
 
-            <h1>{this.props.article.title}</h1>
+            <h1>{props.article.title}</h1>
             <ArticleMeta
-              article={this.props.article}
+              article={props.article}
               canModify={canModify} />
 
           </div>
@@ -61,7 +57,7 @@ class Article extends React.Component {
 
               <ul className="tag-list">
                 {
-                  this.props.article.tagList.map(tag => {
+                  props.article.tagList.map(tag => {
                     return (
                       <li
                         className="tag-default tag-pill tag-outline"
@@ -83,15 +79,14 @@ class Article extends React.Component {
 
           <div className="row">
             <CommentContainer
-              comments={this.props.comments || []}
-              errors={this.props.commentErrors}
-              slug={this.props.match.params.id}
-              currentUser={this.props.currentUser} />
+              comments={props.comments || []}
+              errors={props.commentErrors}
+              slug={props.match.params.id}
+              currentUser={props.currentUser} />
           </div>
         </div>
       </div>
     );
-  }
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Article);