diff --git a/src/components/templates/PostDetailTemplate/PostDetailTemplate.tsx b/src/components/templates/PostDetailTemplate/PostDetailTemplate.tsx index 4460c96e..964f0eda 100644 --- a/src/components/templates/PostDetailTemplate/PostDetailTemplate.tsx +++ b/src/components/templates/PostDetailTemplate/PostDetailTemplate.tsx @@ -12,7 +12,7 @@ import CommentListContainer from '@/components/organisms/CommentList/CommentList import { LikeDisLikeContainer } from '@/components/organisms/LikeDisLikeContainer' import APP_PATH from '@/config/paths' import { useAuth } from '@/lib/contexts/authProvider' -import { useLikeQuery, useLikeMutate } from '@/queries/likes' +import { useGetPostLikesQuery, useLikeMutate } from '@/queries/likes' import { postNewComment } from '@/services/comment' import Post from '@/types/post' import './index.scss' @@ -35,18 +35,15 @@ export function PostDetailTemplate({ const cachedCurrentUser = useMemo(() => currentUser, [currentUser]) const isEqualUser = cachedCurrentUser?._id === author._id - const { data: postLike, isFetching: isLikePostFetching } = useLikeQuery( - initPost._id, - initPost, - ) - const { data: postDisLike, isFetching: isDisLikePostFetching } = useLikeQuery( - initDisLikeChannelPost._id, - initDisLikeChannelPost, - ) + const { data: postLike, isFetching: isLikePostFetching } = + useGetPostLikesQuery(initPost._id, initPost) + const { data: postDisLike, isFetching: isDisLikePostFetching } = + useGetPostLikesQuery(initDisLikeChannelPost._id, initDisLikeChannelPost) const { likeMutation, disLikeMutation } = useLikeMutate({ initPost: initPost, initDisLikePost: initDisLikeChannelPost, + currentUser, }) const initLikeState = postLike?.likes.some( diff --git a/src/hooks/useLike.ts b/src/hooks/useLike.ts deleted file mode 100644 index 76f08a93..00000000 --- a/src/hooks/useLike.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { useEffect, useState } from 'react' -import { notify } from '@/components/atoms/Toast' -import { POST_CONSTANT } from '@/constants/post' -import { getPostDetail } from '@/services/post' -import { postLikeAction, postLikeCancelAction } from '@/services/post/like' -import Post from '@/types/post' -import { useCurrentUser } from './useCurrentUser' - -type useLikeProps = { - initPost: Post - initDisLikePost: Post -} - -export default function useLike({ initPost, initDisLikePost }: useLikeProps) { - useEffect(() => { - setLikePost(initPost) - setDisLikePost(initDisLikePost) - }, [initPost, initDisLikePost]) - const [post, setLikePost] = useState(initPost) - const [disLikePost, setDisLikePost] = useState(initDisLikePost) - const { isLoggedIn, currentUser } = useCurrentUser() - - const handleOnClickLike = async () => { - if (!isLoggedIn) { - notify('error', POST_CONSTANT.LIKE_ERROR) - return - } - - try { - const { _id, likes } = post - - const { _id: _dislikeChannelId, likes: _dislikeChannelLikes } = - disLikePost - - const hasLikedPost = likes.some((like) => like.user === currentUser?._id) - const hasDisLikedPost = _dislikeChannelLikes.some( - (like) => like.user === currentUser?._id, - ) - - //좋아요를 아직 하지 않은 경우 좋아요 요청을 보내고 싫어요 취소 요청 - if (!hasLikedPost) { - await postLikeAction(_id) - await getPostDetail(_id).then(({ post }) => { - setLikePost(post) - }) - - if (hasDisLikedPost) { - const disLikeID = disLikePost?.likes?.filter( - (like) => like.user === currentUser?._id, - )[0]._id - await postLikeCancelAction(disLikeID) - await getPostDetail(initDisLikePost._id).then(({ post }) => { - setDisLikePost(post) - }) - } - - return - } - - //좋아요를 한 경우 - //좋아요의 ID를 뽑아옴 - else { - const likeId = likes.filter((like) => like.user === currentUser?._id)[0] - ._id - - await postLikeCancelAction(likeId) - await getPostDetail(_id).then(({ post }) => { - setLikePost(post) - }) - if (!hasDisLikedPost) { - await postLikeAction(disLikePost._id) - await getPostDetail(disLikePost._id).then(({ post }) => { - setDisLikePost(post) - }) - } - - return - } - } catch (error) { - notify('error', POST_CONSTANT.LIKE_API_ERROR) - } - } - - const handleOnClickDisLikeBtn = async () => { - if (!isLoggedIn) { - notify('error', POST_CONSTANT.DISLIKE_ERROR) - return - } - - try { - const { likes } = disLikePost - - const hasLikedPost = post.likes.some( - (like) => like.user === currentUser?._id, - ) - - //해당 게시글을 싫어요를 했는지? - const hasDislikedPost = likes.some( - (disLike) => disLike.user === currentUser?._id, - ) - - //아직 싫어요를 안한 경우 - if (!hasDislikedPost) { - await postLikeAction(disLikePost._id) - await getPostDetail(disLikePost._id).then(({ post }) => { - setDisLikePost(post) - }) - - if (hasLikedPost) { - const likeId = post.likes.filter( - (like) => like.user === currentUser?._id, - )[0]._id - await postLikeCancelAction(likeId) - await getPostDetail(post._id).then(({ post }) => { - setLikePost(post) - }) - } - - return - } - - //싫어요를 이미 한 경우 - else { - const disLikeID = likes.filter( - (like) => like.user === currentUser?._id, - )[0]._id - await postLikeCancelAction(disLikeID) - await getPostDetail(disLikePost._id).then(({ post }) => { - setDisLikePost(post) - }) - - await postLikeAction(post._id) - await getPostDetail(post._id).then(({ post }) => { - setLikePost(post) - }) - return - } - } catch (error) { - notify('error', POST_CONSTANT.DISLIKE_API_ERROR) - } - } - - return { handleOnClickDisLikeBtn, handleOnClickLike, post, disLikePost } -} diff --git a/src/queries/likes/index.ts b/src/queries/likes/index.ts index f9a2b7d0..bf4c3bc5 100644 --- a/src/queries/likes/index.ts +++ b/src/queries/likes/index.ts @@ -1,15 +1,16 @@ import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query' -import { useCurrentUser } from '@/hooks/useCurrentUser' import { getPostDetail } from '@/services/post' import { postLikeAction, postLikeCancelAction } from '@/services/post/like' import type Post from '@/types/post' +import User from '@/types/user' type useLikeProps = { initPost: Post initDisLikePost: Post + currentUser?: User } -export function useLikeQuery(postId: string, initPost: Post) { +export function useGetPostLikesQuery(postId: string, initPost: Post) { return useQuery({ queryKey: ['post', postId], queryFn: async () => { @@ -21,9 +22,12 @@ export function useLikeQuery(postId: string, initPost: Post) { }) } -export function useLikeMutate({ initPost, initDisLikePost }: useLikeProps) { +export function useLikeMutate({ + initPost, + initDisLikePost, + currentUser, +}: useLikeProps) { const queryClient = useQueryClient() - const { currentUser } = useCurrentUser() const likeMutation = useMutation( async () => {