46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useSyncExternalStore } from "react";
|
|
|
|
import { PAYROLL_DESKTOP_WIDE_MODE_STORAGE_PREFIX } from "@/lib/payroll-admin";
|
|
|
|
const PAYROLL_DESKTOP_WIDE_MODE_EVENT = "payroll-desktop-wide-mode-change";
|
|
|
|
function storageKey(userId: number): string {
|
|
return `${PAYROLL_DESKTOP_WIDE_MODE_STORAGE_PREFIX}.${userId}`;
|
|
}
|
|
|
|
export function usePayrollDesktopWideMode(userId?: number | null) {
|
|
const subscribe = useCallback((notify: () => void) => {
|
|
if (!userId) return () => undefined;
|
|
const key = storageKey(userId);
|
|
const handleStorage = (event: StorageEvent) => {
|
|
if (event.key === key) notify();
|
|
};
|
|
window.addEventListener("storage", handleStorage);
|
|
window.addEventListener(PAYROLL_DESKTOP_WIDE_MODE_EVENT, notify);
|
|
return () => {
|
|
window.removeEventListener("storage", handleStorage);
|
|
window.removeEventListener(PAYROLL_DESKTOP_WIDE_MODE_EVENT, notify);
|
|
};
|
|
}, [userId]);
|
|
|
|
const getSnapshot = useCallback(() => (
|
|
userId ? window.localStorage.getItem(storageKey(userId)) === "1" : false
|
|
), [userId]);
|
|
|
|
const desktopWideMode = useSyncExternalStore(
|
|
subscribe,
|
|
getSnapshot,
|
|
() => false,
|
|
);
|
|
|
|
const changeDesktopWideMode = useCallback((enabled: boolean) => {
|
|
if (!userId) return;
|
|
window.localStorage.setItem(storageKey(userId), enabled ? "1" : "0");
|
|
window.dispatchEvent(new Event(PAYROLL_DESKTOP_WIDE_MODE_EVENT));
|
|
}, [userId]);
|
|
|
|
return [desktopWideMode, changeDesktopWideMode] as const;
|
|
}
|