From 11f4ef4a79854335ea062829e31319763037b6c3 Mon Sep 17 00:00:00 2001
From: Ayush Tiwari <ayushtiwari110@yahoo.com>
Date: Sun, 14 Jul 2024 01:18:41 +0530
Subject: [PATCH 1/2] add userPost Queries, skeleton

---
 src/app/community/[id]/page.tsx          |   1 +
 src/app/timeline/page.tsx                |  46 ++++++----
 src/components/Timeline/PostInput.tsx    |  32 +++++--
 src/components/Timeline/PostSkeleton.tsx |  21 +++++
 src/services/community-timeline.ts       | 110 +++++++++++++++++++++++
 5 files changed, 184 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Timeline/PostSkeleton.tsx
 create mode 100644 src/services/community-timeline.ts

diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
index 5cc0a220..4565eb81 100644
--- a/src/app/community/[id]/page.tsx
+++ b/src/app/community/[id]/page.tsx
@@ -89,6 +89,7 @@ const Page = () => {
                         idToPost={currSelectedGroup._id}
                         setModalContentType={setModalContentType}
                         setIsModalOpen={setIsModalOpen}
+                        type="Community"
                       />
                     )}
                   </div>
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
index f2e34d6c..7fcbd94d 100644
--- a/src/app/timeline/page.tsx
+++ b/src/app/timeline/page.tsx
@@ -15,6 +15,8 @@ import { ModalContentType } from '@/types/global'
 import Recommendations from '@/components/Timeline/Recommendations'
 import { useUniStore } from '@/store/store'
 import { useParams } from 'next/navigation'
