Add not found page and incident message (#16)

src/lanco-incidents-app/src/pages/incident-detail/incident-detail.tsx

@@ -19,11 +19,11 @@ export function IncidentDetail() {
 
     useAppLayout(
         () => ({
-            pageBgStyle: "bg-white",
+            pageBgStyle: "bg-gray-100",
             headerLeft: (
                 <PageTitle
                     onBack={handleGoBack}
-                    showShareButton={webShare.enabled}
+                    showShareButton={webShare.enabled && incident != null}
                     onShare={handleShare}
                 >
                     {getTitle(incident)}
@@ -33,17 +33,23 @@ export function IncidentDetail() {
         [incident]
     );
 
+    if (incident == null) {
+        return (
+            <>
+                <div className="grid h-full grid-cols-1 place-content-center">
+                    <p className="px-10 text-center">
+                        This incident cannot be found or is no longer active.
+                    </p>
+                </div>
+            </>
+        );
+    }
+
     return <IncidentDetailContent incident={incident} />;
 }
 
 function getTitle(incident?: IncidentRecord | null): string {
-    const { type } = incident ?? {};
-
-    if (type) {
-        return type;
-    }
-
-    return "Incident";
+    return incident?.type ?? "Not Found";
 }
 
 function getShareData(incident?: IncidentRecord | null) {

src/lanco-incidents-app/src/pages/not-found.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import PageTitle from "components/page-title";
+import { useAppLayout } from "containers/app-layout";
+
+export function NotFound() {
+    const navigate = useNavigate();
+    const handleGoBack = () => navigate("/", { replace: true });
+
+    useAppLayout(
+        () => ({
+            pageBgStyle: "bg-white",
+            headerLeft: <PageTitle onBack={handleGoBack}>Not Found</PageTitle>,
+        }),
+        []
+    );
+
+    return (
+        <>
+            <div className="grid h-full grid-cols-1 place-content-center">
+                <p className="px-10 text-center">Page not found.</p>
+            </div>
+        </>
+    );
+}

src/lanco-incidents-app/src/router.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import Home from "pages/home";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, Navigate } from "react-router-dom";
 import Settings from "pages/settings";
 import { IncidentDetail } from "pages/incident-detail/incident-detail";
 import AppLayout from "containers/app-layout";
+import { NotFound } from "pages/not-found";
 
 export const router = createBrowserRouter([
     {
@@ -22,6 +23,8 @@ export const router = createBrowserRouter([
                 path: "incidents/:id",
                 element: <IncidentDetail />,
             },
+            { path: "/not-found", element: <NotFound /> },
+            { path: "*", element: <Navigate to="not-found" /> },
         ],
     },
 ]);