servicepoint-tanks/tank-frontend/src/useStoredState.ts
2024-04-14 11:16:34 +02:00

37 lines
1.1 KiB
TypeScript

import {useState} from 'react';
export function useStoredState(storageKey: string, initialState: () => string): [string, ((newState: string) => void)] {
const [state, setState] = useState<string>(() => localStorage.getItem(storageKey) || initialState());
const setSavedState = (newState: string) => {
localStorage.setItem(storageKey, newState);
setState(newState);
};
return [state, setSavedState];
}
export function useStoredObjectState<T>(
storageKey: string,
initialState: () => T
): [T, (mutator: (oldState: T) => T) => void] {
const getInitialState = () => {
const localStorageJson = localStorage.getItem(storageKey);
if (localStorageJson !== null && localStorageJson !== '') {
return JSON.parse(localStorageJson) as T;
}
return initialState();
};
const [state, setState] = useState<T>(getInitialState);
const setSavedState = (mut: (oldState: T) => T) => {
const newState = mut(state);
localStorage.setItem(storageKey, JSON.stringify(newState));
setState(newState);
};
return [state, setSavedState];
}