+import { useGetUserPosts } from '@/services/community-timeline'
+import PostSkeleton from '@/components/Timeline/PostSkeleton'
 interface User {
   name: string
   bio: string
@@ -79,7 +81,11 @@ const Timeline = () => {
   const params = useParams()
   const { userData, userProfileData, userFollowingData } = useUniStore()
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
+  const timelinePosts = TimelinePosts?.timelinePosts
+  console.log(timelinePosts)
 
+  console.log(isLoading, TimelinePosts, error)
   console.log(params)
 
   const modalContent = (modalContentType: string) => {
@@ -117,24 +123,30 @@ const Timeline = () => {
           <Recommendations people={recommendations} />
         </div>
         <div className="flex flex-col justify-center items-stretch gap-5 max-w-[696px]">
-          <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+          <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} type="Timeline" />
           <Dropdown options={options} defaultOption="Recent" />
-          <Post
-            user="Joshua Welman"
-            university="Nagoya University"
-            year="2nd Yr. Graduate"
-            text="Can someone help me with this chemistry equation? Here’s the link to the google drive:"
-            link="https://www.butkochem.com/homework/A1-35"
-            date="9:31 PM · Feb 11, 2024"
-            avatar="/timeline/avatar.png"
-            likes={[{ userId: '663a034cb65c15b36f959894' }, { userId: '663a034cb65c15b36f959894' }]}
-            comments={3}
-            reposts={2}
-            shares={1}
-            userComments={comments}
-            setModalContentType={setModalContentType}
-            setIsModalOpen={setIsModalOpen}
-          />
+          {isLoading && Array.from({ length: 2 }).map((_, index) => <PostSkeleton key={index} />)}
+          {!isLoading &&
+            timelinePosts?.map((post: any) => {
+              return (
+                <Post
+                  key={post._id}
+                  user="Joshua Welman"
+                  university={post.userId}
+                  year="2nd Yr. Graduate"
+                  text={post.content}
+                  date={post.createdAt}
+                  avatar="/timeline/avatar.png"
+                  likes={post.likeCount}
+                  comments={0}
+                  reposts={2}
+                  shares={1}
+                  userComments={comments}
+                  setModalContentType={setModalContentType}
+                  setIsModalOpen={setIsModalOpen}
+                />
+              )
+            })}
         </div>
       </div>
       <Footer />
diff --git a/src/components/Timeline/PostInput.tsx b/src/components/Timeline/PostInput.tsx
index cacb6b70..4ad82c3b 100644
--- a/src/components/Timeline/PostInput.tsx
+++ b/src/components/Timeline/PostInput.tsx
@@ -11,18 +11,20 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover
 import EmojiPicker from 'emoji-picker-react'
 import { useCreateGroupPost } from '@/services/community-university'
 import { replaceImage } from '@/services/uploadImage'
+import { useCreateUserPost } from '@/services/community-timeline'
 interface PostInputProps {
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   idToPost?: string
   profileDp?: string
+  type: string
 }
 
-const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentType, idToPost, profileDp }) => {
+const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentType, idToPost, profileDp, type }) => {
   const [inputValue, setInputValue] = useState('')
   const [ImageValue, setImageValue] = useState<File[] | []>([])
   const { mutate: CreateGroupPost } = useCreateGroupPost()
-
+  const { mutate: CreateTimelinePost } = useCreateUserPost()
   const handleEmojiClick = (emojiData: any) => {
     setInputValue((prevValue) => prevValue + emojiData.emoji)
   }
@@ -43,19 +45,31 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy
 
     if (ImageValue) {
       const imagedata = await processImages(ImageValue)
-      const data = {
-        communityId: idToPost,
+      const data: any = {
+        // communityId: idToPost,
         content: inputValue,
         imageUrl: imagedata,
       }
-
-      CreateGroupPost(data)
+      //if type is community , add communityId field to data
+      if (type === 'Community') {
+        data.communityId = idToPost
+        CreateGroupPost(data)
+      } else if (type === 'Timeline') {
+        CreateTimelinePost(data)
+      }
+      // CreateGroupPost(data)
     } else {
-      const data = {
-        communityId: idToPost,
+      const data: any = {
+        // communityId: idToPost,
         content: inputValue,
       }
-      CreateGroupPost(data)
+      if (type === 'Community') {
+        data.communityId = idToPost
+        CreateGroupPost(data)
+      } else if (type === 'Timeline') {
+        CreateTimelinePost(data)
+      }
+      // CreateGroupPost(data)
     }
   }
 
diff --git a/src/components/Timeline/PostSkeleton.tsx b/src/components/Timeline/PostSkeleton.tsx
new file mode 100644
index 00000000..f0a1a5c1
--- /dev/null
+++ b/src/components/Timeline/PostSkeleton.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Skeleton } from '../ui/Skeleton'
+const PostSkeleton = () => {
+  return (
+    <div className="border rounded-lg border-border pb-10 bg-slate-50">
+      <div className="my-10 ml-10 flex gap-4 items-center">
+        <Skeleton className=" bg-slate-400 p-2 h-14 w-14 rounded-full" />
+        <div>
+          <Skeleton className="bg-slate-300 h-4 w-24" />
+          <Skeleton className="mt-1 bg-slate-300 h-3 w-20" />
+          <Skeleton className="mt-1 bg-slate-300 h-3 w-16" />
+        </div>
+      </div>
+      <Skeleton className="mx-10 h-3 bg-slate-300" />
+      <Skeleton className="mx-10 my-1 h-3 bg-slate-300" />
+      <Skeleton className="mx-10 h-3 bg-slate-300" />
+    </div>
+  )
+}
+
+export default PostSkeleton
diff --git a/src/services/community-timeline.ts b/src/services/community-timeline.ts
new file mode 100644
index 00000000..b0182b87
--- /dev/null
+++ b/src/services/community-timeline.ts
@@ -0,0 +1,110 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { client } from './api-Client'
+import axios from 'axios'
+import useCookie from '@/hooks/useCookie'
+
+export async function DeleteUserPost(postId: string, token: any) {
+  const response = await client(`/userpost/${postId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } })
+  return response
+}
+
+export async function UpdateUserPost(data: any, postId: string, token: any) {
+  const response = await client(`/userpost/${postId}`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` }, data })
+  return response
+}
+
+export async function LikeUnilikeUserPost(postId: string, token: any) {
+  const response = await client(`/userpost/likeunlike/${postId}`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` } })
+  return response
+}
+
+export async function getAllUserPosts(token: any) {
+  const response: any = await client('/userpost/', { headers: { Authorization: `Bearer ${token}` } })
+  return response
+}
+
+export async function CreateUserPost(data: any, token: any) {
+  const response = await client(`/userpost/`, { method: 'POST', headers: { Authorization: `Bearer ${token}` }, data })
+  return response
+}
+
+//Query Functions
+
+export const useDeletePost = () => {
+  const [cookieValue] = useCookie('uni_user_token')
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (postId: any) => DeleteUserPost(postId, cookieValue),
+    onSuccess: (response: any) => {
+      console.log(response, 'response')
+
+      queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+    },
+    onError: (res: any) => {
+      console.log(res.response.data.message, 'res')
+    },
+  })
+}
+
+export const useUpdateUserPost = () => {
+  const [cookieValue] = useCookie('uni_user_token')
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ postData, postId }: { postData: any; postId: any }) => UpdateUserPost(postData, postId, cookieValue),
+
+    onSuccess: (response: any) => {
+      console.log(response, 'response')
+
+      queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+    },
+    onError: (res: any) => {
+      console.log(res.response.data.message, 'res')
+    },
+  })
+}
+
+export function useGetUserPosts() {
+  const [cookieValue] = useCookie('uni_user_token')
+
+  const { isLoading, data, error } = useQuery({
+    queryKey: ['userPosts'],
+    queryFn: () => getAllUserPosts(cookieValue),
+  })
+
+  let errorMessage = null
+  if (axios.isAxiosError(error) && error.response) {
+    errorMessage = error.response.data
+  }
+
+  return { isLoading, data, error: errorMessage }
+}
+
+export const useCreateUserPost = () => {
+  const [cookieValue] = useCookie('uni_user_token')
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: any) => CreateUserPost(data, cookieValue),
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+    },
+    onError: (res: any) => {
+      console.log(res.response.data.message, 'res')
+    },
+  })
+}
+
+export const useLikeUnilikeGroupPost = () => {
+  const [cookieValue] = useCookie('uni_user_token')
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (postId: any) => LikeUnilikeUserPost(postId, cookieValue),
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+    },
+    onError: (res: any) => {
+      console.log(res.response.data.message, 'res')
+    },
+  })
+}

From d37ddf90d3d70200f5bbdda4fb9665a4f9bf792a Mon Sep 17 00:00:00 2001
From: Ayush Tiwari <ayushtiwari110@yahoo.com>
Date: Tue, 16 Jul 2024 13:57:11 +0530
Subject: [PATCH 2/2] refactor

---
 src/app/community/[id]/page.tsx       |  3 +-
 src/app/timeline/page.tsx             | 62 ++++++++++++++-------------
 src/components/Timeline/PostInput.tsx | 12 +++---
 src/types/constants.ts                |  5 +++
 4 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
index 4565eb81..932b1ff2 100644
--- a/src/app/community/[id]/page.tsx
+++ b/src/app/community/[id]/page.tsx
@@ -12,6 +12,7 @@ import HeroSec from '@/components/communityUniversity/HeroSec'
 import { useGetCommunity, useGetCommunityGroupPost, useGetCommunityGroups } from '@/services/community-university'
 import { useUniStore } from '@/store/store'
 import { ModalContentType } from '@/types/global'
+import { PostInputType } from '@/types/constants'
 import { useParams } from 'next/navigation'
 import React, { useState } from 'react'
 import { IoIosArrowDown } from 'react-icons/io'
@@ -89,7 +90,7 @@ const Page = () => {
                         idToPost={currSelectedGroup._id}
                         setModalContentType={setModalContentType}
                         setIsModalOpen={setIsModalOpen}
-                        type="Community"
+                        type={PostInputType.Community}
                       />
                     )}
                   </div>
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
index 7fcbd94d..c609a97b 100644
--- a/src/app/timeline/page.tsx
+++ b/src/app/timeline/page.tsx
@@ -12,9 +12,9 @@ import PollModal from '@/components/Timeline/Modals/PollModal'
 import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
 import ReplyModal from '@/components/Timeline/Modals/ReplyModal'
 import { ModalContentType } from '@/types/global'
+import { PostInputType } from '@/types/constants'
 import Recommendations from '@/components/Timeline/Recommendations'
 import { useUniStore } from '@/store/store'
-import { useParams } from 'next/navigation'
 import { useGetUserPosts } from '@/services/community-timeline'
 import PostSkeleton from '@/components/Timeline/PostSkeleton'
 interface User {
@@ -78,15 +78,10 @@ const recommendations = [
 
 const Timeline = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const params = useParams()
   const { userData, userProfileData, userFollowingData } = useUniStore()
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
   const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
   const timelinePosts = TimelinePosts?.timelinePosts
-  console.log(timelinePosts)
-
-  console.log(isLoading, TimelinePosts, error)
-  console.log(params)
 
   const modalContent = (modalContentType: string) => {
     switch (modalContentType) {
@@ -103,6 +98,36 @@ const Timeline = () => {
     }
   }
 
+  const PostsContainer = () => {
+    if (isLoading) {
+      return Array.from({ length: 2 }).map((_, index) => <PostSkeleton key={index} />)
+    }
+    if (error) {
+      console.log(error)
+      return <div>Something Went Wrong!</div>
+    }
+    return timelinePosts?.map((post: any) => {
+      return (
+        <Post
+          key={post._id}
+          user="Joshua Welman"
+          university={post.userId}
+          year="2nd Yr. Graduate"
+          text={post.content}
+          date={post.createdAt}
+          avatar="/timeline/avatar.png"
+          likes={post.likeCount}
+          comments={0}
+          reposts={2}
+          shares={1}
+          userComments={comments}
+          setModalContentType={setModalContentType}
+          setIsModalOpen={setIsModalOpen}
+        />
+      )
+    })
+  }
+
   return (
     <main>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -123,30 +148,9 @@ const Timeline = () => {
           <Recommendations people={recommendations} />
         </div>
         <div className="flex flex-col justify-center items-stretch gap-5 max-w-[696px]">
-          <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} type="Timeline" />
+          <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} type={PostInputType.Timeline} />
           <Dropdown options={options} defaultOption="Recent" />
-          {isLoading && Array.from({ length: 2 }).map((_, index) => <PostSkeleton key={index} />)}
-          {!isLoading &&
-            timelinePosts?.map((post: any) => {
-              return (
-                <Post
-                  key={post._id}
-                  user="Joshua Welman"
-                  university={post.userId}
-                  year="2nd Yr. Graduate"
-                  text={post.content}
-                  date={post.createdAt}
-                  avatar="/timeline/avatar.png"
-                  likes={post.likeCount}
-                  comments={0}
-                  reposts={2}
-                  shares={1}
-                  userComments={comments}
-                  setModalContentType={setModalContentType}
-                  setIsModalOpen={setIsModalOpen}
-                />
-              )
-            })}
+          <PostsContainer />
         </div>
       </div>
       <Footer />
diff --git a/src/components/Timeline/PostInput.tsx b/src/components/Timeline/PostInput.tsx
index 4ad82c3b..a3ff476a 100644
--- a/src/components/Timeline/PostInput.tsx
+++ b/src/components/Timeline/PostInput.tsx
@@ -12,6 +12,7 @@ import EmojiPicker from 'emoji-picker-react'
 import { useCreateGroupPost } from '@/services/community-university'
 import { replaceImage } from '@/services/uploadImage'
 import { useCreateUserPost } from '@/services/community-timeline'
+import { PostInputType } from '@/types/constants'
 interface PostInputProps {
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
@@ -46,30 +47,27 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy
     if (ImageValue) {
       const imagedata = await processImages(ImageValue)
       const data: any = {
-        // communityId: idToPost,
         content: inputValue,
         imageUrl: imagedata,
       }
       //if type is community , add communityId field to data
-      if (type === 'Community') {
+      if (type === PostInputType.Community) {
         data.communityId = idToPost
         CreateGroupPost(data)
-      } else if (type === 'Timeline') {
+      } else if (type === PostInputType.Timeline) {
         CreateTimelinePost(data)
       }
       // CreateGroupPost(data)
     } else {
       const data: any = {
-        // communityId: idToPost,
         content: inputValue,
       }
-      if (type === 'Community') {
+      if (type === PostInputType.Community) {
         data.communityId = idToPost
         CreateGroupPost(data)
-      } else if (type === 'Timeline') {
+      } else if (type === PostInputType.Timeline) {
         CreateTimelinePost(data)
       }
-      // CreateGroupPost(data)
     }
   }
 
diff --git a/src/types/constants.ts b/src/types/constants.ts
index 3ac42dc4..1edf2086 100644
--- a/src/types/constants.ts
+++ b/src/types/constants.ts
@@ -9,3 +9,8 @@ export const CommunityNavbarLinks: NavLink[] = [
   { label: 'University Community', href: '/community' },
   { label: 'Chatbot', href: '/chatbot' },
 ]
+
+export enum PostInputType {
+  Community = 'Community',
+  Timeline = 'Timeline',
+}