add userprofile posts

BacPacNet · Aug 1, 2024 · f52e8ec · f52e8ec
1 parent 901d5f5
commit f52e8ec
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 24 deletions.
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
@@ -14,7 +14,7 @@ import { ModalContentType } from '@/types/global'
 import { PostInputType, PostType, singlePostEnum } from '@/types/constants'
 import Recommendations from '@/components/Timeline/Recommendations'
 import { useUniStore } from '@/store/store'
-import { useGetUserPosts } from '@/services/community-timeline'
+import { useGetTimelinePosts } from '@/services/community-timeline'
 import PostSkeleton from '@/components/Timeline/PostSkeleton'
 interface User {
   name: string
@@ -70,7 +70,7 @@ const Timeline = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const { userData, userProfileData } = useUniStore()
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
-  const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
+  const { isLoading, data: TimelinePosts, error } = useGetTimelinePosts()
   const timelinePosts = TimelinePosts?.timelinePosts
 
   const modalContent = (modalContentType: string) => {

diff --git a/src/components/communityProfile/CommunityProfileContainer.tsx b/src/components/communityProfile/CommunityProfileContainer.tsx
@@ -9,7 +9,9 @@ import Modal from '../Timeline/Modal'
 import ConnectionsModal from '../Timeline/Modals/ConnectionsModal'
 import PollModal from '../Timeline/Modals/PollModal'
 import ReplyModal from '../Timeline/Modals/ReplyModal'
-import { PostType } from '@/types/constants'
+import { PostType, singlePostEnum } from '@/types/constants'
+import { useGetUserPosts } from '@/services/community-timeline'
+import PostSkeleton from '../Timeline/PostSkeleton'
 
 const comments = [
   {
@@ -34,6 +36,8 @@ const CommunityProfileContainer = () => {
   const [selectedOption, setSelectedOption] = useState('Posts')
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const { isLoading, data: UserPosts, error } = useGetUserPosts()
+  const userPosts = UserPosts?.userPosts
 
   const modalContent = (modalContentType: string) => {
     switch (modalContentType) {
@@ -48,6 +52,40 @@ const CommunityProfileContainer = () => {
     }
   }
 
+  const PostsContainer = () => {
+    if (isLoading) {
+      return <PostSkeleton />
+    }
+    if (error) {
+      console.log(error)
+      return <div>Something Went Wrong!</div>
+    }
+    return userPosts?.map((post: any) => {
+      return (
+        <Post
+          key={post._id}
+          user={post?.user_id?.firstName + ' ' + post?.user_id?.lastName}
+          adminId="null"
+          university={post.user_id?.university_name}
+          year={post?.user_id?.study_year + ' Yr. ' + ' ' + post?.user_id?.degree}
+          text={post.content}
+          date={post.createdAt}
+          avatar={post?.user_id?.profile_dp?.imageUrl}
+          likes={post.likeCount}
+          comments={post.comments.length}
+          reposts={2}
+          shares={1}
+          userComments={post.comments}
+          setModalContentType={setModalContentType}
+          setIsModalOpen={setIsModalOpen}
+          postID={post._id}
+          type={PostType.Timeline}
+          isType={'communityId' in post ? singlePostEnum.CommunityPost : singlePostEnum.userPost}
+        />
+      )
+    })
+  }
+
   return (
     <>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -57,26 +95,7 @@ const CommunityProfileContainer = () => {
       <div className="w-1/2 max-md:w-9/12 max-sm:w-11/12 border-2 rounded-lg border-[#737373] max-h-max lg:max-w-[696px]">
         <CommunityProfileOption selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
         {selectedOption == valueType.Posts ? (
-          <Post
-            isType={'userPost'}
-            postID={'123'}
-            user="Kathryn Murphy"
-            adminId="123"
-            university="Nagoya University"
-            year="2nd Yr. Graduate"
-            text="Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM."
-            date="9:31 PM · Feb 11, 2024"
-            avatar="/timeline/avatar.png"
-            likes={[]}
-            comments={3}
-            reposts={2}
-            shares={1}
-            userComments={comments}
-            setModalContentType={setModalContentType}
-            setIsModalOpen={setIsModalOpen}
-            isUserProfile={true}
-            type={PostType.Community}
-          />
+          <PostsContainer />
         ) : selectedOption == valueType.Media ? (
           <Post
             isType={'userPost'}

diff --git a/src/services/community-timeline.ts b/src/services/community-timeline.ts
@@ -24,6 +24,11 @@ export async function getAllUserPosts(token: string) {
   return response
 }
 
+export async function getAllTimelinePosts(token: string) {
+  const response: any = await client('/userpost/timeline', { headers: { Authorization: `Bearer ${token}` } })
+  return response
+}
+
 export async function CreateUserPost(data: UserPostData, token: string) {
   const response = await client(`/userpost/`, { method: 'POST', headers: { Authorization: `Bearer ${token}` }, data })
   return response
@@ -52,9 +57,11 @@ export const useCreateUserPostComment = (isSinglePost: boolean) => {
 
     onSuccess: () => {
       if (isSinglePost) {
-        queryClient.invalidateQueries({ queryKey: ['getPost'] })
+        queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+        queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
       } else {
         queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+        queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
       }
     },
     onError: (res: any) => {
@@ -71,6 +78,7 @@ export const useLikeUnlikeUserPostComment = () => {
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+      queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
     },
     onError: (res: any) => {
       console.log(res.response.data.message, 'res')
@@ -85,6 +93,7 @@ export const useDeleteUserPost = () => {
     mutationFn: (postId: string) => DeleteUserPost(postId, cookieValue),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+      queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
     },
     onError: (res: AxiosErrorType) => {
       console.log(res.response?.data.message, 'res')
@@ -100,6 +109,7 @@ export const useUpdateUserPost = () => {
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+      queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
     },
     onError: (res: AxiosErrorType) => {
       console.log(res.response?.data.message, 'res')
@@ -131,13 +141,30 @@ export const useCreateUserPost = () => {
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+      queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
     },
     onError: (res: AxiosErrorType) => {
       console.log(res.response?.data.message, 'res')
     },
   })
 }
 
+export function useGetTimelinePosts() {
+  const [cookieValue] = useCookie('uni_user_token')
+
+  const { isLoading, data, error } = useQuery({
+    queryKey: ['timelinePosts'],
+    queryFn: () => getAllTimelinePosts(cookieValue),
+  })
+
+  let errorMessage = null
+  if (axios.isAxiosError(error) && error.response) {
+    errorMessage = error.response.data
+  }
+
+  return { isLoading, data, error: errorMessage }
+}
+
 export const useLikeUnlikeTimelinePost = () => {
   const [cookieValue] = useCookie('uni_user_token')
   const queryClient = useQueryClient()
@@ -146,6 +173,7 @@ export const useLikeUnlikeTimelinePost = () => {
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
+      queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
     },
     onError: (res: AxiosErrorType) => {
       console.log(res)