From af3274f881ee1291b7c048eba611eadbae2e8434 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 20 Jan 2024 16:07:25 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(ErrorPage):=20use?=
 =?UTF-8?q?=20Mui=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ErrorPage/ErrorPage.test.tsx        |  5 ++--
 src/components/pages/ErrorPage/ErrorPage.tsx  | 29 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/ErrorPage/ErrorPage.test.tsx b/src/components/pages/ErrorPage/ErrorPage.test.tsx
index d2ca2df..574aa9f 100644
--- a/src/components/pages/ErrorPage/ErrorPage.test.tsx
+++ b/src/components/pages/ErrorPage/ErrorPage.test.tsx
@@ -17,12 +17,13 @@ describe('Renders ErrorPage correctly', async () => {
    * Passes - shows title correctly
    */
   it('Should render the error page correctly', () => {
-    const router = createMemoryRouter([{ path: '/', element: <div />, errorElement: <ErrorPage /> }], { initialEntries: ['/some/bad/route'] })
+    const badRoute = '/some/bad/route'
+    const router = createMemoryRouter([{ path: '/', element: <div />, errorElement: <ErrorPage /> }], { initialEntries: [badRoute] })
 
     render(<RouterProvider router={router} />)
 
     expect(screen.getByText('Oops!')).toBeInTheDocument()
     expect(screen.getByText('Sorry, an unexpected error has occurred.')).toBeInTheDocument()
-    expect(screen.getByText('404 Not Found')).toBeInTheDocument()
+    expect(screen.getByText(`404 Error: No route matches URL "${badRoute}"`)).toBeInTheDocument()
   })
 })
diff --git a/src/components/pages/ErrorPage/ErrorPage.tsx b/src/components/pages/ErrorPage/ErrorPage.tsx
index 8d4184b..0c70e08 100644
--- a/src/components/pages/ErrorPage/ErrorPage.tsx
+++ b/src/components/pages/ErrorPage/ErrorPage.tsx
@@ -1,22 +1,21 @@
 import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
+import { Box, Typography } from '@mui/material'
 
 const ErrorPage: React.FC = () => {
   const error: unknown = useRouteError()
-  if (isRouteErrorResponse(error)) {
-    return (
-      <div id="error-page" className="flex flex-col gap-8 justify-center items-center h-screen">
-        <h1 className="text-4xl font-bold">Oops!</h1>
-        <p>Sorry, an unexpected error has occurred.</p>
-        {isRouteErrorResponse(error) && (
-          <p className="text-slate-400">
-            <i>
-              {error.status} {error.statusText}
-            </i>
-          </p>
-        )}
-      </div>
-    )
-  }
+  return (
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="100vh">
+      <Typography variant="h1" color="primary.main">
+        Oops!
+      </Typography>
+      <Typography variant="h6">Sorry, an unexpected error has occurred.</Typography>
+      {isRouteErrorResponse(error) && (
+        <Typography color="text.secondary">
+          {error.status} {error.data}
+        </Typography>
+      )}
+    </Box>
+  )
 }
 
 export default ErrorPage