refactor(frontend): add StatusBar component

Author: berdal84

frontend/src/app/components/StatusBar.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { useAppContext } from "../contexts/AppContext";
+import { Alert, AlertProps } from "@mui/material";
+
+
+export default function StatusBar() {
+    const { status, statusMessage } = useAppContext();
+    const { severity, text } = useMemo<{severity: AlertProps['severity'], text: string}>( () => {
+        switch (status) {
+            case "pending":
+                return { severity: "success", text: "Ready" };
+            case "loading":
+                return { severity: "info", text: "Loading..." };
+            case "error":
+                return { severity: "error", text: `Error: ${statusMessage}` };
+        }
+    }, [status, statusMessage])
+        
+    return (
+        <Alert severity={severity} className="text-grey-500">{text}</Alert>
+    )
+}

frontend/src/app/contexts/AppContext.tsx

@@ -2,7 +2,7 @@
 import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from 'react';
 import { Sample, Page } from '@/app/types';
 
-type Status = "loading" | "error" | "pending";
+export type Status = "loading" | "error" | "pending";
 
 /** The various action types to dispatch */
 type Action =

frontend/src/app/page.tsx

@@ -11,6 +11,7 @@ import { useQueryState } from "nuqs";
 import SampleDialog from "./components/SampleDialog";
 import {ConfirmationDialog} from "@/app/components/ConfirmationDialog";
 import {Badge} from "@mui/base";
+import StatusBar from "./components/StatusBar";
 
 export default function Home() {
 
@@ -129,10 +130,7 @@ export default function Home() {
         </Box>
       </Box>
 
-      {/** Draft StatusBar (TODO: store the a date, hide message if old, except for errors) */}
-      <Alert severity="success" hidden={status !== "pending"} className="text-grey-500">Ready</Alert>
-      <Alert severity="info" hidden={status !== "loading"} className="text-grey-500">Loading...</Alert>
-      <Alert severity="error" hidden={status !== "error"} title={statusMessage} >Error: {statusMessage}</Alert>
+      <StatusBar/>
 
       {/** Create Sample Dialog */}
       <SampleDialog