Updating the branch

Author: sudarshan777

src/App.js

@@ -6,7 +6,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import Registration from "./components/registration";
 import Login from "./components/login";
 import Facebook from "./components/facebook";
-import User from "./components/user";
+import User from "./components/user/index";
 import CreateArticle from "./components/create-article";
 import ArticleView from "./components/article/article-view";
 import PrivateRoute from "./components/privateRoutes";

src/components/article/Bookmark.js

@@ -10,7 +10,7 @@ const Bookmark = () => {
     (state) => state.userReducer.bookmarks,
     shallowEqual
   );
-  const { _id } = useSelector(
+  const { _id, user } = useSelector(
     (state) => state.articlesReducer.article,
     shallowEqual
   );

src/components/article/article-view.js

@@ -143,6 +143,14 @@ class ArticleView extends Component {
     this.props.dispatch(deleteArticle(this.props.match.params.id));
     window.location = "/";
   };
+  showBookmark = () => {
+    if (
+      this.props.loggedIn &&
+      this.props.user.id !== this.state.articleDetails.user_id
+    ) {
+      return <Bookmark />;
+    }
+  };
 
   render() {
     return (
@@ -158,8 +166,7 @@ class ArticleView extends Component {
         </h6>
 
         <Like />
-        {this.props.loggedIn ? <Bookmark /> : ""}
-
+        {this.showBookmark()}
         {this.editAndDeleArticle()}
 
         <hr />

src/components/user/FollowButton.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from "react";
+import { shallowEqual, useSelector, useDispatch } from "react-redux";
+import {
+  followUser,
+  unFollowUser,
+} from "../../redux/actions/get-user";
+
+const FollowButton = () => {
+  const dispatch = useDispatch();
+  const following = useSelector(
+    (state) => state.userReducer.following,
+    shallowEqual
+  );
+  // Logged In user id
+  const { id } = useSelector((state) => state.authReducer.user);
+  // Follow User Id
+  const { _id } = useSelector((state) => state.userReducer.user);
+  const loggedIn = useSelector((state) => state.authReducer.loggedIn);
+  const [isFollowed, setFollowed] = useState(false);
+
+  useEffect(() => {
+    const result = following.find((user) => user._id === _id);
+    if (result) {
+      setFollowed(true);
+    } else {
+      setFollowed(false);
+    }
+ 
+  }, [following, _id]);
+
+  const handleFollow = (e) => {
+    if (!isFollowed) {
+      dispatch(followUser(id, _id));
+    } else {
+      dispatch(unFollowUser(id, _id));
+      setFollowed(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        style={
+          isFollowed
+            ? { backgroundColor: "#007bff" }
+            : { backgroundColor: "#fff", color: "#007bff" }
+        }
+        className="btn btn-success btn-block"
+        onClick={handleFollow}
+        disabled={!loggedIn}
+      >
+        Follow
+      </button>
+    </>
+  );
+};
+export default FollowButton;

src/components/user.js renamed to src/components/user/index.js

@@ -2,20 +2,19 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import { Avatar, Card } from "antd";
 import { UserOutlined } from "@ant-design/icons";
-import "../styles/styles.css";
+import "../../styles/styles.css";
 
 import { connect } from "react-redux";
 import {
   getUser,
-  followUser,
-  unFollowUser,
   getBookmarks,
   getFollowers,
   getFollowing,
   getUserWrittenArticles,
   getArticlesLiked,
-} from "../redux/actions/get-user";
-import ArticlesList from "./article/articles-list";
+} from "../../redux/actions/get-user";
+import ArticlesList from "../article/articles-list";
+import FollowButton from "./FollowButton";
 
 class ErrorBoundary extends Component {
   state = {
@@ -67,6 +66,9 @@ class User extends Component {
   componentDidMount() {
     this.props.dispatch(getUser(this.props.match.params.id));
     this.props.dispatch(getBookmarks(this.props.match.params.id));
+    if (this.props.loggedIn) {
+      this.props.dispatch(getFollowing(this.props.user.id));
+    }
   }
   componentDidUpdate(prevProps) {
     if (this.props.userDetails !== prevProps.userDetails) {
@@ -92,35 +94,6 @@ class User extends Component {
   //   return false;
   // }
 
-  handleFollow = (e) => {
-    if (this.props.loggedIn && this.props.user.id !== this.state.user._id) {
-      this.props.dispatch(followUser(this.props.user.id, this.state.user._id));
-    } else if (
-      this.props.loggedIn &&
-      this.props.user.id === this.state.user._id
-    ) {
-      alert("You cannot follow yourself.");
-    } else {
-      e.preventDefault();
-      alert("Log In or Register to follow.");
-    }
-  };
-
-  handleUnfollow = (e) => {
-    if (this.props.loggedIn && this.props.user.id !== this.state.user._id) {
-      this.props.dispatch(
-        unFollowUser(this.props.user.id, this.state.user._id)
-      );
-    } else if (
-      this.props.loggedIn &&
-      this.props.user.id === this.state.user._id
-    ) {
-      alert("You cannot un follow yourself.");
-    } else {
-      e.preventDefault();
-      alert("Log In or Register to Unfollow.");
-    }
-  };
   getFollowers = (e) => {
     e.preventDefault();
     if (this.state.user.followers.length === 0) {
@@ -186,19 +159,6 @@ class User extends Component {
     });
   };
 
-  followButton = () => {
-    return (
-      <div>
-        <button className="btn btn-primary" onClick={this.handleFollow}>
-          Follow
-        </button>
-        <button className="btn btn-primary" onClick={this.handleUnfollow}>
-          Un Follow
-        </button>
-      </div>
-    );
-  };
-
   render() {
     return (
       // <div>
@@ -333,9 +293,9 @@ class User extends Component {
                       </a>
                     </small>
                   </p>
-                  <button className="btn btn-success btn-block">
-                    <span className="fa fa-plus-circle"></span> Follow{" "}
-                  </button>
+
+                  <FollowButton />
+
                   <button
                     type="button"
                     className="btn btn-success btn-block"

src/redux/reducers/articlesReducer.js

@@ -114,7 +114,7 @@ const handleEditComment = (state, action) => {
   if (action.result !== undefined) {
     newState = Object.assign({}, state, {
       comments: newState.comments.map((comment) => {
-        if (comment.id !== action.result._id) {
+        if (comment._id !== action.result._id) {
           return comment;
         }
         return Object.assign({}, comment, {

src/redux/store/sagas.js

@@ -454,7 +454,7 @@ function* followUser(action) {
       });
     } else {
       yield put({
-        type: Types.FOLLOW_USER_ERROR_RESPONSE,
+        type: Types.FOLLOW_USER_SUCCESS_RESPONSE,
         result,
       });
     }
@@ -467,7 +467,7 @@ function* unFollowUser(action) {
   try {
     let formBody = {};
     formBody.user = action.unfollow_id;
-    const postUrl = baseUrl + +"/user/" + action.user_id + "/follow";
+    const postUrl = baseUrl + "/user/" + action.user_id + "/follow";
     const response = yield call(GetDataFromServer, postUrl, "POST", formBody);
     const result = yield response.json();
     if (result.error) {
@@ -477,7 +477,7 @@ function* unFollowUser(action) {
       });
     } else {
       yield put({
-        type: Types.UN_FOLLOW_USER_ERROR_RESPONSE,
+        type: Types.UN_FOLLOW_USER_SUCCESS_RESPONSE,
         result,
       });
     }