@lucianojd/recoil-sync-next/dist/esm/history/useSyncHistoryNext.js

recoil-sync stores for Next.js

import { useRouter } from 'next/router';
import { useCallback } from 'react';
function getStorageKey(storeKey, itemsKey) {
    return `RecoilSyncHistory::${storeKey !== null && storeKey !== void 0 ? storeKey : 'recoil-sync-history-default-store'}::${itemsKey}`;
}
export function useSyncHistoryNext({ storeKey, serialize, deserialize, }) {
    const getHistoryKey = useCallback(() => {
        var _a, _b;
        return (_b = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.history) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.key;
    }, []);
    const saveItems = useCallback((itemsKey, values) => {
        const storageKey = getStorageKey(storeKey, itemsKey);
        if (Object.keys(values).length === 0) {
            sessionStorage.removeItem(storageKey);
            return;
        }
        sessionStorage.setItem(storageKey, serialize(values));
    }, [storeKey, serialize]);
    const loadItems = useCallback((itemsKey) => {
        const storageKey = getStorageKey(storeKey, itemsKey);
        const valuesString = sessionStorage.getItem(storageKey);
        if (!valuesString) {
            return {};
        }
        return deserialize(valuesString);
    }, [storeKey, deserialize]);
    const { events } = useRouter();
    const listenChangeHistory = useCallback((handler) => {
        events.on('routeChangeStart', handler);
        return () => {
            events.off('routeChangeStart', handler);
        };
    }, [events]);
    return {
        storeKey,
        getHistoryKey,
        saveItems,
        loadItems,
        listenChangeHistory,
    };
}