Fixed like dislike issue

E3-JSI · Mar 4, 2024 · 51e74b4 · 51e74b4
1 parent fef92e3
commit 51e74b4
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -22,8 +22,8 @@ A MERN stack based social media application (MongoDB Express React Redux NodeJs)
  - create posts.
  - like, dislike, and comment on posts.
  - like, and dislike a comment.
- - followings
- - followers
+ - followings.
+ - followers.
  - recording viewed posts by users.
  - recording read posts by users.
  - profile page shows user details and posts with following and followers menu.

diff --git a/client/build/asset-manifest.json b/client/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.273fa716.chunk.css",
-    "main.js": "/static/js/main.c78c2394.chunk.js",
-    "main.js.map": "/static/js/main.c78c2394.chunk.js.map",
+    "main.js": "/static/js/main.62d0b6dd.chunk.js",
+    "main.js.map": "/static/js/main.62d0b6dd.chunk.js.map",
     "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
     "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
     "static/css/2.5f8bea38.chunk.css": "/static/css/2.5f8bea38.chunk.css",
     "static/js/2.9d93ea07.chunk.js": "/static/js/2.9d93ea07.chunk.js",
     "static/js/2.9d93ea07.chunk.js.map": "/static/js/2.9d93ea07.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.3865120a6797aa1c3234f51aad886e93.js": "/precache-manifest.3865120a6797aa1c3234f51aad886e93.js",
+    "precache-manifest.b0764a8333e9e8a06997069e9bdf45fd.js": "/precache-manifest.b0764a8333e9e8a06997069e9bdf45fd.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.5f8bea38.chunk.css.map": "/static/css/2.5f8bea38.chunk.css.map",
     "static/css/main.273fa716.chunk.css.map": "/static/css/main.273fa716.chunk.css.map"

