diff --git a/functions/package-lock.json b/functions/package-lock.json index dbcd6a00..33c09ea6 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "functions", "dependencies": { + "axios": "^1.7.2", "dotenv": "^16.4.5", "express": "^4.19.2", "firebase-admin": "^12.1.1", @@ -14,6 +15,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", @@ -2096,6 +2098,17 @@ "node": ">= 10" } }, + "node_modules/@types/axios": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz", + "integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==", + "deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!", + "dev": true, + "license": "MIT", + "dependencies": { + "axios": "*" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2864,8 +2877,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "optional": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/available-typed-arrays": { "version": "1.0.7", @@ -2882,6 +2894,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz", @@ -3397,7 +3420,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "optional": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -3655,7 +3677,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "optional": true, "engines": { "node": ">=0.4.0" } @@ -4894,6 +4915,26 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -4903,6 +4944,20 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -7706,6 +7761,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", diff --git a/functions/package.json b/functions/package.json index 10e26aaa..4e9493a2 100644 --- 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 index ae372bf6..35f2f27f 100644 --- a/functions/src/models/TanamUser.ts +++ b/functions/src/models/TanamUser.ts @@ -3,6 +3,7 @@ export type TanamRole = "publisher" | "admin"; export interface ITanamUser { role?: TanamRole; name?: string; + colorMode: "dark" | "light"; createdAt: TimestampType; updatedAt: TimestampType; } @@ -10,8 +11,9 @@ export interface ITanamUser { export abstract class TanamUser { constructor(id: string, json: ITanamUser) { 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; } @@ -19,6 +21,7 @@ export abstract class TanamUser { 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 { 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 index 1793b4e0..3d581b1a 100644 --- a/functions/src/models/TanamUserAdmin.ts +++ b/functions/src/models/TanamUserAdmin.ts @@ -20,6 +20,7 @@ export class TanamUserAdmin extends TanamUser { 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 index 5d65e7a0..817cdfab 100644 --- 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 index 529584af..4204218e 100644 --- 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 ( 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 index abcee137..d7a0abaa 100644 --- 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(null); +export function useTanamUser(uid?: string) { + const [tanamUser, setTanamUser] = useState(null); const [error, setError] = useState(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 index 2f17b916..25ac4b38 100644 --- a/hosting/src/models/TanamUserClient.ts +++ b/hosting/src/models/TanamUserClient.ts @@ -19,6 +19,7 @@ export class TanamUserClient extends TanamUser { return new TanamUserClient(snap.id, { role: data.role, name: data.name, + colorMode: data.colorMode, createdAt: data.createdAt || Timestamp.now(), updatedAt: data.updatedAt || Timestamp.now(), });