Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-27 00:40:58 +01:00
Code Issues 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";
import type { PropsWithChildren } from "react";
import { useState } from "react";
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 { clientApi } from "@homarr/api/client";
@@ -32,27 +31,23 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
function useColorSchemeManager(): MantineColorSchemeManager {
const key = "homarr-color-scheme";
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({
onSuccess: (_, variables) => {
setSessionColorScheme(variables.colorScheme);
updateCookieValue(variables.colorScheme);
},
});
let handleStorageEvent: (event: StorageEvent) => void;
return {
get: (defaultValue) => {
if (typeof window === "undefined") {
return defaultValue;
}
if (sessionColorScheme) {
return sessionColorScheme;
}
try {
const cookies = parseCookies(document.cookie);
return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
@@ -67,30 +62,13 @@ function useColorSchemeManager(): MantineColorSchemeManager {
if (session) {
mutateColorScheme({ colorScheme: value });
}
setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate() });
window.localStorage.setItem(key, value);
updateCookieValue(value);
} 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: (onUpdate) => {
handleStorageEvent = (event) => {
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);
},
subscribe: () => undefined,
unsubscribe: () => undefined,
clear: () => undefined,
};
}