removed query destructuring and following/follower slice, moved sec-N…

…avbar to layout

src/app/[id]/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 import Footer from '@/components/Footer/Footer'
-import Navbar from '@/components/Timeline/Navbar'
 import Modal from '@/components/Timeline/Modal'
 import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
 import ProfileCard from '@/components/Timeline/ProfileCard'
@@ -30,7 +29,6 @@ const Profile = () => {
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         {modalContentType && modalContent(modalContentType)}
       </Modal>
-      <Navbar />
       <div className="flex justify-center w-full gap-6 mt-20 max-md:flex-col max-md:items-center pb-10  ">
         <ProfileCard
           userProfileData={userProfileData}

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

@@ -1,6 +1,5 @@
 import FindPeople from '@/components/Connections/FindPeople'
 import Footer from '@/components/Footer/Footer'
-import Navbar from '@/components/Timeline/Navbar'
 import Recommendations from '@/components/Timeline/Recommendations'
 import React from 'react'
 
@@ -46,7 +45,6 @@ const recommendations = [
 const Connections = () => {
   return (
     <div>
-      <Navbar />
       <div className="flex flex-col lg:flex-row my-12 gap-8 justify-center mx-4 md:mx-20 lg:mx-0">
         <FindPeople contentDivStyle="max-h-[500px]" />
         <Recommendations

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

@@ -12,11 +12,10 @@ 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, PostType } from '@/types/constants'
+import { PostInputType, PostType, singlePostEnum } from '@/types/constants'
 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 = {
@@ -113,7 +112,7 @@ const Page = () => {
     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'}
+          isType={'communityId' in item ? singlePostEnum.CommunityPost : singlePostEnum.userPost}
           user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
           adminId={item.user_id?._id}
           university={item?.user_id?.university_name}
@@ -143,7 +142,6 @@ const Page = () => {
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         {modalContentType && modalContent(modalContentType)}
       </Modal>
-      <Navbar />
       <div className="flex flex-col items-center w-full gap-6 mt-10  pb-10">
         <HeroSec data={data} isJoined={isJoined} setIsJoined={setIsJoined} />
         <div className="flex justify-center w-11/12 max-sm:w-full max-md:w-11/12  max-xl:w-full max-md:flex-col px-16 max-sm:px-4">

src/app/community/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 import React from 'react'
-import Navbar from '@/components/Timeline/Navbar'
 import Footer from '@/components/Footer/Footer'
 import UniversityCard from '@/components/universityCommunity/universityCommunityCart'
 import { useGetUserSubscribedCommunityGroups } from '@/services/university-community'
@@ -21,7 +20,6 @@ const Page = () => {
 
   return (
     <>
-      <Navbar />
       <div className="flex flex-col min-h-[62vh] items-center ">
         <h3 className="py-10 text-xl font-bold text-neutral-700">Joined Communities</h3>
         {SubscribedData?.community?.length ? (

src/app/layout.tsx

@@ -6,6 +6,7 @@ import Navbar from '../components/Navbar/Navbar'
 import { ReactQueryClientProvider } from '@/utils/Provider'
 import ZustandSocketProvider from '@/utils/ZustandSocketProvider'
 
+import SecNavbar from '@/components/Timeline/Navbar'
 type FontClassName = string
 
 const inter = Inter({ subsets: ['latin'] }) as { className: FontClassName }
@@ -38,6 +39,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ReactQueryClientProvider>
           <ZustandSocketProvider>
             <Navbar />
+            <SecNavbar />
             {children}
           </ZustandSocketProvider>
         </ReactQueryClientProvider>

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

@@ -8,7 +8,7 @@ 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'
@@ -19,7 +19,7 @@ const UserPost = () => {
   const Type = searchParams.get('isType')
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
-  const { data, isFetching } = useGetPost(id, Type)
+  const { data, isFetching, isPending } = useGetPost(id, Type)
   const item = data?.post
   const [cookieValue] = useCookie('uni_user_token')
   const { userProfileData } = useUniStore()
@@ -35,12 +35,13 @@ const UserPost = () => {
   }
 
   const PostHolder = () => {
-    if (!cookieValue) {
+    if (!cookieValue && !isPending) {
       return <div className="text-center">Login to view Post.</div>
     }
-    if (isFetching) {
+    if (isFetching || isPending) {
       return <PostSkeleton />
     }
+
     return (
       <Post
         isType={String(Type)}
@@ -73,7 +74,6 @@ const UserPost = () => {
       <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 />

src/app/timeline/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 import React, { useState } from 'react'
-import Navbar from '@/components/Timeline/Navbar'
 import ProfileCard from '@/components/Timeline/ProfileCard'
 import PostInput from '@/components/Timeline/PostInput'
 import Dropdown from '@/components/Timeline/DropDown'
@@ -12,7 +11,7 @@ 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, PostType } from '@/types/constants'
+import { PostInputType, PostType, singlePostEnum } from '@/types/constants'
 import Recommendations from '@/components/Timeline/Recommendations'
 import { useUniStore } from '@/store/store'
 import { useGetUserPosts } from '@/services/community-timeline'
@@ -117,7 +116,7 @@ const Timeline = () => {
           setIsModalOpen={setIsModalOpen}
           postID={post._id}
           type={PostType.Timeline}
-          isType={'communityId' in post ? 'CommunityPost' : 'userPost'}
+          isType={'communityId' in post ? singlePostEnum.CommunityPost : singlePostEnum.userPost}
         />
       )
     })
@@ -128,7 +127,6 @@ const Timeline = () => {
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         {modalContentType && modalContent(modalContentType)}
       </Modal>
-      <Navbar />
       <div className="flex justify-center items-center lg:items-start gap-7 mt-16 flex-col lg:flex-row xs:px-4 sm:px-0">
         <div className="flex flex-col gap-6">
           <ProfileCard

src/components/Navbar/Navbar.tsx

@@ -43,7 +43,7 @@ const Navbar: React.FC = () => {
   const [hover, setHover] = useState<boolean>(false)
   const [activeItem, setActiveItem] = useState('')
   const [, , deleteCookie] = useCookie('uni_user_token')
-  const { userProfileData, userData, resetUserData, resetUserProfileData, resetUserFollowingData } = useUniStore()
+  const { userProfileData, userData, resetUserData, resetUserProfileData } = useUniStore()
   const router = useRouter()
 
   const { data: notificationData } = useGetNotification()
@@ -62,7 +62,6 @@ const Navbar: React.FC = () => {
     deleteCookie()
     resetUserData()
     resetUserProfileData()
-    resetUserFollowingData()
     setIsLogin(false)
     router.push('/login')
   }

src/components/Timeline/Navbar.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { CommunityNavbarLinks } from '@/types/constants'
 import { useRouter, usePathname } from 'next/navigation'
 import { useUniStore } from '@/store/store'
+import useCookie from '@/hooks/useCookie'
 
 const Navbar: React.FC = () => {
   // const tabs = ['Timeline', 'Profile', 'Notifications', 'Messages', 'Connections', 'University Community', 'Chatbot']
@@ -11,7 +12,11 @@ const Navbar: React.FC = () => {
   const id = userData?.id
   const path = usePathname()
   const activeTab = path.split('/').pop()
+  const [cookieValue] = useCookie('uni_user_token')
 
+  if (!cookieValue) {
+    return
+  }
   return (
     <nav className="bg-primary text-white items-center justify-between px-4 py-2 hidden lg:flex">
       <div className="flex items-center">

src/hooks/useCookie.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useEffect } from 'react'
 
 const useCookie = (cookieName: string): [string, (value: string, expirationDate: string) => void, () => void] => {

src/services/auth.ts

@@ -17,7 +17,6 @@ const register = async (data: Omit<RegisterForm, 'confirmPassword' | 'tnc'>): Pr
 export const useHandleLogin = () => {
   const setUserData = useUniStore((state) => state.setUserData)
   const setUserProfileData = useUniStore((state) => state.setUserProfileData)
-  const setUserFollowingData = useUniStore((state) => state.setUserFollowingData)
 
   const [, setCookieValue] = useCookie('uni_user_token')
   const [, setRefreshCookieValue] = useCookie('uni_user_refresh_token')
@@ -27,7 +26,6 @@ export const useHandleLogin = () => {
     onSuccess: (response: any) => {
       setUserData(response.user)
       setUserProfileData(response.userProfile)
-      setUserFollowingData(response.Following)
       // setToken(response.tokens)
       setCookieValue(response.tokens.access.token, response.tokens.access.expires)
       setRefreshCookieValue(response.tokens.refresh.token, response.tokens.refresh.expires)

src/services/community-university.ts

@@ -96,17 +96,17 @@ export async function LikeUnilikeGroupPostCommnet(communityGroupPostCommentId: s
 }
 
 export function useGetCommunity(communityId: string) {
-  const { isLoading, data, error } = useQuery({
+  const state = useQuery({
     queryKey: ['community', communityId],
     queryFn: () => getCommunity(communityId),
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
 
-  return { isLoading, data, error: errorMessage }
+  return { ...state, error: errorMessage }
 }
 
 export const useUpdateCommunity = () => {
@@ -157,18 +157,18 @@ export const useLeaveCommunity = () => {
 
 export function useGetCommunityGroups(communityId: string, isJoined: boolean) {
   const [cookieValue] = useCookie('uni_user_token')
-  const { isLoading, data, error } = useQuery({
+  const state = useQuery({
     enabled: isJoined,
     queryKey: ['communityGroups', communityId],
     queryFn: () => getAllCommunityGroups(communityId, cookieValue),
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
 
-  return { isLoading, data, error: errorMessage }
+  return { ...state, error: errorMessage }
 }
 
 export const useJoinCommunityGroup = () => {
@@ -228,18 +228,18 @@ export const useUpdateCommunityGroup = () => {
 export function useGetCommunityGroupPost(communityId: string, isJoined: boolean) {
   const [cookieValue] = useCookie('uni_user_token')
 
-  const { isFetching, data, error, isError } = useQuery({
+  const state = useQuery({
     queryKey: ['communityGroupsPost', communityId],
     queryFn: () => getAllCommunityGroupPost(communityId, cookieValue),
     enabled: isJoined,
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
 
-  return { isFetching, data, isError, error: errorMessage }
+  return { ...state, error: errorMessage }
 }
 
 export const useLikeUnilikeGroupPost = () => {
@@ -310,34 +310,34 @@ export const useLikeUnlikeGroupPostComment = () => {
 
 export function useGetCommunityUsers(communityId: string, isopen: boolean, privacy: string, name: string) {
   const [cookieValue] = useCookie('uni_user_token')
-  const { isLoading, data, error } = useQuery({
+  const state = useQuery({
     enabled: isopen,
     queryKey: ['communityUsers', communityId, privacy, name],
     queryFn: () => getCommunityUsers(communityId, privacy, name, cookieValue),
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
 
-  return { isLoading, data, error: errorMessage }
+  return { ...state, error: errorMessage }
 }
 
 export function useGetCommunityGroupUsers(communityGroupId: string, isopen: boolean, name: string) {
   const [cookieValue] = useCookie('uni_user_token')
-  const { isLoading, data, error } = useQuery({
+  const state = useQuery({
     enabled: isopen,
     queryKey: ['communityGroupUsers', communityGroupId, name],
     queryFn: () => getCommunityGroupUsers(communityGroupId, name, cookieValue),
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
 
-  return { isLoading, data, error: errorMessage }
+  return { ...state, error: errorMessage }
 }
 
 export const useUserGroupRole = () => {
@@ -360,16 +360,16 @@ export const useUserGroupRole = () => {
 export function useGetPost(postId: string, isType: string | null) {
   const [cookieValue] = useCookie('uni_user_token')
 
-  const { isFetching, data, error } = useQuery({
+  const state = useQuery({
     queryKey: ['getPost', postId],
     queryFn: () => getPost(postId, isType, cookieValue),
-    enabled: !!postId && !!cookieValue,
+    enabled: !!postId,
+    retry: 1,
   })
 
   let errorMessage = null
-  if (axios.isAxiosError(error) && error.response) {
-    errorMessage = error.response.data
+  if (axios.isAxiosError(state.error) && state.error.response) {
+    errorMessage = state.error.response.data
   }
-
-  return { isFetching, data, error: errorMessage }
+  return { ...state, error: errorMessage }
 }