nested comments modal and timline and communityPost paginate

BacPacNet · Oct 29, 2024 · bbb2f72 · bbb2f72
1 parent 4760639
commit bbb2f72
Show file tree

Hide file tree

Showing 12 changed files with 1,146 additions and 160 deletions.
diff --git a/src/components/Timeline/Post.tsx b/src/components/Timeline/Post.tsx
@@ -178,9 +178,9 @@ const Post: React.FC<PostProps> = ({
   const { mutate: LikeUnlikeGroupPost } = useLikeUnilikeGroupPost()
   const { mutate: LikeUnlikeTimelinePost } = useLikeUnlikeTimelinePost()
   const { mutate: CreateGroupPostComment, isPending: CreateGroupPostCommentLoading } = useCreateGroupPostComment(isSinglePost ? isSinglePost : false)
-  const { mutate: likeGroupPostComment } = useLikeUnlikeGroupPostComment()
+  const { mutate: likeGroupPostComment } = useLikeUnlikeGroupPostComment(false)
   const { mutate: CreateUserPostComment, isPending: CreateUserPostCommentLoading } = useCreateUserPostComment(isSinglePost ? isSinglePost : false)
-  const { mutate: likeUserPostComment } = useLikeUnlikeUserPostComment()
+  const { mutate: likeUserPostComment } = useLikeUnlikeUserPostComment(false)
   const [comment, setComment] = useState('')
   const [ImageValue, setImageValue] = useState<File | null>(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -201,6 +201,7 @@ const Post: React.FC<PostProps> = ({
         postID: postID,
         content: comment,
         imageUrl: { imageUrl: imagedata?.imageUrl, publicId: imagedata?.publicId },
+        commenterProfileId: '',
       }
 
       if (type === PostType.Timeline) {
@@ -212,6 +213,7 @@ const Post: React.FC<PostProps> = ({
     } else {
       const data: PostCommentData = {
         postID: postID,
+        commenterProfileId: '',
         content: comment,
       }
 

diff --git a/src/components/atoms/spinner/index.tsx b/src/components/atoms/spinner/index.tsx
@@ -0,0 +1,11 @@
+export default function Spinner() {
+  return (
+    <div className=" flex items-center justify-center">
+      <div className="flex justify-center items-center">
+        <svg width={30} height={30} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" className="animate-spin">
+          <circle cx="25" cy="25" r="20" fill="none" stroke="#6744FF" strokeWidth="5" strokeLinecap="round" strokeDasharray="80, 200" />
+        </svg>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/communityUniversity/GroupSelectors.tsx b/src/components/communityUniversity/GroupSelectors.tsx
@@ -11,7 +11,7 @@ const GroupSelectors = ({ setCurrSelectedGroup, currSelectedGroup, data, setAssi
     router.push(`/community/${data?.communityId}/${data?._id}`)
   }
   const isSelected = paramGroupId && paramGroupId[1] == data?._id
-  console.log(paramGroupId, data?._idect)
+
   return (
     <div
       className={`flex items-center cursor-pointer hover:bg-secondary ${

diff --git a/src/components/molecules/NewPostComment/index.tsx b/src/components/molecules/NewPostComment/index.tsx
@@ -17,17 +17,23 @@ type Props = {
     text: string
     type: PostType.Community | PostType.Timeline
     adminId: string
+    commentId?: string
+    level?: string
   }
-  postId: string
+  postId?: string
+  isReply: boolean
+  isNested?: boolean
 }
 
-const NewPostComment = ({ setNewPost, data, postId }: Props) => {
+const NewPostComment = ({ setNewPost, data, postId, isReply, isNested }: Props) => {
   const { userProfileData } = useUniStore()
+
   return (
     <>
       <div onClick={() => setNewPost(false)} className="fixed   w-full h-[100%] top-0 left-0 bg-black opacity-50 z-50"></div>
-      <div className="fixed w-1/3 max-sm:w-11/12 z-50    top-[10%] left-1/3 bg-white flex flex-col  gap-6 shadow-lg px-2 py-6 rounded-lg">
-        <div className="flex  p-2 gap-4">
+      <div className="fixed w-1/3 max-lg:w-8/12 max-sm:w-11/12 z-50    top-[10%] left-1/3 max-lg:left-32 max-sm:left-3 bg-white flex flex-col  gap-6 shadow-lg px-2 py-6 rounded-lg">
+        <div className="flex  p-2 gap-4 relative">
+          <div className="h-full w-1 bg-neutral-300 absolute top-10 left-8 -z-10"></div>
           <Image src={data?.avatarLink || avatar} width={56} height={56} objectFit="cover" className="rounded-full w-12 h-12" alt="avatar.png" />
           <div>
             <h3 className="font-medium text-sm text-neutral-600">{data?.user}</h3>
@@ -48,7 +54,16 @@ const NewPostComment = ({ setNewPost, data, postId }: Props) => {
             alt="avatar.png"
           />
           <div className="w-full">
-            <PostCommentInput adminID={data.adminId} postID={postId} type={data.type} />
+            <PostCommentInput
+              adminID={data.adminId}
+              postID={postId}
+              commenterProfileId={userProfileData._id || ''}
+              commentId={data.commentId}
+              type={data.type}
+              isReply={isReply}
+              level={data.level ?? ''}
+              isNested={isNested}
+            />
           </div>
         </div>
       </div>

diff --git a/src/components/molecules/PostCard/index.tsx b/src/components/molecules/PostCard/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useState } from 'react'
+import React from 'react'
 import avatar from '@assets/avatar.svg'
 import Image from 'next/image'
 import PostCartOption from '@/components/atoms/PostCardOption/PostCartOption'
@@ -11,6 +11,7 @@ import PostCommentBox from '../PostCommentBox'
 import { useUniStore } from '@/store/store'
 import { useLikeUnilikeGroupPost } from '@/services/community-university'
 import { useLikeUnlikeTimelinePost } from '@/services/community-timeline'
+import { FaUser, FaUsers } from 'react-icons/fa'
 import { PostType } from '@/types/constants'
 import {
   FacebookIcon,
@@ -85,7 +86,8 @@ interface PostProps {
   link?: string
   date: string
   avatarLink: string
-  comments: any
+
+  commentCount: number
   likes: Like[]
   postID: string
   type: PostType.Community | PostType.Timeline
@@ -100,6 +102,8 @@ interface PostProps {
     }>
   >
   idx: number
+  showCommentSection: string
+  setShowCommentSection: (value: string) => void
 }
 
 const PostCard = ({
@@ -111,16 +115,18 @@ const PostCard = ({
   link,
   date,
   avatarLink,
-  comments,
   likes,
   type,
   postID,
   images,
   setImageCarasol,
   idx,
+  commentCount,
+  showCommentSection,
+  setShowCommentSection,
 }: PostProps) => {
   const { userData } = useUniStore()
-  const [showCommentSection, setShowCommentSection] = useState(false)
+
   const { mutate: LikeUnlikeGroupPost } = useLikeUnilikeGroupPost()
   const { mutate: LikeUnlikeTimelinePost } = useLikeUnlikeTimelinePost()
 
@@ -181,13 +187,32 @@ const PostCard = ({
         <div className="flex items-center gap-10">
           <span onClick={() => LikeUnlikeHandler(postID)} className="flex items-center">
             <FiThumbsUp className="mr-1 text-neutral-600" color={likes?.some((like: any) => like.userId == userData?.id) ? '#6647FF' : ''} />{' '}
-            {likes.length}
+            {likes?.length}
           </span>
-          <span onClick={() => setShowCommentSection(!showCommentSection)} className="flex items-center">
-            <FiMessageCircle className="mr-1 text-neutral-600" /> {comments.length}
+          <span onClick={() => setShowCommentSection(showCommentSection == postID ? ' ' : postID)} className="flex items-center">
+            <FiMessageCircle className="mr-1 text-neutral-600" /> {commentCount}
           </span>
           <span className="flex items-center">
-            <FiRepeat className="mr-1 text-neutral-600" /> 2
+            <Popover>
+              <PopoverTrigger>
+                <div className="flex gap-1 items-center">
+                  <FiRepeat className="mr-1 text-neutral-600" />
+                  <span>2</span>
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="relative left-16 top-0 w-auto p-5 border-none shadow-lg bg-white shadow-gray-light">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-1">
+                    <FaUser />
+                    <p>Repost on Group</p>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <FaUsers />
+                    <p>Repost on Timeline</p>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
           </span>
 
           <Popover>
@@ -202,14 +227,7 @@ const PostCard = ({
           </Popover>
         </div>
       </div>
-      <PostCommentBox
-        showCommentSec={showCommentSection}
-        userComments={comments}
-        postID={postID}
-        type={type}
-        adminId={userData.id || ''}
-        data={PostData}
-      />
+      <PostCommentBox showCommentSec={showCommentSection} postID={postID} type={type} adminId={userData.id || ''} data={PostData} />
     </div>
   )
 }