feat: error page (hasadna#301)

yardenmezi · Dec 16, 2023 · a2f93ea · a2f93ea
1 parent 244b222
commit a2f93ea
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/locale/he.json b/src/locale/he.json
@@ -114,5 +114,11 @@
   "lineProfile": {
     "title": "פרופיל קו",
     "notFound":"לא הצלחנו למצוא את הקו שחיפשת :("
+  },
+  "errorPage": {
+    "title": "אופס, משהו השתבש",
+    "text": "אנא נסה שוב מאוחר יותר",
+    "text2": "אם הבעיה נמשכת, אנא פנה אלינו בכתובת:",
+    "button": "חזרה לדף הבית"
   }
 }
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+const Centered = styled.div`
+  text-align: center;
+`
+
+export const ErrorPage = () => {
+  const { t } = useTranslation()
+  return (
+    <Centered>
+      <h1>{t('errorPage.title')}</h1>
+      <section>
+        <p>{t('errorPage.text')}</p>
+        <br />
+        <img src="https://media0.giphy.com/media/YcLorQZbPI4Ks/giphy.gif" alt="error" />
+        <br />
+        <p>
+          {t('errorPage.text2')} <br />
+          <a href="https://github.com/hasadna/open-bus-map-search/issues/new">
+            https://github.com/hasadna/open-bus-map-search/issues/new
+          </a>
+        </p>
+      </section>
+    </Centered>
+  )
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -25,6 +25,7 @@ import {
   LineChartOutlined,
 } from '@ant-design/icons'
 import { MainRoute } from './MainRoute'
+import { ErrorPage } from 'src/pages/ErrorPage'
 
 export const PAGES = [
   {
@@ -93,12 +94,13 @@ const getRoutesList = () => {
   return (
     <Route element={<MainRoute />}>
       {routes.map(({ path, element }) => (
-        <Route key={path} path={path} element={element} />
+        <Route key={path} path={path} element={element} ErrorBoundary={ErrorPage} />
       ))}
       <Route
         path="/profile/:gtfsRideGtfsRouteId"
         key={'/profile/:gtfsRideGtfsRouteId'}
         element={<Profile />}
+        ErrorBoundary={ErrorPage}
         loader={async ({ params: { gtfsRideGtfsRouteId } }) => {
           const resp = await fetch(
             `https://open-bus-stride-api.hasadna.org.il/gtfs_routes/get?id=${gtfsRideGtfsRouteId}`,