home page without login

src/pages/profile/hooks/useProfileData.tsx

@@ -2,10 +2,11 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import * as api from '../service/ProfileService'
 import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes';
 
-export const useGetProfile = () => {
+export const useGetProfile = (isLogin?: boolean) => {
     return useQuery({
         queryKey: ["profile"],
         queryFn: () => api.getProfile(),
+        enabled: isLogin || isLogin === undefined,
     });
 };
 

src/shared/Header.tsx

@@ -3,21 +3,28 @@ import Input from '../components/Input'
 import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
 import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import Notifications from '../pages/notification/Notification'
 import { useSharedStore } from './store/sharedStore'
 import { useGetProfile } from '../pages/profile/hooks/useProfileData'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import SideBarItem from './SideBarItem'
+import Button from '../components/Button'
+import { buildPath } from '../helpers/utils'
 
 const Header: FC = () => {
 
+    const isLogin = localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
+
+    const { slug } = useParams()
+    const navigate = useNavigate()
     const location = useLocation();
     const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar } = useSharedStore()
-    const { data } = useGetProfile()
+    const { data } = useGetProfile(isLogin ? true : false)
+
 
     useEffect(() => {
         setPopoverKey((prevKey) => prevKey + 1);
@@ -37,7 +44,17 @@ const Header: FC = () => {
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
-                <Notifications />
+                {
+                    isLogin ? (
+                        <Notifications />
+                    )
+                        :
+                        <Button
+                            label='ورود / ثبت نام'
+                            className='w-fit px-5'
+                            onClick={() => navigate(buildPath('auth/login', slug))}
+                        />
+                }
                 {
                     data && (
                         <Popover className="relative" key={popoverKey}>