Update usage of useLocalStorage

src/App/index.tsx

@@ -33,7 +33,7 @@ import {
 } from '#generated/types/graphql';
 import useThrottledValue from '#hooks/useThrottledValue';
 import { getWindowSize } from '#utils/common';
-import { setToStorage } from '#utils/localStorage';
+import { defaultConfigValue } from '#utils/constants';
 
 import wrappedRoutes, { unwrappedRoutes } from './routes';
 
@@ -111,13 +111,11 @@ function App() {
     const [userAuth, setUserAuth] = useState<UserAuth>();
     const [size, setSize] = useState<SizeContextProps>(getWindowSize);
     const [ready, setReady] = useState(false);
-    const [storageState, setStorageState] = useState<LocalStorageContextProps['storageState']>({});
-
-    useEffect(() => {
-        Object.keys(storageState).forEach((key) => {
-            setToStorage(key, storageState[key].value);
-        });
-    }, [storageState]);
+    const [storageState, setStorageState] = useState<LocalStorageContextProps['storageState']>({
+        'timur-config': {
+            defaultValue: defaultConfigValue,
+        },
+    });
 
     const debouncedSize = useThrottledValue(size);
 

src/App/routes/PageError/styles.module.css

@@ -46,8 +46,8 @@
         .footer {
             display: flex;
             align-items: center;
-            justify-content: space-between;
             flex-wrap: wrap;
+            justify-content: space-between;
             gap: var(--spacing-md);
 
             .actions {

src/components/Page/index.tsx

@@ -23,11 +23,6 @@ import SizeContext from '#contexts/size';
 import useDebouncedValue from '#hooks/useDebouncedValue';
 import useLocalStorage from '#hooks/useLocalStorage';
 import useSetFieldValue from '#hooks/useSetFieldValue';
-import {
-    defaultConfigValue,
-    KEY_CONFIG_STORAGE,
-} from '#utils/constants';
-import { ConfigStorage } from '#utils/types';
 
 import styles from './styles.module.css';
 
@@ -62,17 +57,14 @@ function Page(props: Props) {
 
     const { width } = useContext(SizeContext);
 
-    const [storedState, setStoredState] = useLocalStorage<ConfigStorage>(
-        KEY_CONFIG_STORAGE,
-        defaultConfigValue,
-    );
+    const [storedConfig, setStoredConfig] = useLocalStorage('timur-config');
 
     const {
         startSidebarShown,
         endSidebarShown,
-    } = storedState;
+    } = storedConfig;
 
-    const setFieldValue = useSetFieldValue(setStoredState);
+    const setFieldValue = useSetFieldValue(setStoredConfig);
 
     const setSidebarShown = useCallback(
         (newValue: boolean) => setFieldValue(newValue, 'startSidebarShown'),

src/contexts/localStorage.tsx

@@ -1,19 +1,28 @@
 import { createContext } from 'react';
 
-export type StoredValue<VALUE = unknown> = {
-    timestamp: number;
-    value: VALUE;
+import { PutNull } from '#utils/common';
+import { defaultConfigValue } from '#utils/constants';
+import { ConfigStorage } from '#utils/types';
+
+export type StoredValue<VALUE extends object> = {
+    value?: PutNull<VALUE>;
+    defaultValue: VALUE;
+};
+export type StorageState = {
+    'timur-config': StoredValue<ConfigStorage>,
 };
-type StorageState<VALUE = unknown> = Record<string, StoredValue<VALUE>>;
 
 export interface LocalStorageContextProps {
     storageState: StorageState;
     setStorageState: React.Dispatch<React.SetStateAction<StorageState>>;
 }
 
-// FIXME: replace this with simpler alternative
 const LocalStorageContext = createContext<LocalStorageContextProps>({
-    storageState: {},
+    storageState: {
+        'timur-config': {
+            defaultValue: defaultConfigValue,
+        },
+    },
     setStorageState: () => {
         // eslint-disable-next-line no-console
         console.error('LocalStorageContext::setStorage() called without a provider');

src/hooks/useLocalStorage.ts

@@ -2,65 +2,87 @@ import {
     useCallback,
     useContext,
     useEffect,
-    useState,
+    useMemo,
 } from 'react';
+import { isDefined } from '@togglecorp/fujs';
 
-import LocalStorageContext, { StoredValue } from '#contexts/localStorage';
-import { isCallable } from '#utils/common';
-import { getFromStorage } from '#utils/localStorage';
+import LocalStorageContext, { StorageState } from '#contexts/localStorage';
+import {
+    isCallable,
+    putNull,
+    putUndefined,
+} from '#utils/common';
+import {
+    getFromStorage,
+    setToStorage,
+} from '#utils/localStorage';
 
-import useDebouncedValue from './useDebouncedValue';
+function useLocalStorage<K extends keyof StorageState>(key: K) {
+    const {
+        storageState,
+        setStorageState,
+    } = useContext(LocalStorageContext);
 
-function useLocalStorage<T>(
-    key: string,
-    defaultValue: T,
-    debounce = 200,
-) {
-    const [value, setValue] = useState<StoredValue<T>>(
-        () => {
-            const fromStorage = getFromStorage<T>(key);
+    type T = StorageState[K];
+
+    const hasReadValue = isDefined(storageState[key].value);
 
-            return {
-                timestamp: new Date().getTime(),
-                value: fromStorage ?? defaultValue,
-            };
+    useEffect(
+        () => {
+            if (hasReadValue) {
+                return;
+            }
+            const val = getFromStorage<T['value']>(key);
+            setStorageState((oldValue) => ({
+                ...oldValue,
+                [key]: {
+                    ...oldValue[key],
+                    value: val,
+                },
+            }));
         },
+        [key, hasReadValue, setStorageState],
     );
 
-    const { storageState, setStorageState } = useContext(LocalStorageContext);
-    const debouncedValue = useDebouncedValue(value, debounce);
+    const setValue: React.Dispatch<React.SetStateAction<NonNullable<T['value']>>> = useCallback(
+        (newValue) => {
+            setStorageState((oldValue) => {
+                const oldValueValue = oldValue[key].value;
+                const oldValueDefaultValue = oldValue[key].defaultValue;
 
-    useEffect(() => {
-        if (!storageState[key]) {
-            return;
-        }
+                const resolvedValue = isCallable(newValue)
+                    ? newValue(oldValueValue ?? oldValueDefaultValue)
+                    : newValue;
 
-        if (storageState[key].timestamp > value.timestamp) {
-            setValue(storageState[key] as StoredValue<T>);
-        }
-    }, [storageState, key, value]);
+                setToStorage(key, putNull(resolvedValue));
 
-    useEffect(() => {
-        setStorageState((oldStorageValue) => ({
-            ...oldStorageValue,
-            [key]: debouncedValue,
-        }));
-    }, [debouncedValue, key, setStorageState]);
+                return {
+                    ...oldValue,
+                    [key]: {
+                        ...oldValue[key],
+                        value: resolvedValue,
+                    },
+                } satisfies StorageState;
+            });
+        },
+        [key, setStorageState],
+    );
 
-    const setValueSafe = useCallback((newValue: T | ((v: T) => T)) => {
-        setValue((oldValue) => {
-            const resolvedValue = isCallable(newValue)
-                ? newValue(oldValue.value)
-                : newValue;
+    const { value } = storageState[key];
+    const { defaultValue } = storageState[key];
 
-            return {
-                timestamp: new Date().getTime(),
-                value: resolvedValue,
-            } satisfies StoredValue<T>;
-        });
-    }, []);
+    const finalValue = useMemo(
+        () => putUndefined({
+            ...defaultValue,
+            ...value,
+        }),
+        [defaultValue, value],
+    );
 
-    return [value.value, setValueSafe] as const;
+    return [
+        finalValue,
+        setValue,
+    ] as const;
 }
 
 export default useLocalStorage;

src/index.css

@@ -142,10 +142,10 @@ body {
     overflow-x: hidden;
     color: var(--color-text);
     font-family: var(--font-family-sans-serif);
+    font-size: var(--font-size-md);
     font-weight: var(--font-weight-normal);
     font-style: normal;
     font-optical-sizing: auto;
-    font-size: var(--font-size-md);
 
     @media screen {
         margin: 0;

src/utils/common.ts

@@ -107,7 +107,7 @@ export function getDurationNumber(value: string | undefined) {
     }
     // decimal
     if (value.match(/^\d{0,2}\.\d{1,2}$/)) {
-        return Number(value);
+        return Math.round(Number(value) * 60);
     }
     // hh:mm
     // hh:m
@@ -332,3 +332,35 @@ export function groupListByAttributes<LIST_ITEM, ATTRIBUTE>(
 
     return groupedItems;
 }
+
+export type PutNull<T extends object> = {
+    [key in keyof T]: T[key] extends undefined ? null : T[key];
+}
+export function putNull<T extends object>(value: T) {
+    type PartialWithNull<Q> = {
+      [P in keyof Q]: Q[P] | null;
+    };
+    const copy: PartialWithNull<T> = { ...value };
+    Object.keys(copy).forEach((key) => {
+        const safeKey = key as keyof T;
+        if (copy[safeKey] === undefined) {
+            copy[safeKey] = null;
+        }
+    });
+
+    return copy as PutNull<T>;
+}
+export type PutUndefined<T extends object> = {
+    [key in keyof T]: T[key] extends null ? undefined : T[key];
+}
+export function putUndefined<T extends object>(value: T) {
+    const copy: Partial<T> = { ...value };
+    Object.keys(copy).forEach((key) => {
+        const safeKey = key as keyof T;
+        if (copy[safeKey] === null) {
+            copy[safeKey] = undefined;
+        }
+    });
+
+    return copy as PutUndefined<T>;
+}

src/utils/constants.ts

@@ -3,8 +3,6 @@ import {
     NumericOption,
 } from './types';
 
-export const KEY_CONFIG_STORAGE = 'timur-config';
-
 export const defaultConfigValue: ConfigStorage = {
     defaultTaskType: undefined,
     defaultTaskStatus: 'DONE',

src/utils/localStorage.ts

@@ -1,3 +1,5 @@
+import { isNotDefined } from '@togglecorp/fujs';
+
 export function getFromStorage<T>(key: string) {
     const val = localStorage.getItem(key);
     return val === null || val === undefined ? undefined : JSON.parse(val) as T;
@@ -7,6 +9,9 @@ export function removeFromStorage(key: string) {
     localStorage.removeItem(key);
 }
 
-export function setToStorage<T>(key: string, value: T) {
+export function setToStorage(key: string, value: unknown) {
+    if (isNotDefined(value)) {
+        localStorage.clearItem(key);
+    }
     localStorage.setItem(key, JSON.stringify(value));
 }