Refactor dark mode context (#1)

Author: adamwhp

resources/js/Components/Providers/DarkModeProvider.tsx renamed to resources/js/Contexts/DarkModeContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, PropsWithChildren, useContext, useEffect } from 'react'
 import { useLocalStorage } from 'react-use'
 
-type DarkModeProviderState = {
+type DarkModeState = {
   isDarkMode: boolean
   setDarkMode: (darkMode: boolean) => void
 }
@@ -11,7 +11,7 @@ const initialState = {
   setDarkMode: () => null,
 }
 
-const DarkModeProviderContext = createContext<DarkModeProviderState>(initialState)
+const DarkModeContext = createContext<DarkModeState>(initialState)
 
 export function DarkModeProvider({ children, ...props }: PropsWithChildren) {
   const [isDarkMode, setIsDarkMode] = useLocalStorage(
@@ -34,14 +34,14 @@ export function DarkModeProvider({ children, ...props }: PropsWithChildren) {
   }
 
   return (
-    <DarkModeProviderContext.Provider {...props} value={{ isDarkMode: !!isDarkMode, setDarkMode }}>
+    <DarkModeContext.Provider {...props} value={{ isDarkMode: !!isDarkMode, setDarkMode }}>
       {children}
-    </DarkModeProviderContext.Provider>
+    </DarkModeContext.Provider>
   )
 }
 
 export function useDarkMode() {
-  const context = useContext(DarkModeProviderContext)
+  const context = useContext(DarkModeContext)
 
   if (context === undefined) {
     throw new Error('useDarkMode must be used within a DarkModeProvider')

resources/js/Pages/Account/Partials/PreferencesForm.tsx

@@ -1,6 +1,5 @@
 import { IconFlagFR } from '@/Components/Icons/IconFlagFR'
 import { IconFlagGB } from '@/Components/Icons/IconFlagGB'
-import { useDarkMode } from '@/Components/Providers/DarkModeProvider'
 import { SettingsGrid } from '@/Components/SettingsGrid'
 import { Button } from '@/Components/UI/Button'
 import {
@@ -20,6 +19,7 @@ import {
   SelectValue,
 } from '@/Components/UI/Select'
 import { Switch } from '@/Components/UI/Switch'
+import { useDarkMode } from '@/Contexts/DarkModeContext'
 import { useFormValidation } from '@/Hooks/useFormValidation'
 import { useLocale } from '@/Hooks/useLocale'
 import { useToast } from '@/Hooks/useToast'

resources/js/app.tsx

@@ -1,17 +1,17 @@
-import { DarkModeProvider } from '@/Components/Providers/DarkModeProvider'
 import { SidebarProvider } from '@/Components/UI/Sidebar'
+import { DarkModeProvider } from '@/Contexts/DarkModeContext'
 import { DefaultLayout } from '@/Layouts/DefaultLayout'
 import { createInertiaApp } from '@inertiajs/react'
 import { LaravelReactI18nProvider } from 'laravel-react-i18n'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import '../css/app.css'
 import './bootstrap'
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
 
-type Page = ReactNode & { default: { layout: (page: ReactElement) => ReactElement } }
+type Page = ReactElement & { default: { layout: (page: ReactElement) => ReactElement } }
 
 createInertiaApp({
   title: (title) => `${title} - ${appName}`,