gothinkster · ak2783934 · Feb 23, 2021 · Feb 23, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,33 +1,33 @@
-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';
-import Editor from '../components/Editor';
-import Home from '../components/Home';
-import Login from '../components/Login';
-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 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";
+import Editor from "../components/Editor";
+import Home from "../components/Home";
+import Login from "../components/Login";
+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";
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     appLoaded: state.common.appLoaded,
     appName: state.common.appName,
     currentUser: state.common.currentUser,
-    redirectTo: state.common.redirectTo
-  }};
+    redirectTo: state.common.redirectTo,
+  };
+};
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   onLoad: (payload, token) =>
     dispatch({ type: APP_LOAD, payload, token, skipTracking: true }),
-  onRedirect: () =>
-    dispatch({ type: REDIRECT })
+  onRedirect: () => dispatch({ type: REDIRECT }),
 });
 
 class App extends React.Component {
@@ -40,11 +40,10 @@ class App extends React.Component {
   }
 
   componentWillMount() {
-    const token = window.localStorage.getItem('jwt');
+    const token = window.localStorage.getItem("jwt");
     if (token) {
       agent.setToken(token);
     }
-
     this.props.onLoad(token ? agent.Auth.current() : null, token);
   }
 
@@ -54,9 +53,10 @@ class App extends React.Component {
         <div>
           <Header
             appName={this.props.appName}
-            currentUser={this.props.currentUser} />
-            <Switch>
-            <Route exact path="/" component={Home}/>
+            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} />
@@ -65,15 +65,16 @@ class App extends React.Component {
             <Route path="/settings" component={Settings} />
             <Route path="/@:username/favorites" component={ProfileFavorites} />
             <Route path="/@:username" component={Profile} />
-            </Switch>
+          </Switch>
         </div>
       );
     }
     return (
       <div>
         <Header
           appName={this.props.appName}
-          currentUser={this.props.currentUser} />
+          currentUser={this.props.currentUser}
+        />
       </div>
     );
   }

diff --git a/src/components/Article/ArticleMeta.js b/src/components/Article/ArticleMeta.js
@@ -1,13 +1,20 @@
-import ArticleActions from './ArticleActions';
-import { Link } from 'react-router-dom';
-import React from 'react';
+import ArticleActions from "./ArticleActions";
+import { Link } from "react-router-dom";
+import React from "react";
 
