refac[frontend]: split darkModeToggle component

Author: SharzyL

frontend/components/darkModeToggle.tsx

@@ -0,0 +1,49 @@
+import React, { JSX } from "react"
+import { computerIcon, moonIcon, sunIcon } from "../icons.js"
+import { Tooltip, TooltipProps } from "@heroui/react"
+
+export type DarkMode = "dark" | "light" | "system"
+
+interface MyComponentProps extends TooltipProps {
+  mode: DarkMode
+  onModeChange: (newMode: DarkMode) => void
+}
+
+const icons: { name: DarkMode; icon: JSX.Element }[] = [
+  { name: "system", icon: computerIcon },
+  { name: "dark", icon: moonIcon },
+  { name: "light", icon: sunIcon },
+]
+
+export function defaultDarkMode(): DarkMode {
+  const storedDarkModeSelect = localStorage.getItem("darkModeSelect")
+
+  if (storedDarkModeSelect !== null && ["light", "dark", "system"].includes(storedDarkModeSelect)) {
+    return storedDarkModeSelect as DarkMode
+  } else {
+    return "system"
+  }
+}
+
+export function shouldBeDark(mode: DarkMode): boolean {
+  // when matchMedia not available (e.g. in tests), set to light mode
+  const systemDark = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  return mode === "system" ? systemDark : mode === "dark"
+}
+
+export function DarkModeToggle({ mode, onModeChange, ...rest }: MyComponentProps) {
+  return (
+    <Tooltip content="Toggle Dark Mode" {...rest}>
+      <span
+        className="absolute right-0"
+        data-testid="pastebin-darkmode-toggle"
+        onClick={() => {
+          const curModeIdx = icons.findIndex(({ name }) => name === mode)
+          onModeChange(icons[(curModeIdx + 1) % icons.length].name)
+        }}
+      >
+        {icons.find(({ name }) => name === mode)!.icon}
+      </span>
+    </Tooltip>
+  )
+}

frontend/pb.tsx

@@ -20,11 +20,12 @@ import {
   ModalContent,
   ModalHeader,
   ModalFooter,
-  Tooltip,
 } from "@heroui/react"
 
 import { PasteResponse, parsePath, parseFilenameFromContentDisposition } from "../src/shared.js"
 
+import { DarkModeToggle, DarkMode, defaultDarkMode, shouldBeDark } from "./components/darkModeToggle.js"
+
 import {
   verifyExpiration,
   verifyManageUrl,
@@ -36,20 +37,9 @@ import {
 } from "./utils.js"
 
 import "./style.css"
-import { computerIcon, moonIcon, sunIcon } from "./icons.js"
 
 type EditKind = "edit" | "file"
 type UploadKind = "short" | "long" | "custom" | "manage"
-type DarkMode = "dark" | "light" | "system"
-
-function defaultDarkMode(): DarkMode {
-  const storedDarkModeSelect = localStorage.getItem("darkModeSelect")
-  if (storedDarkModeSelect !== null && ["light", "dark", "system"].includes(storedDarkModeSelect)) {
-    return storedDarkModeSelect as DarkMode
-  } else {
-    return "system"
-  }
-}
 
 export function PasteBin() {
   const [editKind, setEditKind] = useState<EditKind>("edit")
@@ -72,10 +62,6 @@ export function PasteBin() {
 
   const [darkModeSelect, setDarkModeSelect] = useState<DarkMode>(defaultDarkMode())
 
-  // when matchMedia not available (e.g. in tests), set to light mode
-  const systemDark = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  const isDark = darkModeSelect === "system" ? systemDark : darkModeSelect === "dark"
-
   function showModal(err: string, title: string) {
     setModalErrMsg(err)
     setModalErrTitle(title)
@@ -242,35 +228,10 @@ export function PasteBin() {
     }
   }
 
-  const iconsMap = new Map([
-    ["system", computerIcon],
-    ["dark", moonIcon],
-    ["light", sunIcon],
-  ])
-  const toggleDarkModeButton = (
-    <Tooltip content="Toggle Dark Mode">
-      <span
-        className="absolute right-0"
-        data-testid="pastebin-darkmode-toggle"
-        onClick={() => {
-          if (darkModeSelect === "system") {
-            setDarkModeSelect("dark")
-          } else if (darkModeSelect === "dark") {
-            setDarkModeSelect("light")
-          } else {
-            setDarkModeSelect("system")
-          }
-        }}
-      >
-        {iconsMap.get(darkModeSelect)}
-      </span>
-    </Tooltip>
-  )
-
   const info = (
     <div className="mx-4 lg:mx-0">
       <h1 className="text-3xl mt-8 mb-4 relative">
-        {INDEX_PAGE_TITLE} {toggleDarkModeButton}
+        {INDEX_PAGE_TITLE} <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} />
       </h1>
       <p className="my-2">This is an open source pastebin deployed on Cloudflare Workers. </p>
       <p className="my-2">
@@ -538,7 +499,7 @@ export function PasteBin() {
       data-testid="pastebin-main"
       className={
         "flex flex-col items-center min-h-screen font-sans bg-background text-foreground" +
-        (isDark ? " dark" : " light")
+        (shouldBeDark(darkModeSelect) ? " dark" : " light")
       }
     >
       <div className="grow w-full max-w-[64rem]">