header issue for pools

LucSPI · May 22, 2023 · ab6ecd8 · ab6ecd8
1 parent d2e2204
commit ab6ecd8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -27,6 +27,11 @@ const Header: FC = () => {
     navigate('/profile');
     appActions.profile.currentTab('profile');
   };
+  const goTo = () => {
+    if(!isAuthenticated()){
+      appActions.auth.isModalOpen(true);
+    }
+  }
   return (
     <div className="md:px-4 py-2 px-2 bg-brand-800 top-0 flex items-stretch justify-between max-sm:text-sm z-50 border sticky">
       <HashLink to={'/'}>
@@ -41,10 +46,10 @@ const Header: FC = () => {
             <LinkButton text="Play game" to="/play" actived={pathname.includes('play')} />
           </li>
           <li>
-            <LinkButton text="Pools" to="/pools" actived={pathname.includes('pools')} />
+            <LinkButton text="Pools" to={ isAuthenticated() ? "/pools": "/" }  actived={pathname.includes('pools')} onClick={goTo}/>
           </li>
           <li>
-            <LinkButton text="Leaderboard" to="/leaderboard" actived={pathname.includes('board')} />
+            <LinkButton text="Leaderboard" to={ isAuthenticated() ? "/leaderboard": "/" } actived={pathname.includes('board')} onClick={goTo} />
           </li>
         </ul>
       </nav>

diff --git a/src/components/Pools/index.tsx b/src/components/Pools/index.tsx
@@ -5,10 +5,7 @@ import { Pagination } from '../UI/Table/TableSearchMode/Pagination';
 import { Image } from '../UI';
 import Clock from '~/assets/img/time.png';
 import { Bullet, Blitz, Rapid, Standard } from '../UI/SVG_ICONS';
-import { useAuth } from '~/providers/AuthProvider';
-import { useNavigate } from 'react-router-dom';
 import { appStore } from '~/store';
-import { useEffect } from 'react';
 type Category = 'Bullet' | 'Blitz' | 'Rapid';
 
 interface Pool {
@@ -51,13 +48,7 @@ const columns: ColumnDefinitionType<Pool, keyof Pool>[] = [
 const Pools: React.FC = () => {
   const lobby = appStore.lobby.useTrackedStore();
   const totalCount = appStore.lobby.use.totalCount();
-  const navigate = useNavigate();
-  const { isAuthenticated } = useAuth();
-  useEffect(() => {
-    if(!isAuthenticated()){
-      navigate('/');
-    }
-  }, [])
+
   return (
     <div className="my-auto mx-12 grid grid-cols-12">
       <div className="flex flex-col justify-center border-[1px] py-6 h-fit col-span-8 border-[#B4C7D8] shadow-3xl rounded-xl">

diff --git a/src/components/UI/LinkButton.ui.tsx b/src/components/UI/LinkButton.ui.tsx
@@ -5,17 +5,19 @@ export interface LinkButtonProps {
   text: string;
   to: string;
   actived?: boolean;
+  onClick? : () => void;
 }
 
 export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
-  ({ text, to, actived = false }, ref) => {
+  ({ text, to, actived = false, onClick }, ref) => {
     return (
       <HashLink
         ref={ref}
         to={to}
         className={`font-semibold leading-loose text-black ${
           actived && 'underline text-purple-100'
         }`}
+        onClick={onClick}
       >
         {text}
       </HashLink>