Merge pull request #81 from BacPacNet/data-reset-fix

fixed:secondary-Navbar data-reset in community-group

src/app/layout.tsx

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

src/components/Connections/FindPeople.tsx

@@ -137,13 +137,13 @@ const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => {
             <UserListItemSkeleton />
             <UserListItemSkeleton />
           </>
-        ) : content === 'Followers' && !userFollow?.profile?.length ? (
+        ) : content === 'Followers' && !userFollowers?.profile?.length ? (
           <p className="text-center p-4">You have 0 Followers</p>
         ) : (
           content === 'Followers' &&
           userFollowers?.profile?.map((item: FollowingItemProps, index: number) => (
             <UserListItem
-              key={index}
+              key={'Followers' + index}
               id={item?.users_id?.id}
               firstName={item?.users_id?.firstName}
               lastName={item?.users_id?.lastName}

src/components/Navbar/Navbar.tsx

@@ -45,7 +45,7 @@ const Navbar: React.FC = () => {
   const [, , deleteCookie] = useCookie('uni_user_token')
   const { userProfileData, userData, resetUserData, resetUserProfileData } = useUniStore()
   const router = useRouter()
-
+  const { refetch: refetchNotification } = useGetNotification()
   const { data: notificationData } = useGetNotification()
 
   const [isNotificationOpen, setIsNotificationOpen] = useState(false)
@@ -54,6 +54,12 @@ const Navbar: React.FC = () => {
     setIsLogin(!!userData?.id)
   }, [userData, userData?.id])
 
+  useEffect(() => {
+    if (isLogin) {
+      refetchNotification()
+    }
+  }, [isLogin])
+
   const handleClick = (item: string) => {
     setActiveItem(item)
   }

src/components/Timeline/Navbar.tsx

@@ -1,20 +1,24 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useState } 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 SecondaryNavbar: React.FC = () => {
   // const tabs = ['Timeline', 'Profile', 'Notifications', 'Messages', 'Connections', 'University Community', 'Chatbot']
   const router = useRouter()
   const { userData } = useUniStore()
   const id = userData?.id
   const path = usePathname()
   const activeTab = path.split('/').pop()
-  const [cookieValue] = useCookie('uni_user_token')
 
-  if (!cookieValue) {
+  const [isLogin, setIsLogin] = useState<boolean | undefined>(false)
+
+  useEffect(() => {
+    setIsLogin(!!userData?.id)
+  }, [userData, userData?.id])
+
+  if (!isLogin) {
     return
   }
   return (
@@ -40,4 +44,4 @@ const Navbar: React.FC = () => {
   )
 }
 
-export default Navbar
+export default SecondaryNavbar

src/services/connection.ts

@@ -19,7 +19,7 @@ export async function getUsersWithProfile(token: string, Name: string) {
   return response
 }
 export async function getUserFollow(token: string, Name: string) {
-  const response: FollowingItemPropss = await client(`/userprofile?name=${Name}`, { headers: { Authorization: `Bearer ${token}` } })
+  const response: FollowingItemPropss = await client(`/userprofile/following?name=${Name}`, { headers: { Authorization: `Bearer ${token}` } })
   return response
 }
 export async function getUserFollowers(token: string, Name: string) {

src/services/notification.ts

@@ -21,12 +21,17 @@ export async function UpdateCommunityGroup(data: { id: string }, token: string)
 }
 
 export function useGetNotification() {
-  const [cookieValue] = useCookie('uni_user_token')
+  let finalCookie: any = null
+
+  if (typeof document !== 'undefined') {
+    const cookieValue = document.cookie.split('; ').find((row) => row.startsWith('uni_user_token='))
+    finalCookie = cookieValue ? cookieValue.split('=')[1] : null
+  }
 
   const state = useQuery({
     queryKey: ['notification'],
-    queryFn: () => getUserNotification(cookieValue),
-    enabled: !!cookieValue,
+    queryFn: () => getUserNotification(finalCookie),
+    enabled: !!finalCookie,
   })
 
   let errorMessage = null

src/store/socketSlice/socketSlice.ts

@@ -31,7 +31,7 @@ export const createSocketSlice: StateCreator<SocketSlice> = (set, get) => ({
   ...initialState,
 
   initializeSocket: (userId, refetchUserData, refetchNotification, refetchUserProfileData) => {
-    const newSocket = io('http://localhost:9000')
+    const newSocket = io('http://localhost:8000')
 
     newSocket.on('connect', () => {
       console.log('Connected to the server')

src/utils/ZustandSocketProvider.tsx

@@ -16,9 +16,13 @@ const ZustandSocketProvider: React.FC<ZustandSocketProviderProps> = ({ children
   const disconnectSocket = useUniStore((state) => state.disconnectSocket)
   const { userData, type, setUserUnVerifiedCommunities, setUserVerifiedCommunities, setUserFollowers, setIsRefetched } = useUniStore()
   const { refetch: refetchNotification } = useGetNotification()
-  const { refetch: refetchUserData, data: RefetcheduserData } = useGetUserData(type)
-  const { refetch: refetchUserProfileData, data: RefetcheduserProfileData } = useGetUserProfileData(type)
-
+  const { refetch: refetchUserData, data: RefetcheduserData, isSuccess: refectUserDataIsSuccess, isFetching } = useGetUserData(type)
+  const {
+    refetch: refetchUserProfileData,
+    data: RefetcheduserProfileData,
+    isSuccess: refectUserProfileDataIsSuccess,
+    isFetching: userProfileRefething,
+  } = useGetUserProfileData(type)
   useEffect(() => {
     if (userData.id) {
       initializeSocket(userData.id, refetchUserData, refetchNotification, refetchUserProfileData)
@@ -30,18 +34,20 @@ const ZustandSocketProvider: React.FC<ZustandSocketProviderProps> = ({ children
   }, [userData.id, initializeSocket, disconnectSocket, refetchNotification])
 
   useEffect(() => {
-    switch (type) {
-      case notificationRoleAccess.ASSIGN:
-        setUserUnVerifiedCommunities(RefetcheduserData?.user?.userUnVerifiedCommunities)
-        setUserVerifiedCommunities(RefetcheduserData?.user?.userVerifiedCommunities)
-        setIsRefetched('')
-        break
-      case notificationRoleAccess.FOLLOW:
-        setUserFollowers(RefetcheduserProfileData?.profile?.followers)
-        setIsRefetched('')
-        break
-      default:
-        break
+    if ((refectUserDataIsSuccess && !isFetching) || (refectUserProfileDataIsSuccess && !userProfileRefething)) {
+      switch (type) {
+        case notificationRoleAccess.ASSIGN:
+          setUserUnVerifiedCommunities(RefetcheduserData?.user?.userUnVerifiedCommunities)
+          setUserVerifiedCommunities(RefetcheduserData?.user?.userVerifiedCommunities)
+          setIsRefetched('')
+          break
+        case notificationRoleAccess.FOLLOW:
+          setUserFollowers(RefetcheduserProfileData?.profile?.followers)
+          setIsRefetched('')
+          break
+        default:
+          break
+      }
     }
   }, [RefetcheduserData, RefetcheduserProfileData])