refactor: clean up code PE-5161

src/Router.tsx

@@ -1,33 +1,21 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { GiftForm } from "./GiftForm";
-import { Page } from "./components/RouterPage";
+import { GiftPage } from "./pages/GiftPage";
+import { Page } from "./pages/Page";
 
 export function Router() {
   return (
     <BrowserRouter basename={`${import.meta.env.BASE_URL}`}>
       <Routes>
-        <Route
-          path="/gift"
-          element={
-            <Page
-              page={(errorCallback) => (
-                <GiftForm errorCallback={errorCallback} />
-              )}
-            />
-          }
-        />
+        <Route path="/gift" element={<GiftPage />} />
         <Route path="/redeem" element={<Page page={() => <p>TODO</p>} />} />
         <Route
           path="/"
           element={
             /* Put gift element at baseUrl for now */
-            <Page
-              page={(errorCallback) => (
-                <GiftForm errorCallback={errorCallback} />
-              )}
-            />
+            <GiftPage />
           }
         />
+        <Route path="*" element={<p>404</p>} />
       </Routes>
     </BrowserRouter>
   );

src/ArDriveLogo.tsx → src/components/ArDriveLogo.tsx

@@ -1,25 +1,7 @@
-import { JSX, useEffect, useState } from "react";
+import { useIsDarkMode } from "../hooks/useIsDarkMode";
 
-export function ArDriveLogo(): JSX.Element {
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
-    // Check the current theme using matchMedia
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
-
-  useEffect(() => {
-    // Update the theme on changes
-    const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsDarkMode(e.matches);
-    };
-
-    mediaQueryList.addEventListener("change", handleChange);
-
-    // Cleanup event listener on component unmount
-    return () => {
-      mediaQueryList.removeEventListener("change", handleChange);
-    };
-  }, []);
+export function ArDriveLogo() {
+  const isDarkMode = useIsDarkMode();
 
   return (
     <a href="https://ardrive.io">
@@ -28,7 +10,7 @@ export function ArDriveLogo(): JSX.Element {
   );
 }
 
-function ArDriveLogoLight(): JSX.Element {
+function ArDriveLogoLight() {
   return (
     <svg
       className="ardrive-logo"
@@ -95,7 +77,7 @@ function ArDriveLogoLight(): JSX.Element {
   );
 }
 
-function ArDriveLogoDark(): JSX.Element {
+function ArDriveLogoDark() {
   return (
     <svg
       className="ardrive-logo"

src/components/Footer.tsx

@@ -0,0 +1,9 @@
+import { termsOfServiceUrl } from "../constants";
+
+export function Footer() {
+  return (
+    <span id="version-footer">
+      <a href={termsOfServiceUrl}>Terms</a> | v{import.meta.env.PACKAGE_VERSION}
+    </span>
+  );
+}

src/components/LogoHeader.tsx

@@ -1,4 +1,4 @@
-import { ArDriveLogo } from "../ArDriveLogo";
+import { ArDriveLogo } from "./ArDriveLogo";
 
 interface LogoHeaderProps {
   errorMessage?: string;

src/hooks/useIsDarkMode.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+export function useIsDarkMode(): boolean {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
+    // Check the current theme using matchMedia
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+
+  useEffect(() => {
+    // Update the theme on changes
+    const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDarkMode(e.matches);
+    };
+
+    mediaQueryList.addEventListener("change", handleChange);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      mediaQueryList.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return isDarkMode;
+}

src/GiftForm.tsx → src/pages/GiftPage.tsx

@@ -3,21 +3,19 @@ import {
   defaultUSDAmount,
   termsOfServiceUrl,
   wincPerCredit,
-} from "./constants";
-import useDebounce from "./hooks/useDebounce";
-import "./GiftForm.css";
-import { useWincForOneGiB } from "./hooks/useWincForOneGiB";
-import { useCreditsForFiat } from "./hooks/useCreditsForFiat";
-import { getCheckoutSessionUrl } from "./utils/getCheckoutSessionUrl";
-
-interface GiftFormProps {
-  errorCallback: (message: string) => void;
-}
+} from "../constants";
+import useDebounce from "../hooks/useDebounce";
+import "./GiftPage.css";
+import { useWincForOneGiB } from "../hooks/useWincForOneGiB";
+import { useCreditsForFiat } from "../hooks/useCreditsForFiat";
+import { getCheckoutSessionUrl } from "../utils/getCheckoutSessionUrl";
+import { Page } from "./Page";
+import { ErrMsgCallbackAsProps } from "../types";
 
 const maxUSDAmount = 10000;
 const minUSDAmount = 5;
 
-export function GiftForm({ errorCallback }: GiftFormProps) {
+function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) {
   const [usdAmount, setUsdAmount] = useState<number>(defaultUSDAmount);
   const [recipientEmail, setRecipientEmail] = useState<string>("");
   const [isTermsAccepted, setTermsAccepted] = useState<boolean>(false);
@@ -206,3 +204,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
     </form>
   );
 }
+
+export const GiftPage = () => (
+  <Page page={(e) => <GiftForm errorCallback={e} />} />
+);

src/pages/Page.tsx

@@ -0,0 +1,21 @@
+import { useErrorMessage } from "../hooks/useErrorMessage";
+import { LogoHeader } from "../components/LogoHeader";
+import "./Page.css";
+import { ErrMsgCallback } from "../types";
+import { Footer } from "../components/Footer";
+
+interface PageProps {
+  page: (errorCallback: ErrMsgCallback) => JSX.Element;
+}
+
+export function Page({ page }: PageProps) {
+  const [errorMessage, errorCallback] = useErrorMessage();
+
+  return (
+    <>
+      <LogoHeader errorMessage={errorMessage} />
+      {page(errorCallback)}
+      <Footer />
+    </>
+  );
+}

src/types.ts

@@ -0,0 +1,4 @@
+export type ErrMsgCallback = (error: string) => void;
+export type ErrMsgCallbackAsProps = {
+  errorCallback: ErrMsgCallback;
+};