From f40ddc59f5cfc5b4d7b3dd3b10febddbfc298c3e Mon Sep 17 00:00:00 2001 From: Derek Sonnenberg Date: Fri, 8 Dec 2023 12:15:25 -0600 Subject: [PATCH] refactor: clean up code PE-5161 --- src/Router.tsx | 22 ++++----------- src/{ => components}/ArDriveLogo.tsx | 28 ++++--------------- src/components/Footer.tsx | 9 ++++++ src/components/LogoHeader.tsx | 2 +- src/components/RouterPage.tsx | 23 --------------- src/hooks/useIsDarkMode.ts | 25 +++++++++++++++++ src/{GiftForm.css => pages/GiftPage.css} | 0 src/{GiftForm.tsx => pages/GiftPage.tsx} | 24 ++++++++-------- .../RouterPage.css => pages/Page.css} | 0 src/pages/Page.tsx | 21 ++++++++++++++ src/types.ts | 4 +++ 11 files changed, 83 insertions(+), 75 deletions(-) rename src/{ => components}/ArDriveLogo.tsx (99%) create mode 100644 src/components/Footer.tsx delete mode 100644 src/components/RouterPage.tsx create mode 100644 src/hooks/useIsDarkMode.ts rename src/{GiftForm.css => pages/GiftPage.css} (100%) rename src/{GiftForm.tsx => pages/GiftPage.tsx} (90%) rename src/{components/RouterPage.css => pages/Page.css} (100%) create mode 100644 src/pages/Page.tsx create mode 100644 src/types.ts diff --git a/src/Router.tsx b/src/Router.tsx index cd6ae27..eee1585 100644 --- a/src/Router.tsx +++ b/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 ( - ( - - )} - /> - } - /> + } />

TODO

} />} /> ( - - )} - /> + } /> + 404

} /> ); diff --git a/src/ArDriveLogo.tsx b/src/components/ArDriveLogo.tsx similarity index 99% rename from src/ArDriveLogo.tsx rename to src/components/ArDriveLogo.tsx index b79a72d..4fb09f5 100644 --- a/src/ArDriveLogo.tsx +++ b/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(() => { - // 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 ( @@ -28,7 +10,7 @@ export function ArDriveLogo(): JSX.Element { ); } -function ArDriveLogoLight(): JSX.Element { +function ArDriveLogoLight() { return ( + Terms | v{import.meta.env.PACKAGE_VERSION} + + ); +} diff --git a/src/components/LogoHeader.tsx b/src/components/LogoHeader.tsx index 8feab7b..fb5c2db 100644 --- a/src/components/LogoHeader.tsx +++ b/src/components/LogoHeader.tsx @@ -1,4 +1,4 @@ -import { ArDriveLogo } from "../ArDriveLogo"; +import { ArDriveLogo } from "./ArDriveLogo"; interface LogoHeaderProps { errorMessage?: string; diff --git a/src/components/RouterPage.tsx b/src/components/RouterPage.tsx deleted file mode 100644 index 8c4c8b6..0000000 --- a/src/components/RouterPage.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { termsOfServiceUrl } from "../constants"; -import { useErrorMessage } from "../hooks/useErrorMessage"; -import { LogoHeader } from "./LogoHeader"; -import "./RouterPage.css"; - -interface PageProps { - page: (errorCallback: (message: string) => void) => JSX.Element; -} - -export function Page({ page }: PageProps) { - const [errorMessage, errorCallback] = useErrorMessage(); - - return ( - <> - - {page(errorCallback)} - - Terms | v - {import.meta.env.PACKAGE_VERSION} - - - ); -} diff --git a/src/hooks/useIsDarkMode.ts b/src/hooks/useIsDarkMode.ts new file mode 100644 index 0000000..f8bf37d --- /dev/null +++ b/src/hooks/useIsDarkMode.ts @@ -0,0 +1,25 @@ +import { useState, useEffect } from "react"; + +export function useIsDarkMode(): boolean { + const [isDarkMode, setIsDarkMode] = useState(() => { + // 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; +} diff --git a/src/GiftForm.css b/src/pages/GiftPage.css similarity index 100% rename from src/GiftForm.css rename to src/pages/GiftPage.css diff --git a/src/GiftForm.tsx b/src/pages/GiftPage.tsx similarity index 90% rename from src/GiftForm.tsx rename to src/pages/GiftPage.tsx index d5f4689..3b58c06 100644 --- a/src/GiftForm.tsx +++ b/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(defaultUSDAmount); const [recipientEmail, setRecipientEmail] = useState(""); const [isTermsAccepted, setTermsAccepted] = useState(false); @@ -206,3 +204,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) { ); } + +export const GiftPage = () => ( + } /> +); diff --git a/src/components/RouterPage.css b/src/pages/Page.css similarity index 100% rename from src/components/RouterPage.css rename to src/pages/Page.css diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx new file mode 100644 index 0000000..49579ac --- /dev/null +++ b/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 ( + <> + + {page(errorCallback)} +