added single-post page,loaders and spinners for request

src/app/community/[id]/page.tsx

@@ -17,6 +17,7 @@ import { useParams } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 import { IoIosArrowDown } from 'react-icons/io'
 import Navbar from '@/components/Timeline/Navbar'
+import PostSkeleton from '@/components/Timeline/PostSkeleton'
 
 const roberta = {
   avatarUrl: '/timeline/avatar2.png',
@@ -25,6 +26,27 @@ const roberta = {
   comment: 'Sorry that was a strange thing to ask.',
   replyingTo: 'Johnny Nitro and Kathryn Murphy',
 }
+
+interface communityPostType {
+  _id: string
+  user_id: {
+    firstName: string
+    lastName: string
+    _id: string
+    university_name: string
+    study_year: string
+    degree: string
+    profile_dp: {
+      imageUrl: string
+    }
+  }
+  content: string
+  createdAt: string
+  likeCount: []
+  comments: []
+  imageUrl: []
+}
+
 const Page = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
@@ -37,7 +59,11 @@ const Page = () => {
   const { data: communityGroups } = useGetCommunityGroups(id, isJoined)
   const [currSelectedGroup, setCurrSelectedGroup] = useState(communityGroups?.groups[0])
   const [isJoinedInGroup, setIsJoinedInGroup] = useState(false)
-  const { data: communityGroupPost } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup)
+  const {
+    data: communityGroupPost,
+    isFetching: communityGroupPostLoading,
+    isError,
+  } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup)
 
   const modalContent = (modalContentType: string) => {
     switch (modalContentType) {
@@ -52,6 +78,10 @@ const Page = () => {
     }
   }
 
+  useEffect(() => {
+    setCurrSelectedGroup(communityGroups?.groups[0])
+  }, [communityGroups && !!currSelectedGroup])
+
   useEffect(() => {
     const findGroupRole = (communities: any) => {
       return communities?.some((community: any) => {
@@ -69,6 +99,45 @@ const Page = () => {
       findGroupRole(userData.userUnVerifiedCommunities)
     }
   }, [currSelectedGroup, userData])
+
+  const PostContainer = () => {
+    if (communityGroupPostLoading) {
+      return <PostSkeleton />
+    }
+    if (isError) {
+      return <div>Something went wrong!</div>
+    }
+    if (!communityGroupPost?.communityPosts.length) {
+      return <div className="text-center font-bold mt-10">No post Yet!</div>
+    }
+    return communityGroupPost?.communityPosts.map((item: communityPostType) => (
+      <div key={item._id} className="border-2 border-neutral-300 rounded-md w-[73%] max-xl:w-10/12 mt-6">
+        <Post
+          isType={'communityId' in item ? 'CommunityPost' : 'userPost'}
+          user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
+          adminId={item.user_id?._id}
+          university={item?.user_id?.university_name}
+          year={item?.user_id?.study_year + ' Yr. ' + ' ' + item?.user_id?.degree}
+          text={item.content}
+          date={item?.createdAt}
+          avatar={item?.user_id?.profile_dp?.imageUrl}
+          likes={item.likeCount}
+          comments={item.comments.length}
+          postID={item._id}
+          reposts={2}
+          shares={1}
+          userComments={item.comments}
+          setModalContentType={setModalContentType}
+          setIsModalOpen={setIsModalOpen}
+          isUniversity={true}
+          profileDp={userProfileData?.profile_dp?.imageUrl}
+          media={item?.imageUrl}
+          type={PostType.Community}
+        />
+      </div>
+    ))
+  }
+
   return (
     <>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -113,31 +182,7 @@ const Page = () => {
                       ''
                     )}
                   </div>
-                  {communityGroupPost?.communityPosts.map((item: any) => (
-                    <div key={item._id} className="border-2 border-neutral-300 rounded-md w-[73%] max-xl:w-10/12 mt-6">
-                      <Post
-                        user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
-                        adminId={item.user_id?._id}
-                        university={item?.user_id?.university_name}
-                        year={item?.user_id?.study_year + ' Yr. ' + ' ' + item?.user_id?.degree}
-                        text={item.content}
-                        date={item?.createdAt}
-                        avatar={item?.user_id?.profile_dp?.imageUrl}
-                        likes={item.likeCount}
-                        comments={item.comments.length}
-                        postID={item._id}
-                        reposts={2}
-                        shares={1}
-                        userComments={item.comments}
-                        setModalContentType={setModalContentType}
-                        setIsModalOpen={setIsModalOpen}
-                        isUniversity={true}
-                        profileDp={userProfileData?.profile_dp?.imageUrl}
-                        media={item?.imageUrl}
-                        type={PostType.Community}
-                      />
-                    </div>
-                  ))}
+                  <PostContainer />
                 </div>
               )}
             </div>

src/app/community/loading.tsx

@@ -1,4 +1,11 @@
 export default function Loading() {
-  // You can add any UI inside Loading, including a Skeleton.
-  return <div>dsdsdsdsdsd</div>
+  return (
+    <div className="h-screen flex items-center justify-center">
+      <div className="flex justify-center items-center">
+        <svg width={50} height={50} 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="#6647FF" strokeWidth="5" strokeLinecap="round" strokeDasharray="80, 200" />
+        </svg>
+      </div>
+    </div>
+  )
 }

src/app/community/page.tsx

@@ -6,10 +6,18 @@ import UniversityCard from '@/components/universityCommunity/universityCommunity
 import { useGetUserSubscribedCommunityGroups } from '@/services/university-community'
 import Loading from '../loading'
 
+interface CommunityType {
+  _id: string
+  communityLogoUrl: {
+    imageUrl: string
+  }
+  name: string
+  collegeID: string
+}
 const Page = () => {
-  const { data: SubscribedData, isLoading } = useGetUserSubscribedCommunityGroups()
+  const { data: SubscribedData, isFetching } = useGetUserSubscribedCommunityGroups()
 
-  if (isLoading) return <Loading />
+  if (isFetching) return <Loading />
 
   return (
     <>
@@ -18,7 +26,7 @@ const Page = () => {
         <h3 className="py-10 text-xl font-bold text-neutral-700">Joined Communities</h3>
         {SubscribedData?.community?.length ? (
           <div className="flex gap-10 flex-wrap justify-center">
-            {SubscribedData?.community?.map((item: any) => (
+            {SubscribedData?.community?.map((item: CommunityType) => (
               <UniversityCard
                 key={item?._id}
                 universityLogo={item?.communityLogoUrl?.imageUrl}

src/app/post/[id]/page.tsx

@@ -0,0 +1,85 @@
+'use client'
+import Post from '@/components/Timeline/Post'
+import { useGetPost } from '@/services/community-university'
+import { useParams, useSearchParams } from 'next/navigation'
+import Modal from '@/components/Timeline/Modal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
+import PollModal from '@/components/Timeline/Modals/PollModal'
+
+import React, { useState } from 'react'
+import { ModalContentType } from '@/types/global'
+import Navbar from '@/components/Timeline/Navbar'
+import { PostType } from '@/types/constants'
+import { useUniStore } from '@/store/store'
+import PostSkeleton from '@/components/Timeline/PostSkeleton'
+import useCookie from '@/hooks/useCookie'
+const UserPost = () => {
+  const { id } = useParams<{ id: string }>()
+  const searchParams = useSearchParams()
+  const Type = searchParams.get('isType')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const { data, isFetching } = useGetPost(id, Type)
+  const item = data?.post
+  const [cookieValue] = useCookie('uni_user_token')
+  const { userProfileData } = useUniStore()
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      case 'PollModal':
+        return <PollModal />
+      default:
+        return null
+    }
+  }
+
+  const PostHolder = () => {
+    if (!cookieValue) {
+      return <div className="text-center">Login to view Post.</div>
+    }
+    if (isFetching) {
+      return <PostSkeleton />
+    }
+    return (
+      <Post
+        isType={String(Type)}
+        isSinglePost={true}
+        user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
+        adminId={item?.user_id?._id}
+        university={item?.user_id?.university_name}
+        year={item?.user_id?.study_year + ' Yr. ' + ' ' + item?.user_id?.degree}
+        text={item?.content}
+        date={item?.createdAt}
+        avatar={item?.user_id?.profile_dp?.imageUrl}
+        likes={item?.likeCount}
+        comments={item?.comments.length}
+        postID={item?._id}
+        reposts={2}
+        shares={1}
+        userComments={item?.comments}
+        setModalContentType={setModalContentType}
+        setIsModalOpen={setIsModalOpen}
+        isUniversity={true}
+        profileDp={userProfileData?.profile_dp?.imageUrl}
+        media={item?.imageUrl}
+        type={String(Type) == 'userPost' ? PostType.Timeline : PostType.Community}
+      />
+    )
+  }
+
+  return (
+    <div>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      <Navbar />
+
+      <div className="border-2 border-neutral-300 rounded-md w-3/4 mx-auto  mt-6">
+        <PostHolder />
+      </div>
+    </div>
+  )
+}
+
+export default UserPost

src/app/timeline/page.tsx

@@ -117,6 +117,7 @@ const Timeline = () => {
           setIsModalOpen={setIsModalOpen}
           postID={post._id}
           type={PostType.Timeline}
+          isType={'communityId' in post ? 'CommunityPost' : 'userPost'}
         />
       )
     })