From caea54047c5f5720c12c8f92aa9e92c70ef98bb2 Mon Sep 17 00:00:00 2001 From: Rinat Tabaev Date: Sun, 24 Sep 2023 20:06:39 +0300 Subject: [PATCH] feature: number of likes on the post, user can see if has already liked the post --- src/App.tsx | 23 ++++- src/components/AnotherUser/Afeed.tsx | 93 +++++++++++-------- src/components/AnotherUser/Aposts.tsx | 9 +- src/components/AnotherUser/Auser.tsx | 6 +- src/components/AnotherUser/Auserpopup.tsx | 2 +- .../LoadingStates/LoadingComments.tsx | 64 ++----------- src/components/Profile/AvatarImage.tsx | 4 +- src/components/Profile/Feed.tsx | 62 ++++++++++--- src/components/Profile/Posts.tsx | 13 +-- .../chat/components/SubmitMessage.tsx | 9 +- src/components/likedposts/LikedDesc.tsx | 10 +- src/hooks/useQueryHooks/useUserData.tsx | 11 ++- src/methods/methods.ts | 55 ++++++++--- src/styles/index.scss | 12 +++ src/types/Types.tsx | 80 +++++++++++----- 15 files changed, 282 insertions(+), 171 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5c9c92f..68fe691 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import { lazy, Suspense } from "react"; import { Routes, Route } from "react-router-dom"; import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary"; import useGeneralContext from "./hooks/useContextHooks/useGeneralContext"; @@ -8,6 +9,10 @@ import Usersearch from "./components/Userlist/Usersearch"; import Auser from "./components/AnotherUser/Auser"; import LikedPosts from "./components/LikedPosts/LikedPosts"; import Chat from "./components/Chat/Chat"; +import Loading from "./components/LoadingStates/LoadingPosts"; + +const LazyLikedPosts = lazy(() => import("./components/LikedPosts/LikedPosts")); +const LazyChat = lazy(() => import("./components/Chat/Chat")); export const cookies = new Cookies(); @@ -33,8 +38,22 @@ const App = () => { } /> } /> } /> - } /> - } /> + }> + + + } + /> + Loading chat...}> + + + } + /> ); diff --git a/src/components/AnotherUser/Afeed.tsx b/src/components/AnotherUser/Afeed.tsx index cba49af..0556dc1 100644 --- a/src/components/AnotherUser/Afeed.tsx +++ b/src/components/AnotherUser/Afeed.tsx @@ -1,46 +1,43 @@ -import { memo } from "react"; -import { Post, LikePostMutation } from "../../types/Types"; -import { doc, updateDoc, getDoc } from "firebase/firestore"; -import { db } from "../../firebase-config"; +import { memo, useCallback } from "react"; +import { Post } from "../../types/Types"; +import { handleUnlike, handleLike } from "../../methods/methods"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import useModal from "../../hooks/useModal"; type AfeedProps = { posts: Post[]; username?: string; + uid?: string; }; -const Afeed = ({ posts, username }: AfeedProps) => { +const Afeed = ({ posts, uid: target_id }: AfeedProps) => { const queryClient = useQueryClient(); + const uid: string = localStorage.getItem("uid")!; const { openImagePopup } = useModal(); - const handleLikeQuery = async (props: LikePostMutation) => { - const uid = localStorage.getItem("uid")!; - const userdoc = doc(db, "users", uid); - const dataSnap = await getDoc(userdoc); - const dataset = dataSnap.data(); - const likedPosts = dataset?.liked; - props.e.target.classList.remove("explosive"); - props.e.target.classList.add("explosive"); - const id = likedPosts.length ? likedPosts[0].id + 1 : 1; - const post = { - id, - city: props.name, - imgsrc: props.src, - creator: username, - }; - const newPosts = [post, ...likedPosts]; - const updateLiked = { liked: newPosts }; - await updateDoc(userdoc, updateLiked); - }; + const likeMutation = useMutation({ + mutationFn: handleLike, + onSuccess: () => { + queryClient.invalidateQueries(["auserdata"]); + }, + }); - const likePostMutation = useMutation({ - mutationFn: handleLikeQuery, + const unlikeMutation = useMutation({ + mutationFn: handleUnlike, onSuccess: () => { - queryClient.invalidateQueries(["userdataset"]); + queryClient.invalidateQueries(["auserdata"]); }, }); + const isLiked = useCallback( + (post: Post) => { + if (!post.likes.length) return false; + + return post.likes.some((like) => like.user_id === uid); + }, + [likeMutation, unlikeMutation], + ); + return (
{posts.map((post) => ( @@ -55,18 +52,36 @@ const Afeed = ({ posts, username }: AfeedProps) => {

{post.city}

- +
+ +

{post.likes.length}

+
))} diff --git a/src/components/AnotherUser/Aposts.tsx b/src/components/AnotherUser/Aposts.tsx index d4412c1..8ae1a89 100644 --- a/src/components/AnotherUser/Aposts.tsx +++ b/src/components/AnotherUser/Aposts.tsx @@ -2,16 +2,17 @@ import Afeed from "./Afeed"; import NoPosts from "./NoPosts"; import type { Post } from "../../types/Types"; -type apostsprops = { +type APostsProps = { posts: Post[]; - name: string | undefined; + name?: string; + uid?: string; }; -const Aposts = ({ posts, name }: apostsprops) => { +const Aposts = ({ posts, name, uid }: APostsProps) => { return ( <> {posts.length ? ( - + ) : ( )} diff --git a/src/components/AnotherUser/Auser.tsx b/src/components/AnotherUser/Auser.tsx index f156f5b..c39a19d 100644 --- a/src/components/AnotherUser/Auser.tsx +++ b/src/components/AnotherUser/Auser.tsx @@ -52,7 +52,11 @@ const Auser = () => { {auserData.isLoading ? ( ) : ( - + )}