From dbad25814c9c499275810b6b6a0044c620b11cdd Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 24 Feb 2025 09:38:49 -0500
Subject: [PATCH] Reduced code duplication of ErrorBoundary, wrapped PageLayout
 with ErrorBoundary.

---
 src/PageRouter.tsx            | 30 +++++-------------------------
 src/components/PageLayout.tsx | 10 ++++++----
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/src/PageRouter.tsx b/src/PageRouter.tsx
index 33888dfe..ceff7bdb 100644
--- a/src/PageRouter.tsx
+++ b/src/PageRouter.tsx
@@ -17,31 +17,11 @@ export const PageRouter = () => {
   const { activePage } = useDevice();
   return (
     <ErrorBoundary FallbackComponent={ErrorPage}>
-      {activePage === "messages" && (
-        <ErrorBoundary FallbackComponent={ErrorPage}>
-          <MessagesPage />
-        </ErrorBoundary>
-      )}
-      {activePage === "map" && (
-        <ErrorBoundary FallbackComponent={ErrorPage}>
-          <MapPage />
-        </ErrorBoundary>
-      )}
-      {activePage === "config" && (
-        <ErrorBoundary FallbackComponent={ErrorPage}>
-          <ConfigPage />
-        </ErrorBoundary>
-      )}
-      {activePage === "channels" && (
-        <ErrorBoundary FallbackComponent={ErrorPage}>
-          <ChannelsPage />
-        </ErrorBoundary>
-      )}
-      {activePage === "nodes" && (
-        <ErrorBoundary FallbackComponent={ErrorPage}>
-          <NodesPage />
-        </ErrorBoundary>
-      )}
+      {activePage === "messages" && <MessagesPage />}
+      {activePage === "map" && <MapPage />}
+      {activePage === "config" && <ConfigPage />}
+      {activePage === "channels" && <ChannelsPage />}
+      {activePage === "nodes" && <NodesPage />}
     </ErrorBoundary>
   );
 };
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 63834845..f22d9c39 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -1,7 +1,9 @@
 import { cn } from "@app/core/utils/cn.ts";
 import { AlignLeftIcon, type LucideIcon } from "lucide-react";
-import Footer from "./UI/Footer.tsx";
-import { Spinner } from "./UI/Spinner.tsx";
+import Footer from "@components/UI/Footer.tsx";
+import { Spinner } from "@components/UI/Spinner.tsx";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorPage } from "@components/UI/ErrorPage.tsx";
 
 export interface PageLayoutProps {
   label: string;
@@ -23,7 +25,7 @@ export const PageLayout = ({
   children,
 }: PageLayoutProps) => {
   return (
-    <>
+    <ErrorBoundary FallbackComponent={ErrorPage}>
       <div className="relative flex h-full w-full flex-col">
         <div className="flex h-14 shrink-0 border-b-[0.5px]  border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
           <button
@@ -66,6 +68,6 @@ export const PageLayout = ({
           <Footer />
         </div>
       </div>
-    </>
+    </ErrorBoundary>
   );
 };