From a5e6a9505b2530d2baae6d0a01b7e03a66a723ee Mon Sep 17 00:00:00 2001 From: Pau Costa Date: Mon, 12 Feb 2024 12:04:21 +0100 Subject: [PATCH] :bug: PostListItems were not updating successfully when liked or edited Signed-off-by: Pau Costa --- client/src/app/postSlice.ts | 46 ++++++++++++++++++++++++-- client/src/components/postListItem.tsx | 11 +++--- client/src/routes/post.tsx | 25 ++++++++++++-- client/src/routes/postList.tsx | 39 ++++++++++++++++------ server/src/entity/Post.ts | 16 ++++++--- 5 files changed, 112 insertions(+), 25 deletions(-) diff --git a/client/src/app/postSlice.ts b/client/src/app/postSlice.ts index cc7f733..9ce1d6f 100644 --- a/client/src/app/postSlice.ts +++ b/client/src/app/postSlice.ts @@ -55,23 +55,41 @@ export const fetchGlobalPosts = (): AppThunk => async (dispatch: any) => { }; export const likePost = - (postId: number): AppThunk => + (postId: number, postType?: "global" | "followed"): AppThunk => async (dispatch: any) => { const postApi = createApi(store); dispatch(setStatus(Status.loading)); await postApi.likePost(postId); dispatch(setStatus(Status.idle)); + + if (postType === "global") { + dispatch(fetchGlobalPosts()); + } else if (postType === "followed") { + dispatch(fetchFollowedPosts()); + } else { + dispatch(fetchFollowedPosts()); + dispatch(fetchGlobalPosts()); + } }; export const unLikePost = - (postId: number): AppThunk => + (postId: number, postType?: "global" | "followed"): AppThunk => async (dispatch: any) => { const postApi = createApi(store); dispatch(setStatus(Status.loading)); await postApi.unlikePost(postId); dispatch(setStatus(Status.idle)); + + if (postType === "global") { + dispatch(fetchGlobalPosts()); + } else if (postType === "followed") { + dispatch(fetchFollowedPosts()); + } else { + dispatch(fetchFollowedPosts()); + dispatch(fetchGlobalPosts()); + } }; export const fetchAPost = @@ -95,7 +113,7 @@ export const commentAPost = dispatch(fetchAPost(postId)); dispatch(setStatus(Status.idle)); }; - + export const createPost = (title: string, content: string): AppThunk => async (dispatch: any) => { @@ -107,6 +125,28 @@ export const createPost = dispatch(setStatus(Status.idle)); }; +export const updatePost = + (postId: number, title: string, content: string): AppThunk => + async (dispatch: any) => { + const postApi = createApi(store); + + dispatch(setStatus(Status.loading)); + await postApi.updatePost(postId, { title, content }); + dispatch(fetchAPost(postId)); + dispatch(fetchGlobalPosts()); + dispatch(setStatus(Status.idle)); + }; + +export const deletePost = + (postId: number): AppThunk => + async (dispatch: any) => { + const postApi = createApi(store); + + dispatch(setStatus(Status.loading)); + await postApi.deletePost(postId); + dispatch(setStatus(Status.idle)); + }; + export const { setFollowedPosts, setGlobalPosts, setStatus, setAPost } = postSlice.actions; diff --git a/client/src/components/postListItem.tsx b/client/src/components/postListItem.tsx index eaa92d7..49ce08c 100644 --- a/client/src/components/postListItem.tsx +++ b/client/src/components/postListItem.tsx @@ -21,7 +21,8 @@ import { selectUserInfo } from "../app/loginSlice"; interface PostListItemProps { post: Post; - postType: "all" | "user"; + postType: "feed" | "user"; + feedType?: "global" | "followed"; } export default function PostListItem(props: PostListItemProps) { @@ -40,19 +41,19 @@ export default function PostListItem(props: PostListItemProps) { props.post.likedBy?.some((user) => user.id === userInfo.id) || false ); setNumberOfLikes(props.post.likedBy?.length || 0); - }, [props.post.likedBy, userInfo.id]); + }, [props.post, userInfo.id]); const handleLike = () => { if (!liked) { setNumberOfLikes(numberOfLikes + 1); - dispatch(likePost(props.post.id as number)); + dispatch(likePost(props.post.id as number, props.feedType)); } // If the user has already liked the post, unlike it else { setNumberOfLikes(numberOfLikes - 1); - dispatch(unLikePost(props.post.id as number)); + dispatch(unLikePost(props.post.id as number, props.feedType)); } - setLiked((prevState) => !prevState); + setLiked(!liked); }; const handlePostClick = () => { diff --git a/client/src/routes/post.tsx b/client/src/routes/post.tsx index 06b636b..4d6f800 100644 --- a/client/src/routes/post.tsx +++ b/client/src/routes/post.tsx @@ -1,6 +1,11 @@ import { useSelector } from "react-redux"; -import { useParams } from "react-router-dom"; -import { commentAPost, fetchAPost, selectAPost } from "../app/postSlice"; +import { useNavigate, useParams } from "react-router-dom"; +import { + commentAPost, + deletePost, + fetchAPost, + selectAPost, +} from "../app/postSlice"; import { useAppDispatch } from "../app/store"; import { useEffect } from "react"; import React from "react"; @@ -14,13 +19,16 @@ import { Typography, } from "@mui/material"; import { AppAvatar } from "../components/appAvatar"; +import { selectUserInfo } from "../app/loginSlice"; export default function PostView() { const postId = useParams<{ id: string }>().id; const storePost = useSelector(selectAPost); + const selfUser = useSelector(selectUserInfo); const [postToDisplay, setPostToDisplay] = React.useState(null); const [newComentText, setNewCommentText] = React.useState(""); const dispatch = useAppDispatch(); + const navigate = useNavigate(); useEffect(() => { dispatch(fetchAPost(parseInt(postId!, 10))); @@ -41,6 +49,11 @@ export default function PostView() { setNewCommentText(""); }; + const handleDeletePost = () => { + dispatch(deletePost(postToDisplay!.id!)); + navigate("/global"); + }; + return ( + {postToDisplay?.createdBy?.id === selfUser?.id && ( + + + + + )} ([]); useEffect(() => { - dispatch(fetchGlobalPosts()); - dispatch(fetchFollowedPosts()); - }, []); + if (props.feedType === "global") { + dispatch(fetchGlobalPosts()); + } else { + dispatch(fetchFollowedPosts()); + } + }, [props.feedType]); useEffect(() => { - const postsToDisplay = props.type === "all" ? globalPosts : followedPosts; + let postsToDisplay: Post[]; + if (props.feedType === "global") { + postsToDisplay = globalPosts; + } else { + postsToDisplay = followedPosts; + } let sortedPosts: Post[] = []; if (postsToDisplay.length > 0) { @@ -43,7 +52,7 @@ export default function PostList(props: PostListProps) { }); } setPosts(sortedPosts); - }, [followedPosts, globalPosts, props.type]); + }, [followedPosts, globalPosts, props.feedType]); return ( ) : ( <> - {props.type === "all" && ( + {props.feedType === "global" && ( {posts.map((post: Post) => ( - + ))} )} - {props.type === "user" && ( + {props.feedType === "followed" && ( {followedPosts.map((post: Post) => ( - + ))} {followedPosts.length === 0 && ( 0){ - this.likedBy.forEach(user => user.deleteSensitiveFields()) - } - if(this.comments.length > 0){ - this.comments.forEach(comment => comment.createdBy.deleteSensitiveFields()) + if (this.likedBy) { + if (this.likedBy.length > 0) { + this.likedBy.forEach((user) => user.deleteSensitiveFields()); + } } + if (this.comments) { + if (this.comments.length > 0) { + this.comments.forEach((comment) => + comment.createdBy.deleteSensitiveFields() + ); + } + } }