/**
 *
 * If active tab updates localStorage:
 * - At current tab, localStorage is updated.
 * - At current tab, "storage" event is emitted.
 * - At current tab, window receives "storage" event.
 * - At current tab, state is updated.
 *
 * If inactive tab updates localStorage:
 * - At inactive tab, localStorage is updated.
 * - At current tab, window receives "storage" event.
 * - At current tab, state is updated.
 *
 */
import { useCallback, useEffect, useMemo, useState } from "react";
export function useLocalStorage<T>(key: string) {
 const [state, set_state] = useState<T | null>(() => {
 const unparsed = localStorage.getItem(key);
 if (typeof unparsed === "string") {
 const parsed = JSON.parse(unparsed) as T;
 return parsed;
 }
 return null;
 });
 useEffect(() => {
 const listener = (e: StorageEvent) => {
 if (e.key === key) {
 if (typeof e.newValue === "string") {
 const parsed = JSON.parse(e.newValue) as T;
 set_state(parsed);
 }
 }
 };
 window.addEventListener("storage", listener);
 return () => {
 window.removeEventListener("storage", listener);
 };
 }, [key]);
 /**
 * @description dispatches an event so all instances gets updated.
 */
 const set_stored = useCallback(
 (value: T | null) => {
 const newValue = JSON.stringify(value);
 localStorage.setItem(key, newValue);
 const event = new StorageEvent("storage", { key, newValue });
 dispatchEvent(event);
 },
 [key],
 );
 return useMemo(
 () => [state, set_stored] as [T | null, (value: T | null) => void],
 [state, set_stored],
 );
}
export default useLocalStorage;

import useLocalStorage from "./useLocalStorage";
export interface Session {
 id: string;
 iss: string;
 aud: string;
 sub: string;
 iat: number;
 nbf: number;
 exp: number;
}
export const useSession = () => {
 return useLocalStorage<Session>("session");
};
export default useSession;