Separate Client Portal & Dashboard

frontend/dashboard/src/contexts/SettingsContext.tsx

@@ -0,0 +1,128 @@
+import { ReactNode, createContext } from 'react';
+// hooks
+import useLocalStorage from '../hooks/useLocalStorage';
+// utils
+import getColorPresets, { colorPresets, defaultPreset } from '../utils/getColorPresets';
+// config
+import { defaultSettings } from '../config';
+// @type
+import {
+  ThemeMode,
+  ThemeLayout,
+  ThemeDirection,
+  ThemeColorPresets,
+  SettingsContextProps,
+} from '../components/settings/type';
+
+// ----------------------------------------------------------------------
+
+const initialState: SettingsContextProps = {
+  ...defaultSettings,
+  onChangeMode: () => {},
+  onToggleMode: () => {},
+  onChangeDirection: () => {},
+  onChangeColor: () => {},
+  onToggleStretch: () => {},
+  onChangeLayout: () => {},
+  onResetSetting: () => {},
+  setColor: defaultPreset,
+  colorOption: [],
+};
+
+const SettingsContext = createContext(initialState);
+
+type SettingsProviderProps = {
+  children: ReactNode;
+};
+
+function SettingsProvider({ children }: SettingsProviderProps) {
+  const [settings, setSettings] = useLocalStorage('settings', {
+    themeMode: initialState.themeMode,
+    themeDirection: initialState.themeDirection,
+    themeColorPresets: initialState.themeColorPresets,
+    themeStretch: initialState.themeStretch,
+    themeLayout: initialState.themeLayout,
+  });
+
+  const onChangeMode = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSettings({
+      ...settings,
+      themeMode: (event.target as HTMLInputElement).value as ThemeMode,
+    });
+  };
+
+  const onToggleMode = () => {
+    setSettings({
+      ...settings,
+      themeMode: settings.themeMode === 'light' ? 'dark' : 'light',
+    });
+  };
+
+  const onChangeDirection = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSettings({
+      ...settings,
+      themeDirection: (event.target as HTMLInputElement).value as ThemeDirection,
+    });
+  };
+
+  const onChangeColor = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSettings({
+      ...settings,
+      themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets,
+    });
+  };
+
+  const onChangeLayout = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSettings({
+      ...settings,
+      themeLayout: (event.target as HTMLInputElement).value as ThemeLayout,
+    });
+  };
+
+  const onToggleStretch = () => {
+    setSettings({
+      ...settings,
+      themeStretch: !settings.themeStretch,
+    });
+  };
+
+  const onResetSetting = () => {
+    setSettings({
+      themeMode: initialState.themeMode,
+      themeLayout: initialState.themeLayout,
+      themeStretch: initialState.themeStretch,
+      themeDirection: initialState.themeDirection,
+      themeColorPresets: initialState.themeColorPresets,
+    });
+  };
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        ...settings,
+        // Mode
+        onChangeMode,
+        onToggleMode,
+        // Direction
+        onChangeDirection,
+        // Color
+        onChangeColor,
+        setColor: getColorPresets(settings.themeColorPresets),
+        colorOption: colorPresets.map((color) => ({
+          name: color.name,
+          value: color.main,
+        })),
+        // Stretch
+        onToggleStretch,
+        // Navbar Horizontal
+        onChangeLayout,
+        // Reset Setting
+        onResetSetting,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export { SettingsProvider, SettingsContext };