Merge pull request #101 from Sebastian-Webster/add-like-count-to-image-posts

add like count to image posts

Author: Sebastian-Webster

backend/controllers/User.js

@@ -439,9 +439,9 @@ const getImagePostsByUserName = async (req, res) => {
         return
     }
 
-    ImagePost.findPostsByCreatorId(foundUserByName._id, limit, skip, publicId).then(result => {
+    ImagePost.findPostsByCreatorId(foundUserByName._id, limit, skip).then(result => {
         //Get rid of object IDs
-        const cleanedResult = result.map(post => ({title: post.title, body: post.body, datePosted: post.datePosted, imageKey: post.imageKey, liked: post.liked, postId: post._id, edited: post.editHistory.length > 0, timesEdited: post.editHistory.length, dateEdited: post.dateEdited}))
+        const cleanedResult = ImagePost.prepareDataToSendToUserSync(result, false, publicId)
         http.OK(res, 'Successfully found posts', cleanedResult)
     }).catch(error => {
         http.ServerError(res, 'An error occured while fetching image posts. Please try again later.')

backend/libraries/ImagePost.js

@@ -3,21 +3,9 @@ const User = require('./User')
 const user = new User();
 
 class ImagePostLibrary {
-    findPostsByCreatorId = (creatorId, limit, skip, viewerId) => {
+    findPostsByCreatorId = (creatorId, limit, skip) => {
         return new Promise((resolve, reject) => {
-            ImagePost.find({creatorId}).skip(skip).limit(limit).then(result => {
-                const toResolve = result.map(item => {
-                    const toReturn = {
-                        ...item._doc,
-                        liked: item.likes.includes(viewerId)
-                    }
-                    delete toReturn.likes
-                    return toReturn
-                })
-                resolve(toResolve)
-            }).catch(error => {
-                reject(error)
-            })
+            ImagePost.find({creatorId}).skip(skip).limit(limit).then(resolve).catch(reject)
         })
     }
 
@@ -85,8 +73,9 @@ class ImagePostLibrary {
 
     prepareDataToSendToUserSync = (posts, cached, publicId) => {
         const tempArray = []
-        for (const item of posts) {
-            const {_id, creatorId, likes, __v, editHistory, ...cleanResult} = item;
+        for (const itemIndex in posts) {
+            const item = posts[itemIndex]
+            const {_id, creatorId, likes, __v, editHistory, ...cleanResult} = item._doc || item; //If there is a ._doc, choose it over item
             cleanResult.liked = user.checkIfUserLikedPost(likes, publicId)
             if (typeof cleanResult.liked !== 'boolean') {
                 throw new Error(`cleanResult.liked is not a boolean. It is actually type ${typeof cleanResult.liked} and it's value is ${cleanResult.liked}`)
@@ -95,6 +84,8 @@ class ImagePostLibrary {
             cleanResult.postId = _id;
             cleanResult.edited = item.editHistory.length > 0;
             cleanResult.timesEdited = item.editHistory.length;
+            cleanResult.likeCount = likes.length;
+            console.log(cleanResult)
             tempArray.push(cleanResult)
         }
         return tempArray

frontend/src/components/ImagePost.js

@@ -15,7 +15,7 @@ import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 import useColorScheme from '../hooks/useColorScheme';
 
-const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicId, postId, dispatch, userId, previewMode, profileName, profileImage, contextMenuPostId, contextMenuAnchorElement, editMode, saving, edited, timesEdited, dateEdited, isPostOwner}) => {
+const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicId, postId, dispatch, userId, previewMode, profileName, profileImage, contextMenuPostId, contextMenuAnchorElement, editMode, saving, edited, timesEdited, dateEdited, isPostOwner, likeCount}) => {
     const {darkMode, setDarkMode} = useContext(DarkModeContext)
     const changingLikeStatus = useRef(false)
     const deleting = useRef(false)
@@ -181,11 +181,14 @@ const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicI
                             </>
                         :
                             <>
-                                <FontAwesomeIcon 
-                                    icon={liked ? fasHeart : farHeart}
-                                    style={{color: liked ? 'red' : darkMode ? 'white' : 'black', cursor: 'pointer', fontSize: 30}}
-                                    onClick={toggleLike}
-                                />
+                                <div style={{display: 'flex', justifyContent: 'left', alignItems: 'center'}}>
+                                    <FontAwesomeIcon 
+                                        icon={liked ? fasHeart : farHeart}
+                                        style={{color: liked ? 'red' : darkMode ? 'white' : 'black', cursor: 'pointer', fontSize: 30}}
+                                        onClick={toggleLike}
+                                    />
+                                    <h3 style={{margin: 0, marginLeft: 10}}>{likeCount} {likeCount === 1 ? 'like' : 'likes'}</h3>
+                                </div>
                                 <h4 style={{marginTop: 10, marginBottom: 5}}>Posted {calculateDifferenceBetweenNowAndUTCMillisecondsTime(datePosted)}</h4>
                                 {edited && <h4 style={{margin: 0}}>Edited {calculateDifferenceBetweenNowAndUTCMillisecondsTime(dateEdited)}</h4>}
                             </>

frontend/src/routes/Profile.js

@@ -260,6 +260,7 @@ const Profile = () => {
 
                 const newPostsAfterLike = state.posts;
                 newPostsAfterLike[likePostIndex].liked = true;
+                newPostsAfterLike[likePostIndex].likeCount = newPostsAfterLike[likePostIndex].likeCount + 1;
 
                 return {...state, posts: newPostsAfterLike, reRenderTimes: state.reRenderTimes + 1}
             case 'unlikePost':
@@ -271,6 +272,7 @@ const Profile = () => {
 
                 const newPostsAfterUnlike = state.posts;
                 newPostsAfterUnlike[unlikePostIndex].liked = false;
+                newPostsAfterUnlike[unlikePostIndex].likeCount = newPostsAfterUnlike[unlikePostIndex].likeCount - 1;
 
                 return {...state, posts: newPostsAfterUnlike, reRenderTimes: state.reRenderTimes + 1}
             case 'deletePost':