Error page

CHANGELOG.md

@@ -12,7 +12,7 @@ _Can be run using `npm run codetotal:beta`_
   - Doc: display linter icons
 
 - Front-end
-
+  - Fix error page styles and apply the fallback error page to all routes
 - Back-End
 
 ## [v0.2.0] - 2023-08-09
@@ -43,4 +43,3 @@ _Can be run using `npm run codetotal:beta`_
   - Ready to use docker-compose using CodeTotal and MegaLinter images
   - Online Documentation on <https://codetotal.io>
   - Contributing instructions
-

packages/app/src/analysis/actions/analysis-actions.ts

@@ -6,7 +6,7 @@ import {
   RepoAnalysis,
   SnippetAnalysis,
 } from "shared-types";
-import { ApiUrl } from "../../common/utils/api-url-config";
+import { ApiUrl } from "../../common/utils/backend-url";
 import { AnalysisStore, AsyncState } from "../stores/analysis-store";
 
 export const startAnalysis = async () => {

packages/app/src/app/components/AppRouteProvider.tsx

@@ -17,6 +17,7 @@ const router = createBrowserRouter([
   {
     path: "/report/:requestId",
     element: <LazyReportPage />,
+    errorElement: <ErrorPage />,
   },
 ]);
 

packages/app/src/app/components/ErrorPage.tsx

@@ -1,26 +1,47 @@
-import { Typography } from "@mui/material";
+import { Button, Theme, Typography } from "@mui/material";
 import { FC } from "react";
-import { NavLink } from "react-router-dom";
+import { MdRefresh } from "react-icons/md";
 import { makeStyles } from "tss-react/mui";
 
 export const ErrorPage: FC = () => {
   const { classes } = useStyles();
 
   return (
-    <>
-      <header>
-        <Typography variant="h5">An unexpected error has occured</Typography>
-      </header>
-      <main className={classes.errorPage}>
-        <NavLink to="/">Back to homepage</NavLink>
-      </main>
-    </>
+    <div className={classes.errorPage}>
+      <div className={classes.emoji}>😳</div>
+      <Typography variant="h3" color="text.secondary">
+        Ooops!
+      </Typography>
+      <Typography variant="h5" color="text.secondary">
+        An unexpected error has occured
+      </Typography>
+      <Button
+        variant="contained"
+        color="primary"
+        component="a"
+        href="/"
+        className={classes.link}
+        startIcon={<MdRefresh />}
+      >
+        Refresh Page
+      </Button>
+    </div>
   );
 };
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   errorPage: {
-    display: "grid",
-    placeItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingBlockStart: theme.spacing(10),
+    gap: theme.spacing(4),
+  },
+  emoji: {
+    fontSize: "3rem",
+  },
+  link: {
+    marginBlockStart: theme.spacing(5),
+    // color: theme.palette.text.primary,
   },
 }));

packages/app/src/languages/actions/detect-language-actions.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import debounce from "lodash-es/debounce";
 import { ProgrammingLanguage } from "shared-types";
-import { ApiUrl } from "../../common/utils/api-url-config";
+import { ApiUrl } from "../../common/utils/backend-url";
 import { LanguagesStore } from "../stores/languages-store";
 
 export const detect = async (

packages/app/src/languages/actions/language-actions.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { ProgrammingLanguage } from "shared-types";
-import { ApiUrl } from "../../common/utils/api-url-config";
+import { ApiUrl } from "../../common/utils/backend-url";
 import { LanguagesStore } from "../stores/languages-store";
 
 export const loadAllLanguages = async () => {

packages/app/src/report/actions/init-report-action.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { AnalysisStatus } from "shared-types";
-import { ApiUrl } from "../../common/utils/api-url-config";
+import { ApiUrl } from "../../common/utils/backend-url";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribeToReportProgress } from "./subscribe-report-action";