oddbit · DennisAlund · Jul 31, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/functions/package-lock.json b/functions/package-lock.json
diff --git a/functions/package.json b/functions/package.json
@@ -19,6 +19,7 @@
     "node": "18"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "firebase-admin": "^12.1.1",
@@ -27,6 +28,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/axios": "^0.14.0",
     "@types/node": "^18.19.34",
     "@types/sanitize-html": "^2.11.0",
     "@types/sharp": "^0.32.0",

diff --git a/functions/src/models/TanamUser.ts b/functions/src/models/TanamUser.ts
@@ -3,22 +3,25 @@ export type TanamRole = "publisher" | "admin";
 export interface ITanamUser<TimestampType> {
   role?: TanamRole;
   name?: string;
+  colorMode: "dark" | "light";
   createdAt: TimestampType;
   updatedAt: TimestampType;
 }
 
 export abstract class TanamUser<TimestampType, FieldValueType> {
   constructor(id: string, json: ITanamUser<TimestampType>) {
     this.id = id;
-    this.name = json.name;
     this.role = json.role ?? "publisher";
+    this.name = json.name;
+    this.colorMode = json.colorMode ?? "light";
     this.createdAt = json.createdAt;
     this.updatedAt = json.updatedAt;
   }
 
   public readonly id: string;
   public role: TanamRole;
   public name?: string;
+  public colorMode: "dark" | "light";
   public readonly createdAt: TimestampType;
   public readonly updatedAt: TimestampType;
 
@@ -28,6 +31,7 @@ export abstract class TanamUser<TimestampType, FieldValueType> {
     return {
       role: this.role,
       name: this.name,
+      colorMode: this.colorMode,
       createdAt: this.createdAt ?? this.getServerTimestamp(),
       updatedAt: this.getServerTimestamp(),
     };

diff --git a/functions/src/models/TanamUserAdmin.ts b/functions/src/models/TanamUserAdmin.ts
@@ -20,6 +20,7 @@ export class TanamUserAdmin extends TanamUser<Timestamp, FieldValue> {
     return new TanamUserAdmin(snap.id, {
       role: data.role,
       name: data.name,
+      colorMode: data.colorMode,
       createdAt: data.createdAt || Timestamp.now(),
       updatedAt: data.updatedAt || Timestamp.now(),
     });

diff --git a/functions/src/triggers/users.ts b/functions/src/triggers/users.ts
@@ -34,6 +34,7 @@ export const tanamNewUserInit = onDocumentCreated("tanam-users/{docId}", async (
     ...docData,
     name: firebaseUser.displayName,
     role: existingDocs.size === 1 ? "admin" : "publisher",
+    colorMode: "light",
     createdAt: Timestamp.now(),
     updatedAt: Timestamp.now(),
   });

diff --git a/hosting/src/components/Header/DarkModeSwitcher.tsx b/hosting/src/components/Header/DarkModeSwitcher.tsx
@@ -1,20 +1,25 @@
-import useColorMode from "@/hooks/useColorMode";
 import {Switcher} from "@/components/Form/Switcher";
+import {useAuthentication} from "@/hooks/useAuthentication";
+import useColorMode from "@/hooks/useColorMode";
+import {useTanamUser} from "@/hooks/useTanamUser";
+import {useEffect} from "react";
 
 const DarkModeSwitcher = () => {
   const [colorMode, setColorMode] = useColorMode();
+  const {authUser} = useAuthentication();
+  const {tanamUser, saveColorMode} = useTanamUser(authUser?.uid);
 
-  const handleColorModeToggle = (checked: boolean) => {
-    if (typeof setColorMode === "function") {
-      setColorMode(checked ? "dark" : "light");
+  useEffect(() => {
+    if (typeof setColorMode === "function" && !!tanamUser?.colorMode) {
+      setColorMode(tanamUser.colorMode);
     }
-  };
+  }, [tanamUser]);
 
   return (
     <Switcher
       style="default"
       defaultChecked={colorMode === "dark"}
-      onChange={handleColorModeToggle}
+      onChange={async (checked) => await saveColorMode(checked ? "dark" : "light")}
       onIcon="i-ri-moon-clear-fill text-white"
       offIcon="i-ri-sun-line"
     />

diff --git a/hosting/src/hooks/useTanamUser.tsx b/hosting/src/hooks/useTanamUser.tsx
@@ -1,28 +1,23 @@
 import {TanamUserClient} from "@/models/TanamUserClient";
 import {UserNotification} from "@/models/UserNotification";
 import {firestore, storage} from "@/plugins/firebase";
-import {doc, onSnapshot} from "firebase/firestore";
+import {doc, onSnapshot, updateDoc} from "firebase/firestore";
 import {getDownloadURL, ref} from "firebase/storage";
 import {useEffect, useState} from "react";
 
-interface UseTanamDocumentsResult {
-  data: TanamUserClient | null;
-  error: UserNotification | null;
-}
-
 /**
  * Hook to get a Tanam user document from Firestore
  *
  * @param {string?} uid User ID
  * @return {UseTanamDocumentsResult} Hook for documents subscription
  */
-export function useTanamUser(uid?: string): UseTanamDocumentsResult {
-  const [data, setData] = useState<TanamUserClient | null>(null);
+export function useTanamUser(uid?: string) {
+  const [tanamUser, setTanamUser] = useState<TanamUserClient | null>(null);
   const [error, setError] = useState<UserNotification | null>(null);
 
   useEffect(() => {
     if (!uid) {
-      setData(null);
+      setTanamUser(null);
       return;
     }
 
@@ -35,7 +30,7 @@ export function useTanamUser(uid?: string): UseTanamDocumentsResult {
         }
 
         const tanamUser = TanamUserClient.fromFirestore(snapshot);
-        setData(tanamUser);
+        setTanamUser(tanamUser);
       },
       (err) => {
         setError(new UserNotification("error", "Error fetching user", err.message));
@@ -46,7 +41,21 @@ export function useTanamUser(uid?: string): UseTanamDocumentsResult {
     return () => unsubscribe();
   }, [uid]);
 
-  return {data, error};
+  async function saveColorMode(colorMode: "dark" | "light") {
+    if (!uid) {
+      return;
+    }
+
+    try {
+      const docRef = doc(firestore, `tanam-users`, uid);
+      return updateDoc(docRef, {colorMode});
+    } catch (error) {
+      const typedError = error as Error;
+      setError(new UserNotification("error", "Failed to set color mode to " + colorMode, typedError.message));
+    }
+  }
+
+  return {tanamUser, saveColorMode, error};
 }
 
 interface UseProfileImageResult {

diff --git a/hosting/src/models/TanamUserClient.ts b/hosting/src/models/TanamUserClient.ts
@@ -19,6 +19,7 @@ export class TanamUserClient extends TanamUser<Timestamp, FieldValue> {
     return new TanamUserClient(snap.id, {
       role: data.role,
       name: data.name,
+      colorMode: data.colorMode,
       createdAt: data.createdAt || Timestamp.now(),
       updatedAt: data.updatedAt || Timestamp.now(),
     });