refactor: remove error logic from router PE-5161

ardriveapp · Dec 8, 2023 · c6bd0a4 · c6bd0a4
1 parent f32c254
commit c6bd0a4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -1,36 +1,30 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { GiftForm } from "./GiftForm";
-import { RouterPage } from "./components/RouterPage";
-import { useErrorMessage } from "./hooks/useErrorMessage";
+import { Page } from "./components/RouterPage";
 
 export function Router() {
-  const [errorMessage, setErrorMessage] = useErrorMessage();
-
   return (
     <BrowserRouter basename={`${import.meta.env.BASE_URL}`}>
       <Routes>
         <Route
           path="/gift"
           element={
-            <RouterPage
-              page={<GiftForm errorCallback={setErrorMessage} />}
-              errorMessage={errorMessage}
+            <Page
+              page={(errorCallback) => (
+                <GiftForm errorCallback={errorCallback} />
+              )}
             />
           }
         />
-        <Route
-          path="/redeem"
-          element={
-            <RouterPage page={<p>TODO</p>} errorMessage={errorMessage} />
-          }
-        />
+        <Route path="/redeem" element={<Page page={() => <p>TODO</p>} />} />
         <Route
           path="/"
           element={
             /* Put gift element at baseUrl for now */
-            <RouterPage
-              page={<GiftForm errorCallback={setErrorMessage} />}
-              errorMessage={errorMessage}
+            <Page
+              page={(errorCallback) => (
+                <GiftForm errorCallback={errorCallback} />
+              )}
             />
           }
         />

diff --git a/src/components/RouterPage.tsx b/src/components/RouterPage.tsx
@@ -1,17 +1,19 @@
 import { termsOfServiceUrl } from "../constants";
+import { useErrorMessage } from "../hooks/useErrorMessage";
 import { LogoHeader } from "./LogoHeader";
 import "./RouterPage.css";
 
-interface RouterPageProps {
-  page: JSX.Element;
-  errorMessage?: string;
+interface PageProps {
+  page: (errorCallback: (message: string) => void) => JSX.Element;
 }
 
-export function RouterPage({ page, errorMessage }: RouterPageProps) {
+export function Page({ page }: PageProps) {
+  const [errorMessage, errorCallback] = useErrorMessage();
+
   return (
     <>
       <LogoHeader errorMessage={errorMessage} />
-      {page}
+      {page(errorCallback)}
       <span id="version-footer">
         <a href={termsOfServiceUrl}>Terms</a> | v
         {import.meta.env.PACKAGE_VERSION}