-const ArticleMeta = props => {
+const ArticleMeta = (props) => {
   const article = props.article;
   return (
     <div className="article-meta">
       <Link to={`/@${article.author.username}`}>
-        <img src={article.author.image} alt={article.author.username} />
+        <img
+          src={
+            article.author.image !== ""
+              ? article.author.image
+              : "https://icons.iconarchive.com/icons/google/noto-emoji-smileys/512/10001-grinning-face-icon.png"
+          }
+          alt={article.author.username}
+        />
       </Link>
 
       <div className="info">

diff --git a/src/components/Article/Comment.js b/src/components/Article/Comment.js
@@ -1,26 +1,30 @@
-import DeleteButton from './DeleteButton';
-import { Link } from 'react-router-dom';
-import React from 'react';
+import DeleteButton from "./DeleteButton";
+import { Link } from "react-router-dom";
+import React from "react";
 
-const Comment = props => {
+const Comment = (props) => {
   const comment = props.comment;
-  const show = props.currentUser &&
-    props.currentUser.username === comment.author.username;
+  const show =
+    props.currentUser && props.currentUser.username === comment.author.username;
   return (
     <div className="card">
       <div className="card-block">
         <p className="card-text">{comment.body}</p>
       </div>
       <div className="card-footer">
-        <Link
-          to={`/@${comment.author.username}`}
-          className="comment-author">
-          <img src={comment.author.image} className="comment-author-img" alt={comment.author.username} />
+        <Link to={`/@${comment.author.username}`} className="comment-author">
+          <img
+            src={
+              comment.author.image !== ""
+                ? comment.author.image
+                : "https://icons.iconarchive.com/icons/google/noto-emoji-smileys/512/10001-grinning-face-icon.png"
+            }
+            className="comment-author-img"
+            alt={comment.author.username}
+          />
         </Link>
         &nbsp;
-        <Link
-          to={`/@${comment.author.username}`}
-          className="comment-author">
+        <Link to={`/@${comment.author.username}`} className="comment-author">
           {comment.author.username}
         </Link>
         <span className="date-posted">

diff --git a/src/components/Article/CommentInput.js b/src/components/Article/CommentInput.js
@@ -1,29 +1,29 @@
-import React from 'react';
-import agent from '../../agent';
-import { connect } from 'react-redux';
-import { ADD_COMMENT } from '../../constants/actionTypes';
+import React from "react";
+import agent from "../../agent";
+import { connect } from "react-redux";
+import { ADD_COMMENT } from "../../constants/actionTypes";
 
-const mapDispatchToProps = dispatch => ({
-  onSubmit: payload =>
-    dispatch({ type: ADD_COMMENT, payload })
+const mapDispatchToProps = (dispatch) => ({
+  onSubmit: (payload) => dispatch({ type: ADD_COMMENT, payload }),
 });
 
 class CommentInput extends React.Component {
   constructor() {
     super();
     this.state = {
-      body: ''
+      body: "",
     };
 
-    this.setBody = ev => {
+    this.setBody = (ev) => {
       this.setState({ body: ev.target.value });
     };
 
-    this.createComment = ev => {
+    this.createComment = (ev) => {
       ev.preventDefault();
-      const payload = agent.Comments.create(this.props.slug,
-        { body: this.state.body });
-      this.setState({ body: '' });
+      const payload = agent.Comments.create(this.props.slug, {
+        body: this.state.body,
+      });
+      this.setState({ body: "" });
       this.props.onSubmit(payload);
     };
   }
@@ -32,21 +32,25 @@ class CommentInput extends React.Component {
     return (
       <form className="card comment-form" onSubmit={this.createComment}>
         <div className="card-block">
-          <textarea className="form-control"
+          <textarea
+            className="form-control"
             placeholder="Write a comment..."
             value={this.state.body}
             onChange={this.setBody}
-            rows="3">
-          </textarea>
+            rows="3"
+          ></textarea>
         </div>
         <div className="card-footer">
           <img
-            src={this.props.currentUser.image}
+            src={
+              this.props.currentUser.image !== ""
+                ? this.props.currentUser.image
+                : "https://icons.iconarchive.com/icons/google/noto-emoji-smileys/512/10001-grinning-face-icon.png"
+            }
             className="comment-author-img"
-            alt={this.props.currentUser.username} />
-          <button
-            className="btn btn-sm btn-primary"
-            type="submit">
+            alt={this.props.currentUser.username}
+          />
+          <button className="btn btn-sm btn-primary" type="submit">
             Post Comment
           </button>
         </div>

diff --git a/src/components/ArticlePreview.js b/src/components/ArticlePreview.js
@@ -1,30 +1,35 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import agent from '../agent';
-import { connect } from 'react-redux';
-import { ARTICLE_FAVORITED, ARTICLE_UNFAVORITED } from '../constants/actionTypes';
+import React from "react";
+import { Link } from "react-router-dom";
+import agent from "../agent";
+import { connect } from "react-redux";
+import {
+  ARTICLE_FAVORITED,
+  ARTICLE_UNFAVORITED,
+} from "../constants/actionTypes";
 
-const FAVORITED_CLASS = 'btn btn-sm btn-primary';
-const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';
+const FAVORITED_CLASS = "btn btn-sm btn-primary";
+const NOT_FAVORITED_CLASS = "btn btn-sm btn-outline-primary";
 
-const mapDispatchToProps = dispatch => ({
-  favorite: slug => dispatch({
-    type: ARTICLE_FAVORITED,
-    payload: agent.Articles.favorite(slug)
-  }),
-  unfavorite: slug => dispatch({
-    type: ARTICLE_UNFAVORITED,
-    payload: agent.Articles.unfavorite(slug)
-  })
+const mapDispatchToProps = (dispatch) => ({
+  favorite: (slug) =>
+    dispatch({
+      type: ARTICLE_FAVORITED,
+      payload: agent.Articles.favorite(slug),
+    }),
+  unfavorite: (slug) =>
+    dispatch({
+      type: ARTICLE_UNFAVORITED,
+      payload: agent.Articles.unfavorite(slug),
+    }),
 });
 
-const ArticlePreview = props => {
+const ArticlePreview = (props) => {
   const article = props.article;
-  const favoriteButtonClass = article.favorited ?
-    FAVORITED_CLASS :
-    NOT_FAVORITED_CLASS;
+  const favoriteButtonClass = article.favorited
+    ? FAVORITED_CLASS
+    : NOT_FAVORITED_CLASS;
 
-  const handleClick = ev => {
+  const handleClick = (ev) => {
     ev.preventDefault();
     if (article.favorited) {
       props.unfavorite(article.slug);
@@ -37,7 +42,14 @@ const ArticlePreview = props => {
     <div className="article-preview">
       <div className="article-meta">
         <Link to={`/@${article.author.username}`}>
-          <img src={article.author.image} alt={article.author.username} />
+          <img
+            src={
+              article.author.image !== ""
+                ? article.author.image
+                : "https://icons.iconarchive.com/icons/google/noto-emoji-smileys/512/10001-grinning-face-icon.png"
+            }
+            alt={article.author.username}
+          />
         </Link>
 
         <div className="info">
@@ -61,19 +73,17 @@ const ArticlePreview = props => {
         <p>{article.description}</p>
         <span>Read more...</span>
         <ul className="tag-list">
-          {
-            article.tagList.map(tag => {
-              return (
-                <li className="tag-default tag-pill tag-outline" key={tag}>
-                  {tag}
-                </li>
-              )
-            })
-          }
+          {article.tagList.map((tag) => {
+            return (
+              <li className="tag-default tag-pill tag-outline" key={tag}>
+                {tag}
+              </li>
+            );
+          })}
         </ul>
       </Link>
     </div>
   );
-}
+};
 
 export default connect(() => ({}), mapDispatchToProps)(ArticlePreview);