feat: Replace router.push with Nextjs Links where appropriate

packages/web/src/components/Admin/JudgingSessionList/JudgingSessionActionsMenu.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
-import { useRouter } from 'next/router';
-import {
-  Menu,
-  MenuButton,
-  Button,
-  MenuList,
-  MenuItem,
-  MenuItemProps,
-  useClipboard,
-} from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { Menu, MenuButton, Button, MenuList, MenuItem, useClipboard } from '@chakra-ui/react';
 import { BsChevronDown } from 'react-icons/bs';
 import { ExpoJudgingSession, CriteriaJudgingSession } from '@hangar/shared';
 import { openSuccessToast } from '../../utils/CustomToast';
@@ -18,14 +10,9 @@ type JudgingSessionActionsMenuProps = {
   judgingSession: ExpoJudgingSession | CriteriaJudgingSession;
 };
 
-const menuItemStyle: MenuItemProps = {
-  py: 3,
-};
-
 export const JudgingSessionActionsMenu: React.FC<JudgingSessionActionsMenuProps> = ({
   judgingSession,
 }) => {
-  const router = useRouter();
   const judgingSessionType =
     'criteriaList' in judgingSession ? 'criteriaJudgingSession' : 'expoJudgingSession';
 
@@ -45,7 +32,7 @@ export const JudgingSessionActionsMenu: React.FC<JudgingSessionActionsMenuProps>
       </MenuButton>
       <MenuList>
         <MenuItem
-          {...menuItemStyle}
+          py={3}
           onClick={() => {
             onCopy();
             openSuccessToast({ title: 'Link copied to clipboard' });
@@ -54,23 +41,17 @@ export const JudgingSessionActionsMenu: React.FC<JudgingSessionActionsMenuProps>
           Copy Invite Link
         </MenuItem>
 
-        <MenuItem
-          {...menuItemStyle}
-          onClick={() => {
-            void router.push(invitePath);
-          }}
-        >
-          Join Session
-        </MenuItem>
+        <NextLink passHref href={invitePath}>
+          <MenuItem as="a" py={3}>
+            Join Session
+          </MenuItem>
+        </NextLink>
 
-        <MenuItem
-          {...menuItemStyle}
-          onClick={() => {
-            void router.push(`/admin/${judgingSessionType}/${judgingSession.id}`);
-          }}
-        >
-          See Results
-        </MenuItem>
+        <NextLink passHref href={`/admin/${judgingSessionType}/${judgingSession.id}`}>
+          <MenuItem as="a" py={3}>
+            See Results
+          </MenuItem>
+        </NextLink>
       </MenuList>
     </Menu>
   );

packages/web/src/components/Admin/JudgingSessionList/JudgingSessionsOptionsButton/JudgingSessionOptionsButton.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Text, IconButton, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
 import { ExpoJudgingSession } from '@hangar/shared';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 import { BsThreeDots } from 'react-icons/bs';
 import { openErrorToast, openSuccessToast } from '../../../utils/CustomToast';
 import { useExpoJudgingSessionStore } from '../../../../stores/expoJudgingSession';
 
 export const JudgingSessionOptionsButton: React.FC = () => {
-  const router = useRouter();
   const { addExpoJudgingSession } = useExpoJudgingSessionStore();
   let expoJudgingSession: ExpoJudgingSession | undefined;
 
@@ -36,14 +35,11 @@ export const JudgingSessionOptionsButton: React.FC = () => {
           <Text>Create Expo Judging Session</Text>
         </MenuItem>
 
-        <MenuItem
-          py={3}
-          onClick={() => {
-            void router.push('/admin/createCriteriaJudgingSession');
-          }}
-        >
-          <Text>Create Criteria Judging Session</Text>
-        </MenuItem>
+        <NextLink passHref href="/admin/createCriteriaJudgingSession">
+          <MenuItem as="a" py={3}>
+            <Text>Create Criteria Judging Session</Text>
+          </MenuItem>
+        </NextLink>
       </MenuList>
     </Menu>
   );

packages/web/src/components/Prizes/PrizeCard.tsx

@@ -1,6 +1,6 @@
 import { ListItem, Heading, Flex, Text, Button } from '@chakra-ui/react';
 import { Prize } from '@hangar/shared';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 import { colors } from '../../theme';
 
 type PrizeCardProps = {
@@ -11,7 +11,6 @@ const RANKING = ['🥇', '🥈', '🥉'];
 const BONUS = '✨';
 
 export const PrizeCard: React.FC<PrizeCardProps> = ({ prize }) => {
-  const router = useRouter();
   const { name, description, position, isBonus, winner } = prize;
 
   return (
@@ -26,13 +25,9 @@ export const PrizeCard: React.FC<PrizeCardProps> = ({ prize }) => {
 
         <Text>{description}</Text>
         {winner && (
-          <Button
-            onClick={() => {
-              void router.push(`/project/${winner}`);
-            }}
-          >
-            View Winner
-          </Button>
+          <NextLink passHref href={`/project/${winner}`}>
+            <Button as="a">View Winner</Button>
+          </NextLink>
         )}
       </Flex>
     </ListItem>

packages/web/src/components/layout/AppLayout/NavBar/NavElements/PageLinks/AdminDashboard.tsx

@@ -1,16 +1,8 @@
 import { Link } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 
-export const AdminDashboard: React.FC = () => {
-  const router = useRouter();
-
-  return (
-    <Link
-      onClick={() => {
-        void router.push('/admin/dashboard');
-      }}
-    >
-      Admin Dashboard
-    </Link>
-  );
-};
+export const AdminDashboard: React.FC = () => (
+  <NextLink passHref href="/admin/dashboard">
+    <Link>Admin Dashboard</Link>
+  </NextLink>
+);

packages/web/src/components/layout/AppLayout/NavBar/NavElements/PageLinks/MyProject.tsx

@@ -1,21 +1,15 @@
 import { Link } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 import { useUserStore } from '../../../../../../stores/user';
 
 export const MyProject: React.FC = () => {
-  const router = useRouter();
   const { user } = useUserStore();
 
   if (!user?.project) return null;
 
   return (
-    <Link
-      flexShrink={0}
-      onClick={() => {
-        void router.push(`/project/${user.project}`);
-      }}
-    >
-      My Project
-    </Link>
+    <NextLink passHref href={`/project/${user.project}`}>
+      <Link flexShrink={0}>My Project</Link>
+    </NextLink>
   );
 };

packages/web/src/components/layout/AppLayout/NavBar/NavElements/PageLinks/Prizes.tsx

@@ -1,16 +1,8 @@
 import { Link } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 
-export const Prizes: React.FC = () => {
-  const router = useRouter();
-
-  return (
-    <Link
-      onClick={() => {
-        void router.push('/#prizes');
-      }}
-    >
-      Prizes
-    </Link>
-  );
-};
+export const Prizes: React.FC = () => (
+  <NextLink passHref href="/#prizes">
+    <Link>Prizes</Link>
+  </NextLink>
+);

packages/web/src/components/layout/AppLayout/NavBar/NavElements/PageLinks/Schedule.tsx

@@ -1,16 +1,8 @@
 import { Link } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 
-export const Schedule: React.FC = () => {
-  const router = useRouter();
-
-  return (
-    <Link
-      onClick={() => {
-        void router.push('/schedule');
-      }}
-    >
-      Schedule
-    </Link>
-  );
-};
+export const Schedule: React.FC = () => (
+  <NextLink passHref href="/schedule">
+    <Link>Schedule</Link>
+  </NextLink>
+);

packages/web/src/components/layout/AppLayout/NavBar/NavLogo.tsx

@@ -1,26 +1,22 @@
 import { Heading } from '@chakra-ui/react';
 import { Config } from '@hangar/shared';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 
 const LOGO_HEIGHT = { base: '24px', sm: '28px', md: '40px' };
 
-export const NavLogo: React.FC = () => {
-  const router = useRouter();
-
-  return (
+export const NavLogo: React.FC = () => (
+  <NextLink passHref href="/">
     <Heading
+      as="a"
       w="full"
       variant={'cta'}
       py={3}
       px={{ base: 1, sm: 3 }}
       lineHeight={LOGO_HEIGHT}
       cursor="pointer"
       mb={1}
-      onClick={() => {
-        void router.push('/');
-      }}
     >
       {Config.global.appName}
     </Heading>
-  );
-};
+  </NextLink>
+);

packages/web/src/pages/judgingSessionComplete.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { NextPage } from 'next';
 import { Box, Button, keyframes } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 import { PageContainer } from '../components/layout/PageContainer';
 import { useConfetti } from '../pageUtils/Confetti/Confetti';
 
@@ -28,7 +28,6 @@ const largeIcon = {
 const animation = `${bob} infinite 2s linear`;
 
 const SessionComplete: NextPage = () => {
-  const router = useRouter();
   const [trigger1, Cannon1] = useConfetti();
   const [trigger2, Cannon2] = useConfetti();
 
@@ -53,14 +52,11 @@ const SessionComplete: NextPage = () => {
         <Box style={{ ...centered, opacity: 0.3, margin: '8px' }}>
           You can safely close your browser
         </Box>
-        <Button
-          style={centered}
-          onClick={() => {
-            void router.push('/');
-          }}
-        >
-          Return to Home
-        </Button>
+        <NextLink passHref href="/">
+          <Button as="a" style={centered}>
+            Return to Home
+          </Button>
+        </NextLink>
       </Box>
     </PageContainer>
   );