Merge pull request #525 from culturecreates/feature/issue-330

Feature/issue 330

src/components/Error/Error.jsx

@@ -0,0 +1,42 @@
+import { useNavigate, useRouteError } from 'react-router-dom';
+import { ReactComponent as GeneralErrors } from '../../assets/images/general-error.svg';
+import { ReactComponent as Error404 } from '../../assets/images/404-error.svg';
+import './error.css';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+
+function ErrorAlert(props) {
+  const { errorType = 'general' } = props;
+
+  const error = useRouteError();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const image = errorType === 'general' ? <GeneralErrors /> : <Error404 />;
+  const message = errorType === 'general' ? error.message : t('errorPage.notFoundMessage');
+
+  console.error(message, new Date().toISOString());
+
+  return (
+    <div className="error-page">
+      <div className="content">
+        <div className="image-container">{image}</div>
+        <section>
+          <h1>{t('errorPage.heading')}</h1>
+          <p className="error-message">{message}</p>
+          <p className="error-time">{new Date().toISOString()}</p>
+          <div className="btn-container">
+            <Button
+              onClick={() => {
+                navigate(-1);
+              }}>
+              {t('errorPage.buttonText')}
+            </Button>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default ErrorAlert;

src/components/Error/error.css

@@ -0,0 +1,67 @@
+.error-page {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--primary-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.error-page .content {
+  min-width: 500px;
+  max-width: 700px;
+  max-height: 750px;
+  width: 40%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.error-page .image-container {
+  height: 40%;
+}
+
+.error-page .image-container > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.error-page h1 {
+  color: var(--content-neutral-primary, #222732);
+  text-align: center;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+}
+
+.error-page .error-message,
+.error-page .error-time {
+  color: var(--content-neutral-secondary, #646d7b);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.error-page .btn-container {
+  display: grid;
+  place-content: center;
+}
+
+.error-page .btn-container .ant-btn {
+  border-radius: 4px;
+  background: var(--content-action-default, #1b3de6);
+  color: var(--primary-white);
+  font-weight: 600;
+  text-transform: capitalize;
+  border: none;
+  font-size: 16px;
+  padding: 8px 16px;
+  display: grid;
+  place-content: center;
+}

src/index.css

@@ -11,6 +11,9 @@ html,
 body,
 #root {
   height: 100%;
+  --primary-white: #ffffff;
+  --content-neutral-primary: #222732;
+  --content-neutral-secondary: #646d7b;
 }
 
 body {

src/locales/en/translationEn.json

@@ -519,6 +519,13 @@
       }
     }
   },
+  "errorPage": {
+    "heading": "Oops, something went wrong!",
+    "notFoundMessage": "The requested page could not be found (404)",
+    "serverErrorsMessage": "If the problem persists, let the site owner know {{code}}",
+    "jsErrorMessage": "Go back to the previous page",
+    "buttonText": "Back"
+  },
   "common": {
     "tabEnglish": "English",
     "tabFrench": "French",

src/locales/fr/transalationFr.json

@@ -518,6 +518,13 @@
       }
     }
   },
+  "errorPage": {
+    "heading": "Oups, quelque chose s'est mal passé",
+    "notFoundMessage": "La page demandée n'a pas été trouvée (404)",
+    "serverErrorsMessage": "Si le problème persiste, informez le propriétaire du site {{code}}",
+    "jsErrorMessage": "Retourner à la page précédente",
+    "buttonText": "Retour"
+  },
   "common": {
     "tabEnglish": "Anglais",
     "tabFrench": "Français",

src/router/index.js

@@ -6,10 +6,11 @@ import Dashboard from '../pages/Dashboard';
 import ResetPassword from '../pages/ResetPassword';
 import Events from '../pages/Dashboard/Events';
 import AddEvent from '../pages/Dashboard/AddEvent';
-import { ReactComponent as NotFound } from '../../src/assets/images/illustatus.svg';
+// import { ReactComponent as NotFound } from '../../src/assets/images/illustatus.svg';
 import EventReadOnly from '../pages/Dashboard/EventReadOnly';
 import CreateAccount from '../pages/CreateAccount';
 import Users from '../pages/Dashboard/Users';
+import ErrorAlert from '../components/Error/Error';
 import Organizations from '../pages/Dashboard/Organizations';
 import Places from '../pages/Dashboard/Places';
 import People from '../pages/Dashboard/People';
@@ -43,7 +44,7 @@ export const router = createBrowserRouter([
   {
     path: PathName.Dashboard,
     element: <Dashboard />,
-
+    errorElement: <ErrorAlert />,
     children: [
       {
         path: `:calendarId${PathName.Events}`,
@@ -116,10 +117,6 @@ export const router = createBrowserRouter([
   },
   {
     path: PathName.NotFound,
-    element: (
-      <div>
-        <NotFound />
-      </div>
-    ),
+    element: <ErrorAlert errorType="page not found" />,
   },
 ]);