jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: color scheme manager should use cookie and not session value (#1329)

Browse Source 
* fix: color scheme manager should use cookie and not session value

* fix: cookie saved for random path
This commit is contained in:
Meier Lukas
2024-10-19 10:27:31 +02:00
committed by GitHub
parent 7572634780
commit 799d6c5d4a
1 changed files with 12 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
View File

@@ -1,9 +1,8 @@
"use client"; "use client";
import type { PropsWithChildren } from "react"; import type { PropsWithChildren } from "react";
import { useState } from "react";
import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core"; import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
import { createTheme, DirectionProvider, isMantineColorScheme, MantineProvider } from "@mantine/core"; import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { clientApi } from "@homarr/api/client"; import { clientApi } from "@homarr/api/client";
@@ -32,27 +31,23 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
function useColorSchemeManager(): MantineColorSchemeManager { function useColorSchemeManager(): MantineColorSchemeManager {
const key = "homarr-color-scheme"; const key = "homarr-color-scheme";
const { data: session } = useSession(); const { data: session } = useSession();
const [sessionColorScheme, setSessionColorScheme] = useState<MantineColorScheme | undefined>(
session?.user.colorScheme, const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
); setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
};
const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({ const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
setSessionColorScheme(variables.colorScheme); updateCookieValue(variables.colorScheme);
}, },
}); });
let handleStorageEvent: (event: StorageEvent) => void;
return { return {
get: (defaultValue) => { get: (defaultValue) => {
if (typeof window === "undefined") { if (typeof window === "undefined") {
return defaultValue; return defaultValue;
} }
if (sessionColorScheme) {
return sessionColorScheme;
}
try { try {
const cookies = parseCookies(document.cookie); const cookies = parseCookies(document.cookie);
return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue; return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
@@ -67,30 +62,13 @@ function useColorSchemeManager(): MantineColorSchemeManager {
if (session) { if (session) {
mutateColorScheme({ colorScheme: value }); mutateColorScheme({ colorScheme: value });
} }
setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate() }); updateCookieValue(value);
window.localStorage.setItem(key, value);
} catch (error) { } catch (error) {
console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.", error); console.warn("[@mantine/core] Color scheme manager was unable to save color scheme.", error);
} }
}, },
subscribe: () => undefined,
subscribe: (onUpdate) => { unsubscribe: () => undefined,
handleStorageEvent = (event) => { clear: () => undefined,
if (session) return; // Ignore updates when session is available as we are using session color scheme
if (event.storageArea === window.localStorage && event.key === key && isMantineColorScheme(event.newValue)) {
onUpdate(event.newValue);
}
};
window.addEventListener("storage", handleStorageEvent);
},
unsubscribe: () => {
window.removeEventListener("storage", handleStorageEvent);
},
clear: () => {
window.localStorage.removeItem(key);
},
}; };
} }