implement not found page when accessing unknown paths b00tc4mp#84

staff/marti-herms/project/V-HUB/app/src/home/Footer.jsx

@@ -28,6 +28,7 @@ export default function Footer({ makeReviewVisibility, onSearchGame, onAddGame,
             <Route path={paths.search} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
             <Route path={paths.followers + ':userId'} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
             <Route path={paths.following + ':userId'} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
+            <Route path='/*' element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
         </Routes>
     </footer>
 }

staff/marti-herms/project/V-HUB/app/src/home/NotFoundPage.jsx

@@ -0,0 +1,26 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+import { AiOutlineRollback as GoBackIcon } from 'react-icons/ai'
+
+import Container from '../library/Container'
+import Image from '../library/Image'
+import Paragraph from '../library/Paragraph'
+import Button from '../library/Button'
+
+export default function NotFoundError() {
+    const location = useLocation()
+    const navigate = useNavigate()
+
+    const handleGoBack = () => {
+        const canGoBack = location.key !== 'default'
+        const href = canGoBack ? -1 : '/'
+
+        navigate(href)
+    }
+
+    return <Container className='flex flex-col justify-center items-center gap-4 w-full h-[87vh]' >
+        <Paragraph className='dark:text-white text-4xl font-bold'>ERROR! ERROR!</Paragraph>
+        <Image src='../../images/space_invaders_icon.svg' className='w-[60%] h-auto dark:invert' />
+        <Paragraph className='dark:text-white text-4xl font-bold'>PAGE NOT FOUND</Paragraph>
+        <Button className='bg-blue-500 rounded p-2' onClick={handleGoBack}><GoBackIcon className='w-16 h-16 dark:text-white' /></Button>
+    </Container>
+}

staff/marti-herms/project/V-HUB/app/src/home/index.jsx

@@ -10,6 +10,7 @@ import SearchResults from './SearchResults'
 import Game from './Game'
 import Profile from './Profile'
 import UserList from './UserList'
+import NotFoundPage from './NotFoundPage'
 
 import extractPayloadFromToken from '../../util/extractPayloadFromToken'
 import paths from '../../util/paths.js'
@@ -81,6 +82,7 @@ export default function Home({ onLogout }) {
                 <Route path={paths.addGame} element={<AddGame onAddGame={handleAddGame} />} />
                 <Route path={paths.search} element={<><Search /> <SearchResults refreshStamp={refreshStamp} onGameClick={handleGame} onUserClick={handleSearchUser} /></>} />
                 <Route path={paths.game + ':gameId'} element={<Game makeReviewVisibility={makeReviewVisibility} onCancel={handleCancelReview} />} />
+                <Route path='/*' element={<NotFoundPage />} />
             </Routes>
         </main>