From 654673deea24e40f11c0561b97be7f73a09f466d Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 20 Jan 2024 12:34:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(App):=20add=20`ErrorPage`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  3 +-
 .../pages/ErrorPage/ErrorPage.test.tsx        | 28 +++++++++++++++++++
 src/components/pages/ErrorPage/ErrorPage.tsx  | 22 +++++++++++++++
 src/components/pages/ErrorPage/index.ts       |  1 +
 src/components/pages/index.ts                 |  2 ++
 5 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/ErrorPage/ErrorPage.test.tsx
 create mode 100644 src/components/pages/ErrorPage/ErrorPage.tsx
 create mode 100644 src/components/pages/ErrorPage/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index cd79907..7120c9d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,12 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import { MainPage } from 'components/pages'
+import { ErrorPage, MainPage } from 'components/pages'
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <MainPage />,
+    errorElement: <ErrorPage />,
   },
 ])
 
diff --git a/src/components/pages/ErrorPage/ErrorPage.test.tsx b/src/components/pages/ErrorPage/ErrorPage.test.tsx
new file mode 100644
index 0000000..d2ca2df
--- /dev/null
+++ b/src/components/pages/ErrorPage/ErrorPage.test.tsx
@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { screen, cleanup, render } from '@testing-library/react'
+import { RouterProvider, createMemoryRouter } from 'react-router-dom'
+
+import ErrorPage from './ErrorPage'
+
+// Tests
+describe('Renders ErrorPage correctly', async () => {
+  /**
+   * Resets all renders after each test
+   */
+  afterEach(() => {
+    cleanup()
+  })
+
+  /**
+   * Passes - shows title correctly
+   */
+  it('Should render the error page correctly', () => {
+    const router = createMemoryRouter([{ path: '/', element: <div />, errorElement: <ErrorPage /> }], { initialEntries: ['/some/bad/route'] })
+
+    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()
+  })
+})
diff --git a/src/components/pages/ErrorPage/ErrorPage.tsx b/src/components/pages/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..8d4184b
--- /dev/null
+++ b/src/components/pages/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,22 @@
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
+
+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>
+    )
+  }
+}
+
+export default ErrorPage
diff --git a/src/components/pages/ErrorPage/index.ts b/src/components/pages/ErrorPage/index.ts
new file mode 100644
index 0000000..333b56e
--- /dev/null
+++ b/src/components/pages/ErrorPage/index.ts
@@ -0,0 +1 @@
+export { default } from './ErrorPage'
diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts
index 13c908d..74a0199 100644
--- a/src/components/pages/index.ts
+++ b/src/components/pages/index.ts
@@ -1 +1,3 @@
 export { default as MainPage } from './MainPage'
+
+export { default as ErrorPage } from './ErrorPage'