67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import * as SecureStore from 'expo-secure-store';
|
|
import * as React from 'react';
|
|
import { Platform } from 'react-native';
|
|
|
|
type UseStateHook<T> = [ [ boolean, T | null ], (value: T | null) => void ];
|
|
|
|
function useAsyncState<T>(
|
|
initialValue: [ boolean, T | null ] = [ true, null ],
|
|
): UseStateHook<T> {
|
|
return React.useReducer(
|
|
(state: [ boolean, T | null ], action: T | null = null): [ boolean, T | null ] => [ false, action ],
|
|
initialValue
|
|
) as UseStateHook<T>;
|
|
}
|
|
|
|
export async function setStorageItemAsync(key: string, value: string | null) {
|
|
if (Platform.OS === 'web') {
|
|
try {
|
|
if (value === null) {
|
|
localStorage.removeItem( key );
|
|
} else {
|
|
localStorage.setItem( key, value );
|
|
}
|
|
} catch (e) {
|
|
console.error( 'Local storage is unavailable:', e );
|
|
}
|
|
} else {
|
|
if (value == null) {
|
|
await SecureStore.deleteItemAsync( key );
|
|
} else {
|
|
await SecureStore.setItemAsync( key, value );
|
|
}
|
|
}
|
|
}
|
|
|
|
export function useStorageState(key: string): UseStateHook<string> {
|
|
// Public
|
|
const [ state, setState ] = useAsyncState<string>();
|
|
|
|
// Get
|
|
React.useEffect( () => {
|
|
if (Platform.OS === 'web') {
|
|
try {
|
|
if (typeof localStorage !== 'undefined') {
|
|
setState( localStorage.getItem( key ) );
|
|
}
|
|
} catch (e) {
|
|
console.error( 'Local storage is unavailable:', e );
|
|
}
|
|
} else {
|
|
SecureStore.getItemAsync( key ).then( (value: string | null) => {
|
|
setState( value );
|
|
} );
|
|
}
|
|
}, [ key ] );
|
|
|
|
// Set
|
|
const setValue = React.useCallback(
|
|
(value: string | null) => {
|
|
setState( value );
|
|
setStorageItemAsync( key, value );
|
|
},
|
|
[ key ]
|
|
);
|
|
|
|
return [ state, setValue ];
|
|
}
|