diff --git a/client/build/index.html b/client/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><link href="/static/css/2.5f8bea38.chunk.css" rel="stylesheet"><link href="/static/css/main.273fa716.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.9d93ea07.chunk.js"></script><script src="/static/js/main.c78c2394.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><link href="/static/css/2.5f8bea38.chunk.css" rel="stylesheet"><link href="/static/css/main.273fa716.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.9d93ea07.chunk.js"></script><script src="/static/js/main.62d0b6dd.chunk.js"></script></body></html>
diff --git a/client/src/components/comment/commentSA.js b/client/src/components/comment/commentSA.js
@@ -20,8 +20,10 @@ function CommentSA ({post, comment, isDetail, classes }) {
   const desc = useRef();
   const [like, setLike] = useState(comment.likes.length);
   const [dislike, setDislike] = useState(comment.dislikes.length);
+
   const [isLiked, setIsLiked] = useState(false);
   const [isDisliked, setIsDisliked] = useState(false);
+
   const [isLikedByOne, setIsLikedByOne] = useState(false);
   const [isDislikedByOne, setIsDislikedByOne] = useState(false);
   const [user, setUser] = useState({});
@@ -35,6 +37,7 @@ function CommentSA ({post, comment, isDetail, classes }) {
   useEffect(() => {
     setIsLiked(comment.likes.includes(currentUser._id));
     setIsLikedByOne(comment.likes.length == 1)
+
     setIsDisliked(comment.dislikes.includes(currentUser._id));
     setIsDislikedByOne(comment.dislikes.length == 1)
 
@@ -51,40 +54,47 @@ function CommentSA ({post, comment, isDetail, classes }) {
   }, [post.userId])
 
 
-  const commentLikeHandler = () => {
-    if(!isDisliked){
+
+  const commentLikeHandler = async () => {
     try {
-      axios.put("/comments/" + comment._id + "/like", { userId: currentUser._id });
+      const p = await axios.put("/comments/" + comment._id + "/like", { userId: currentUser._id });
+      console.log("likeHandler");
+      console.log(p);
+
+      if(p.data.likes.length > 0){
+
+        setIsLiked(p.data.likes.includes(currentUser._id));
+        setLike(p.data.likes.length);
+        setDislike(p.data.dislikes.length);
+      }
+        else{
+          setIsLiked(false);
+          setLike(0);
+          setDislike(0);
+        }
     } catch (err) { 
-
       console.log(err);
     }
-    setLike(isLiked ? like - 1 : like + 1);
-    setIsLiked(!isLiked);
-    if (comment.likes.length == 1){
-      setIsLikedByOne(false);
-    }
-  }else{
-    setDislike(dislike - 1);
-    setIsDisliked(false);
-  }
   };
 
-  const commentDislikeHandler = () => {
-    if(!isLiked){
+
+  const commentDislikeHandler = async () => {
+
     try {
-      axios.put("/comments/" + comment._id + "/dislike", { userId: currentUser._id });
+      const p =  await axios.put("/comments/" + comment._id + "/dislike", { userId: currentUser._id });
+      console.log("dislike Handler");
+      if(p.data.dislikes.length > 0){
+
+        setIsDisliked(p.data.dislikes.includes(currentUser._id));
+        setLike(p.data.likes.length);
+        setDislike(p.data.dislikes.length);
+
+      }else{
+        setIsDisliked(false);
+        setLike(0);
+        setDislike(0);
+      }
     } catch (err) {console.log(err);}
-    setDislike(isDisliked ? dislike - 1 : dislike + 1);
-    setIsDisliked(!isDisliked);
-
-    if (comment.dislikes.length == 1){
-      setIsDislikedByOne(false);
-    }
-  }else{
-    setLike(like - 1);
-    setIsLiked(false);
-  }
   };
 
 

diff --git a/client/src/components/post/Post.js b/client/src/components/post/Post.js
@@ -32,14 +32,15 @@ function Post({onScrolling,  post, classes, isDetail }) {
   //console.log(post);
   const [like, setLike] = useState(post.likes.length);
   const [dislike, setDislike] = useState(post.dislikes.length);
-  const [repost, setRepost] = useState(post.reposts? post.reposts.length: 0);
-
   const [isLiked, setIsLiked] = useState(false);
   const [isDisliked, setIsDisliked] = useState(false);
-  const [isReposted, setIsReposted] = useState(false);
-
   const [isLikedByOne, setIsLikedByOne] = useState(false);
   const [isDislikedByOne, setIsDislikedByOne] = useState(false);
+
+  const [repost, setRepost] = useState(post.reposts? post.reposts.length: 0);
+
+  const [isReposted, setIsReposted] = useState(false);
+
   const [user, setUser] = useState({});
   const [text, setText] = useState('');
   const linkify = linkifyit();
@@ -172,7 +173,7 @@ function Post({onScrolling,  post, classes, isDetail }) {
       console.log(err); }
   };
 
-  const likeHandler = () => {
+  /*const likeHandler = () => {
     try {
       axios.put("/posts/" + post._id + "/like", { userId: currentUser._id });
     } catch (err) { }
@@ -181,9 +182,10 @@ function Post({onScrolling,  post, classes, isDetail }) {
     if (post.likes.length == 1){
       setIsLikedByOne(false);
     }
-  };
+  };*/
+
 
-  const repostHandler = () => {
+  const repostHandler = async () => {
     try {
       axios.post("/posts/" + post._id + "/repost", { userId: currentUser._id });
     } catch (err) {
@@ -195,15 +197,82 @@ function Post({onScrolling,  post, classes, isDetail }) {
   };
 
 
-  const dislikeHandler = () => {
+  const likeHandler = async () => {
+    //if(!isDisliked){
+      try {
+        const p = await axios.put("/posts/" + post._id + "/like", { userId: currentUser._id });
+        console.log("likeHandler");
+        console.log(p);
+        console.log(p.data.likes.length);
+
+
+        if(p.data.likes.length > 0){
+
+          setIsLiked(p.data.likes.includes(currentUser._id));
+          setLike(p.data.likes.length);
+          setDislike(p.data.dislikes.length);
+        }
+          else{
+            setIsLiked(false);
+            setLike(0);
+            setDislike(0);
+          }
+
+      } catch (err) { console.log(err); }
+
+    //if (p.likes.length == 1){
+    //  setIsLikedByOne(false);
+    //}
+   /* }else{
+      try {
+        const totLikes = axios.put("/posts/" + post._id + "/dislike", { userId: currentUser._id });
+
+        console.log(totLikes.length);
+        setDislike(totLikes.length);
+        if(totLikes.length > 0){
+          setIsDisliked(totLikes.includes(currentUser._id));}else{setIsDisliked(false);}
+      } catch (err) {console.log(err);}
+  }*/
+  };
+
+
+
+  const dislikeHandler = async () => {
+    //if(!isLiked){
     try {
-      axios.put("/posts/" + post._id + "/dislike", { userId: currentUser._id });
-    } catch (err) { }
-    setDislike(isDisliked ? dislike - 1 : dislike + 1);
-    setIsDisliked(!isDisliked);
-    if (post.dislikes.length == 1){
-      setIsDislikedByOne(false);
+      const p = await axios.put("/posts/" + post._id + "/dislike", { userId: currentUser._id });
+      console.log("dislike Handler");
+      if(p.data.dislikes.length > 0){
+
+        setIsDisliked(p.data.dislikes.includes(currentUser._id));
+        setLike(p.data.likes.length);
+        setDislike(p.data.dislikes.length);
+
+      }else{
+        setIsDisliked(false);
+        setLike(0);
+        setDislike(0);
+      }
+
+    } catch (err) {console.log(err);}
+
+    //if (p.dislikes.length == 1){
+    //  setIsDislikedByOne(false);
+    //}
+ /* }else{
+    setIsLiked(false);
+
+    try {
+      const totLikes = axios.put("/posts/" + post._id + "/like", { userId: currentUser._id });
+
+      console.log(totLikes.length);
+      setLike(totLikes.length);
+      if(totLikes.length > 0){
+        setIsLiked(totLikes.includes(currentUser._id));}else{setIsLiked(false);}
+
+    } catch (err) { console.log(err);
     }
+  }*/
   };
 
   const showCommentsHandler = () => {
@@ -219,7 +288,6 @@ function Post({onScrolling,  post, classes, isDetail }) {
   }
   //<img src={PF + post.img} alt="" className={classes.postImg} />
 
-
   return (
     <InView as="div" onChange={(inView, entry) => handleViewedChange(inView, post)}>
     <div className={classes.post} style={{margin: isDetail && "5px 0"}} >
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><link href="/static/css/2.5f8bea38.chunk.css" rel="stylesheet"><link href="/static/css/main.273fa716.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u\|\|[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp\|\|[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.9d93ea07.chunk.js"></script><script src="/static/js/main.c78c2394.chunk.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="stylesheet" href="/assets/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><title>Twin of Online Social Networks</title><link href="/static/css/2.5f8bea38.chunk.css" rel="stylesheet"><link href="/static/css/main.273fa716.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u\|\|[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp\|\|[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.9d93ea07.chunk.js"></script><script src="/static/js/main.62d0b6dd.chunk.js"></script></body></html>