separated incremeting/decrementing number of replies reducer and adding/removing a repost, and currently working on expandedpost replies

Author: NasihNazeem

src/components/Posts/ExpandedPostReplies.tsx

@@ -36,7 +36,7 @@ const ExpandedPostReplies = ({ postId }: ExpandedPostRepliesProps) => {
   return (
     <>
       {posts
-        .filter((o) => o.parentPostId === postId)
+        .filter((o) => o.parentPostId && !o.originalPostContent)
         .map((o) => (
           <PostItem key={o.postId} post={o} />
         ))}

src/components/Posts/PostItem.tsx

@@ -28,6 +28,7 @@ import {
   setExpandedPost,
   addRepost,
   undoRepost,
+  toggleRepost,
 } from "../../state/slices/postsSlice";
 import { enqueueToast } from "../../state/slices/toastSlice";
 import { Post } from "../../types/posts";
@@ -86,13 +87,9 @@ const PostItem = ({ post }: PostProps) => {
   const [openRepostMenu, setOpenRepostMenu] = useState(false);
   const repostMenuRef = useRef<HTMLButtonElement>(null);
   const { sendRequest } = useAxios();
-  const originalPostId = post.parentPostId ?? post.postId;
-  const userRepost = useAppSelector((state) =>
-    state.posts.posts.find(
-      (post) =>
-        post.parentPostId === originalPostId && post.userId === user.userId,
-    ),
-  );
+  const originalPostId = post.originalPostContent
+    ? post.parentPostId
+    : post.postId;
 
   const routeChange = () => {
     navigate(`/post/${originalPostId}`);
@@ -119,23 +116,30 @@ const PostItem = ({ post }: PostProps) => {
    *  reposts and the original post to update their state.
    */
   const handleRepost = async () => {
-    const repostId = userRepost ? userRepost.postId : originalPostId;
+    if (!originalPostId) return;
 
     const newPost = await toggleRepostPostRequest(
       sendRequest,
       post.isRepostedByCurrentUser,
-      repostId,
+      originalPostId,
       user.userId,
     );
 
+    dispatch(toggleRepost(originalPostId));
+
     if (post.isRepostedByCurrentUser) {
-      dispatch(undoRepost({ repostId, userId: user.userId }));
+      dispatch(
+        undoRepost({
+          postId: originalPostId,
+          userId: user.userId,
+        }),
+      );
     } else {
       dispatch(
         addRepost({
           ...post,
           ...newPost,
-          repostedByDisplayName: user.displayName, // passing here since we cannot access the user state in post slice
+          repostedByDisplayName: user.displayName, // passing here since we cannot access the user state in post
         }),
       );
     }

src/state/slices/postsSlice.ts

@@ -92,58 +92,53 @@ const postsSlice = createSlice({
         },
         textContent: "",
         isRepostedByCurrentUser: true,
+        numberOfReposts: newPost.numberOfReposts + 1,
       });
-
-      const updatedRepostsWithPosts = state.posts.map((post) => {
-        if ((post.parentPostId || post.postId) === newPost.parentPostId) {
-          return {
-            ...post,
-            numberOfReposts: post.numberOfReposts + 1,
-            isRepostedByCurrentUser: true,
-          };
-        }
-
-        return post;
-      });
-
-      state.posts = updatedRepostsWithPosts;
     },
     undoRepost: (
       state,
-      action: PayloadAction<{ repostId: number; userId?: number }>,
+      action: PayloadAction<{ postId: number; userId?: number }>,
     ) => {
-      const { repostId, userId } = action.payload;
-      const givenPost = state.posts.find((post) => post.postId === repostId);
-      if (!givenPost) return;
+      const { postId, userId } = action.payload;
+      if (!postId || !userId) return;
 
-      const originalPostId = givenPost.parentPostId ?? givenPost.postId; // find original post id
       const userRepostIndex = state.posts.findIndex(
-        // find userRepostIndex to filter out
-        (post) =>
-          post.parentPostId === originalPostId && post.userId === userId,
+        (post) => post.parentPostId === postId && post.userId === userId,
       );
 
-      if (userRepostIndex !== -1) {
+      if (postId && userRepostIndex !== -1) {
         state.posts.splice(userRepostIndex, 1); // filter out repost belonging to current user
       }
+    },
+    toggleRepost: (state, action: PayloadAction<number>) => {
+      const postToUpdate = state.posts.find(
+        (post) => post.postId === action.payload,
+      );
+      if (!postToUpdate) return;
+
+      const originalPostId = postToUpdate.originalPostContent
+        ? postToUpdate.parentPostId
+        : postToUpdate.postId;
 
-      const updatedRepostsWithPosts = state.posts.map((post) => {
-        // update all existing reposts and original post with numberOfReposts and updating isRepostedByCurrentUser flag.
+      const newPosts = state.posts.map((post) => {
         if (
           post.postId === originalPostId ||
           post.parentPostId === originalPostId
         ) {
+          const isRepostedByCurrentUser = !post.isRepostedByCurrentUser;
+
           return {
             ...post,
-            numberOfReposts: post.numberOfReposts - 1,
-            isRepostedByCurrentUser: false,
+            isRepostedByCurrentUser,
+            numberOfReposts: isRepostedByCurrentUser
+              ? post.numberOfReposts + 1
+              : post.numberOfReposts - 1,
           };
         }
-
         return post;
       });
 
-      state.posts = updatedRepostsWithPosts;
+      state.posts = newPosts;
     },
     toggleLikePost: (state, action: PayloadAction<number>) => {
       const postToUpdate = state.posts.find((p) => p.postId === action.payload);
@@ -223,6 +218,7 @@ export const {
   setPosts,
   setExpandedPost,
   addRepost,
+  toggleRepost,
   toggleLikePost,
   toggleFollow,
   updateDisplayNames,

src/utilities/postTransform.ts

@@ -1,5 +1,15 @@
 import { Post } from "../types/posts";
 
+/**
+ * Repost Item data that needs to be transformed to how a Regular Post Item is being displayed.
+ * I needed this because when we return a post object from the database,
+ * we cannot simply populate the Post object like a regular post.
+ *
+ * It is important to take the original content object being returned
+ * and transforming this data to look like a regular post item so that the
+ * post item component can read it like normal without needing to place conditionals
+ * depending on whether it is a repost or a regular post.
+ */
 export const convertRepostToPost = (post: Post): Post => {
   if (!post.originalPostContent) return post;
 

src/utilities/postUtilities.ts

@@ -36,7 +36,7 @@ const toggleRepostPostRequest = async (
       await sendRequest(
         {
           method: "PUT",
-          data: { postId },
+          data: { postId, userId },
         },
         "posts/undoRepost",
       );