Merge pull request #10 from ilteoood/main

feat: use constants for theme and connection status
pinoramajs · Jul 20, 2024 · 4c966f7 · 4c966f7
2 parents 2350d74 + 7c797a1
commit 4c966f7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 23 deletions.
diff --git a/packages/pinorama-studio/src/components/title-bar/components/connection-status-button.tsx b/packages/pinorama-studio/src/components/title-bar/components/connection-status-button.tsx
@@ -16,7 +16,7 @@ import {
   PopoverTrigger
 } from "@/components/ui/popover"
 import { useAppConfig } from "@/contexts"
-import { type ConnectionStatus, usePinoramaConnection } from "@/hooks"
+import { ConnectionStatus, usePinoramaConnection } from "@/hooks"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { FormattedMessage } from "react-intl"
@@ -27,11 +27,11 @@ const formSchema = z.object({
 })
 
 const STATUS_COLOR: Record<ConnectionStatus, string> = {
-  disconnected: "bg-gray-500",
-  connecting: "bg-orange-500",
-  connected: "bg-green-500",
-  failed: "bg-red-500",
-  unknown: "bg-gray-500"
+  [ConnectionStatus.Disconnected]: "bg-gray-500",
+  [ConnectionStatus.Connecting]: "bg-orange-500",
+  [ConnectionStatus.Connected]: "bg-green-500",
+  [ConnectionStatus.Failed]: "bg-red-500",
+  [ConnectionStatus.Unknown]: "bg-gray-500"
 }
 
 export function ConnectionStatusButton() {

diff --git a/packages/pinorama-studio/src/components/title-bar/components/theme-toggle-button.tsx b/packages/pinorama-studio/src/components/title-bar/components/theme-toggle-button.tsx
@@ -5,7 +5,7 @@ import {
   TooltipPortal,
   TooltipTrigger
 } from "@/components/ui/tooltip"
-import { useTheme } from "@/contexts"
+import { Theme, useTheme } from "@/contexts"
 import { MoonStarIcon, SunIcon } from "lucide-react"
 import { FormattedMessage, useIntl } from "react-intl"
 
@@ -14,10 +14,10 @@ export function ThemeToggleButton() {
   const { theme, setTheme } = useTheme()
 
   const handleClick = () => {
-    setTheme(theme === "light" ? "dark" : "light")
+    setTheme(theme === Theme.Light ? Theme.Dark : Theme.Light)
   }
 
-  const Icon = theme === "dark" ? MoonStarIcon : SunIcon
+  const Icon = theme === Theme.Dark ? MoonStarIcon : SunIcon
 
   return (
     <Tooltip>

diff --git a/packages/pinorama-studio/src/contexts/theme-context.tsx b/packages/pinorama-studio/src/contexts/theme-context.tsx
@@ -13,16 +13,22 @@ type ThemeProviderState = {
   setTheme: (theme: Theme) => void
 }
 
+export const Theme = Object.freeze({
+  Dark: "dark",
+  Light: "light",
+  System: "system"
+}) satisfies Readonly<Record<Capitalize<Theme>, Theme>>
+
 const initialState: ThemeProviderState = {
-  theme: "system",
+  theme: Theme.System,
   setTheme: () => null
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 
 export function ThemeProvider({
   children,
-  defaultTheme = "dark",
+  defaultTheme = Theme.Dark,
   storageKey = "pinorama-theme",
   ...props
 }: ThemeProviderProps) {
@@ -33,13 +39,13 @@ export function ThemeProvider({
   useEffect(() => {
     const root = window.document.documentElement
 
-    root.classList.remove("light", "dark")
+    root.classList.remove(Theme.Light, Theme.Dark)
 
-    if (theme === "system") {
+    if (theme === Theme.System) {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
         .matches
-        ? "dark"
-        : "light"
+        ? Theme.Dark
+        : Theme.Light
 
       root.classList.add(systemTheme)
       return

diff --git a/packages/pinorama-studio/src/hooks/use-pinorama-connection.ts b/packages/pinorama-studio/src/hooks/use-pinorama-connection.ts
@@ -10,40 +10,49 @@ export type ConnectionStatus =
   | "failed"
   | "unknown"
 
+export const ConnectionStatus = Object.freeze({
+  Disconnected: "disconnected",
+  Connecting: "connecting",
+  Connected: "connected",
+  Failed: "failed",
+  Unknown: "unknown"
+}) satisfies Readonly<Record<Capitalize<ConnectionStatus>, ConnectionStatus>>
+
 export function usePinoramaConnection() {
   const appConfig = useAppConfig()
 
   const introspection = usePinoramaIntrospection()
   usePinoramaStyles()
 
-  const [connectionStatus, setConnectionStatus] =
-    useState<ConnectionStatus>("unknown")
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
+    ConnectionStatus.Unknown
+  )
 
   const connectionIntent = appConfig?.config.connectionIntent
 
   useEffect(() => {
     switch (true) {
       case connectionIntent === false:
-        setConnectionStatus("disconnected")
+        setConnectionStatus(ConnectionStatus.Disconnected)
         break
       case introspection.status === "pending" &&
         introspection.fetchStatus === "fetching":
-        setConnectionStatus("connecting")
+        setConnectionStatus(ConnectionStatus.Connecting)
         break
       case introspection.status === "success":
-        setConnectionStatus("connected")
+        setConnectionStatus(ConnectionStatus.Connected)
         break
       case introspection.status === "error":
-        setConnectionStatus("failed")
+        setConnectionStatus(ConnectionStatus.Failed)
         break
       default:
-        setConnectionStatus("unknown")
+        setConnectionStatus(ConnectionStatus.Unknown)
         break
     }
   }, [connectionIntent, introspection])
 
   const isConnected = useMemo(
-    () => connectionStatus === "connected",
+    () => connectionStatus === ConnectionStatus.Connected,
     [connectionStatus]
   )