fix(*): handle blog like button

HoseaCodes · Aug 3, 2023 · fc28318 · fc28318
1 parent ddd92d7
commit fc28318
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 36 deletions.
diff --git a/controllers/article.js b/controllers/article.js
@@ -144,29 +144,30 @@ async function deletePostcomment(req, res) {
       await Articles.findByIdAndDelete(req.params.id)
       res.clearCookie('comments-cache');
       res.json({ msg: "Deleted a article" })
-  } catch (err) {
-
+    } catch (err) {
+      
       logger.error(err)
-
+      
       return res.status(500).json({ msg: err.message })
+    }
   }
-}
-
+
 async function updateLikes(req, res) {
   try {
+
+    const post_id = req.params.id
+    let { likes } = req.body;
+    likes += 1;
 
-  const uid = req.body.uid
-  const post_id = req.params.id
-  const { likes } = req.body;
-
-  const values = [ uid, post_id ]
-  console.log(values)
-  likes += 1;
-  await Articles.findOneAndUpdate({ _id: req.params.id },
-    {likes});
-
+    await Articles.findOneAndUpdate({ _id: post_id },
+      {likes});
+
+    res.json({ 
+      msg: `${post_id} received a new like`,
+      totalLikes: likes
+    })
   } catch (err) {
-
+    console.log(err)
     logger.error(err);
 
     return res.status(500).json({ msg: err.message });

diff --git a/controllers/user.js b/controllers/user.js
@@ -53,16 +53,17 @@ async function register(req, res) {
 
 function refreshToken(req, res) {
     try {
-      const rf_token = req.cookies.refreshtoken.replace(/^JWT\s/, "");
-        if (!rf_token) return res.status(400).json({ msg: "Please Login or Register" })
+      let rf_token = req.cookies.refreshtoken
+      if (rf_token) rf_token = rf_token = req.cookies.refreshtoken.replace(/^JWT\s/, "");
+      if (!rf_token) return res.status(400).json({ msg: "Please Login or Register" })
 
-        jwt.verify(rf_token, process.env.REFRESH_TOKEN_SECRET, (err, user) => {
-            if (err) return res.status(400).json({ msg: "Please Login or Register" })
+      jwt.verify(rf_token, process.env.REFRESH_TOKEN_SECRET, (err, user) => {
+          if (err) return res.status(400).json({ msg: "Please Verify Info & Login or Register" })
 
-            const accesstoken = createAccessToken({ id: user.id })
+          const accesstoken = createAccessToken({ id: user.id })
 
-            res.json({ accesstoken })
-        })
+          res.json({ accesstoken })
+      })
     } catch (err) {
         return res.status(500).json({ msg: err.message, "err": err })
     }
@@ -89,7 +90,7 @@ async function login(req, res) {
               maxAge: 7 * 25 * 60 * 60 * 1000
           })
         }
-        res.json({accesstoken })
+        res.json({ accesstoken })
 
     } catch (err) {
         return res.status(500).json({ msg: err.message })
@@ -214,10 +215,16 @@ async function getUser(req, res) {
 
 async function updateProfile(req, res) {
   try {
-      const { name, avatar, title, work, education, skills, location, phone, socialMedia, websites } = req.body;
+      const { name, avatar, title, work, education, 
+        skills, location, phone, socialMedia, websites,
+        socialMediaHandles, articles, cart, role, username,
+        aboutMe, projects } = req.body;
 
       await Users.findOneAndUpdate({ _id: req.params.id }, {
-        name, avatar, title, work, education, skills, location, phone, socialMedia, websites
+        name, avatar, title, work, education, 
+        skills, location, phone, socialMedia, websites,
+        socialMediaHandles, articles, cart, role, username,
+        aboutMe, projects
       })
 
       res.clearCookie('users-cache');

diff --git a/models/article.js b/models/article.js
@@ -50,6 +50,10 @@ const articleSchema = new mongoose.Schema({
         type: String,
         required: true
     },
+    likes: {
+        type: Number,
+        default: 0
+    },
     // tags: {
     //   type: [String]
     // },

diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Alert from 'react-bootstrap/Alert'
-import { AiFillStar, AiFillPlayCircle } from 'react-icons/ai';
+import { AiFillStar } from 'react-icons/ai';
 import {JustifyContent, StyledMainContainer,
   PaddingContent, BlogCard, BlogPost} from '../../Layout/Container/styledArticle';
 import {CircleImage, BlogDisplayImage} from '../../Layout/Image/styledImage';
@@ -16,8 +16,7 @@ import RelatedPosts from './RelatedPosts';
 import StickyFooter from '../Sticky/StickyFooter';
 
 const MainContainer = (props) => {
-
-  const {  title, subtitle, description, images, markdown } = props.detailArticle;
+  const {  _id, likes, title, subtitle, description, images, markdown } = props.detailArticle;
   const timeFormater = props.timeFormater;
   const readTime = props.readTime;
   const user = props.user
@@ -66,7 +65,7 @@ const MainContainer = (props) => {
                   <br />
                   <BlogContent Markdown  dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
                   <br />
-                  <StickyFooter/>
+                  <StickyFooter id={_id} likes={likes}/>
                   <Newsletter/>
                 </BlogPost>
                 {/* <input type="checkbox" checked={checked}

diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
@@ -8,7 +8,7 @@ const Footer = (isHome) => {
 
     const year = new Date().getFullYear();
 
-    if (isHome == true) {
+    if (isHome === true) {
       return (
       <>
         <footer className="footer">

diff --git a/src/Components/Sticky/StickyFooter.jsx b/src/Components/Sticky/StickyFooter.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from "axios";
 import Sticky from 'react-sticky-state';
 import {ArticleHr} from '../../Layout/Hr/styledHr';
 import {AiFillTwitterCircle } from 'react-icons/ai';
@@ -10,15 +11,29 @@ import {RiShareCircleFill} from 'react-icons/ri';
 import {TiSocialLinkedinCircular} from 'react-icons/ti';
 import './StickyState.css';
 
-const StickyFooter = () => {
+const StickyFooter = ({id, likes}) => {
+  const [postLikes, setPostLikes] = useState(likes)
+
+  useEffect(() => {
+
+	}, [likes]);
+
+  const handleLike = async () => {
+		try {
+			const updateLike = await axios.put(`/api/articles/${id}/likes`, { likes: postLikes });
+      setPostLikes(parseInt(updateLike.data.totalLikes))
+		} catch (err) {
+			alert(err.response.data.msg);
+		}
+	};
   return (
           <Sticky >
             <div  className="bottom sticky">
               <ArticleHr Primary/>
               <JustifyContent SpaceAround>
                 <JustifyContent Font2>
                   <JustifyContent MarginRight>
-                    <FaRegThumbsUp/> &nbsp; <span>1</span>
+                    <FaRegThumbsUp onClick={handleLike}/> &nbsp; <span>{postLikes}</span> &nbsp;
                   </JustifyContent>
                   <JustifyContent MarginRight>
                     <FaRegComment/> &nbsp; <span>1</span>

diff --git a/src/Pages/Auth/login.jsx b/src/Pages/Auth/login.jsx
@@ -25,7 +25,7 @@ const Login = () => {
 		try {
 			await axios.post("/api/user/login", { ...user, rememberMe });
 			localStorage.setItem("firstLogin", true);
-			// window.location.href = "/";
+			window.location.href = "/";
 		} catch (err) {
 			alert(err.response.data.msg);
 		}
@@ -88,7 +88,7 @@ const Login = () => {
 									<div className="row login-row">
 										<input onClick={() => setRememberMe(!rememberMe)} type="checkbox" name="remember_me" id="remember_me" className=""/>
 										&nbsp;&nbsp;
-										<label for="remember_me">Remember Me!</label>
+										<label htmlFor="remember_me">Remember Me!</label>
 									</div>
 									<div className="row login-row">
 										<input type="submit" value="Submit" className="login-btn"/>