Issue/62 (#166)

* Updated to address issue 62 -- connecting the theme switch UI to their user setting in the db via the sublinks client api * Updated to address issue 62 load the initial theme value from the DB if present * Fix eslint issues * Updated layout to check for initial theme * Addressed type issues
sublinks · Jun 11, 2024 · 9e2d695 · 9e2d695
1 parent 9389522
commit 9e2d695
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -58,6 +58,7 @@ const RootLayout = async ({
   children: React.ReactNode
 }) => {
   const site = await getSite();
+  const initialTheme = site?.my_user?.local_user_view?.local_user?.theme ?? 'dark';
   const theme = {
     menu: {
       defaultProps: {
@@ -71,7 +72,7 @@ const RootLayout = async ({
   return (
     <UserProvider>
       <ThemeProvider value={theme}>
-        <html lang="en" className="h-full dark">
+        <html lang="en" className={`h-full ${initialTheme}`}>
           <body className={cx(inter.className, 'flex flex-col min-h-full bg-secondary dark:bg-secondary-dark')}>
             <Header site={site} />
             <BottomNav site={site} />

diff --git a/src/components/user-nav/index.tsx b/src/components/user-nav/index.tsx
@@ -12,14 +12,15 @@ import {
 import { MyUserInfo } from 'sublinks-js-client';
 
 import { UserContext } from '@/context/user';
-import { useTheme } from '@/hooks/use-theme';
+import { Theme, useTheme } from '@/hooks/use-theme';
 import { useClickOutside } from '@/hooks/use-click-outside';
 import ThemeSwitch from '../theme-switch';
 import { LinkText } from '../text';
 import Icon, { ICON_SIZE } from '../icon';
 
 const ProfileMenu = ({ myUser }: { myUser: MyUserInfo }) => {
-  const [theme, setTheme] = useTheme();
+  const initialTheme = myUser?.local_user_view?.local_user?.theme as Theme;
+  const [theme, setTheme] = useTheme(initialTheme);
   const [open, setOpen] = useState<boolean>(false);
 
   const ref = useClickOutside<HTMLUListElement>(() => open && setOpen(false));
@@ -64,21 +65,21 @@ const ProfileMenu = ({ myUser }: { myUser: MyUserInfo }) => {
   return (
     <div className="flex justify-center items-center">
       {false && ( // @todo: Change to check if a user is logged in
-      <Link href="/inbox">
-        <Icon IconType={BellIcon} size={ICON_SIZE.SMALL} title="Inbox icon" isInteractable />
-      </Link>
+        <Link href="/inbox">
+          <Icon IconType={BellIcon} size={ICON_SIZE.SMALL} title="Inbox icon" isInteractable />
+        </Link>
       )}
 
       {false && ( // @todo: Change to check if a user is a mod or an admin
-      <Link href="/reports">
-        <Icon IconType={ShieldExclamationIcon} size={ICON_SIZE.SMALL} title="Reports icon" isInteractable />
-      </Link>
+        <Link href="/reports">
+          <Icon IconType={ShieldExclamationIcon} size={ICON_SIZE.SMALL} title="Reports icon" isInteractable />
+        </Link>
       )}
 
       {false && ( // @todo: Change to check if applications are enabled and the user is an admin
-      <Link href="/registration_applications">
-        <Icon IconType={ClipboardIcon} size={ICON_SIZE.SMALL} title="Registration applications icon" isInteractable />
-      </Link>
+        <Link href="/registration_applications">
+          <Icon IconType={ClipboardIcon} size={ICON_SIZE.SMALL} title="Registration applications icon" isInteractable />
+        </Link>
       )}
 
       <Menu

diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
@@ -1,7 +1,20 @@
 'use client';
 
 import { useLocalStorage } from '@/hooks/use-local-storage';
+import { handleSaveUserSettings } from '@/utils/settings';
 
-export function useTheme() {
-  return useLocalStorage('theme', typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+export type Theme = 'light' | 'dark';
+
+export function useTheme(initialTheme: Theme): [Theme, (theme: Theme) => void] {
+  const originalTheme = initialTheme ?? (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+  const [theme, setTheme] = useLocalStorage('theme', originalTheme);
+
+  const saveTheme = async (newTheme: Theme) => {
+    setTheme(newTheme);
+
+    await handleSaveUserSettings({ theme: newTheme });
+  };
+
+  return [theme, saveTheme];
 }
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
@@ -0,0 +1,12 @@
+import { SaveUserSettings } from 'sublinks-js-client';
+
+import SublinksApi from './api-client/client';
+import logger from './logger';
+
+export const handleSaveUserSettings = async (userSettings: SaveUserSettings) => {
+  try {
+    await SublinksApi.Instance().Client().saveUserSettings(userSettings);
+  } catch (e) {
+    logger.error(`Failed to save user settings ${userSettings}`, e);
+  }
+};