import { Dispatch, SetStateAction, useEffect, useState } from 'react';

export function usePersistedState<S = undefined> (key: string, defaultValue: S): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
    const [state, setState] = useState(
        () => {
            try {
                const item = localStorage.getItem(key);

                return JSON.parse(item || (String(defaultValue)));
            } catch (e) {
                console.warn('Failed to retrieve persisted value from store.', e);

                return defaultValue;
            }
        }
    );

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(state))
    }, [key, state]);

    return [ state, setState ];
}