Fix #1987

frontend/src/pages/Settings/UI/index.tsx

@@ -1,10 +1,9 @@
-import { uiPageSizeKey, usePageSize } from "@/utilities/storage";
+import { uiPageSizeKey } from "@/utilities/storage";
 import { FunctionComponent } from "react";
 import { Layout, Section, Selector } from "../components";
 import { pageSizeOptions } from "./options";
 
 const SettingsUIView: FunctionComponent = () => {
-  const [pageSize] = usePageSize();
   return (
     <Layout name="Interface">
       <Section header="UI">
@@ -13,7 +12,7 @@ const SettingsUIView: FunctionComponent = () => {
           options={pageSizeOptions}
           location="storages"
           settingKey={uiPageSizeKey}
-          settingOptions={{ onLoaded: () => pageSize }}
+          defaultValue={50}
         ></Selector>
       </Section>
     </Layout>

frontend/src/pages/Settings/components/Layout.tsx

@@ -39,7 +39,7 @@ const Layout: FunctionComponent<Props> = (props) => {
 
   useOnValueChange(isRefetching, (value) => {
     if (!value) {
-      form.reset();
+      form.setValues((values) => ({ ...values, settings: {} }));
     }
   });
 
@@ -60,9 +60,11 @@ const Layout: FunctionComponent<Props> = (props) => {
         const storagesToSubmit = { ...storages };
         LOG("info", "submitting storages", storagesToSubmit);
         updateStorage(storagesToSubmit);
+
+        form.setValues((values) => ({ ...values, storages: {} }));
       }
     },
-    [mutate, submitHooks, updateStorage]
+    [form, mutate, submitHooks, updateStorage]
   );
 
   const totalStagedCount = useMemo(() => {

frontend/src/pages/Settings/utilities/hooks.ts

@@ -1,4 +1,4 @@
-import { LOG } from "@/utilities/console";
+import { ASSERT, LOG } from "@/utilities/console";
 import { get, isNull, isUndefined, uniqBy } from "lodash";
 import { useCallback, useMemo, useRef } from "react";
 import {
@@ -19,7 +19,7 @@ export interface BaseInput<T> {
 export type SettingValueOptions<T> = {
   original?: boolean;
   defaultValue?: T;
-  onLoaded?: (settings: Settings) => T;
+  onLoaded?: (settings: Settings, storage: Storage) => T;
   onSaved?: (value: T) => unknown;
   onSubmit?: (value: T) => unknown;
 };
@@ -49,6 +49,11 @@ export function useSettingValue<T>(
   options?: SettingValueOptions<T>
 ): Readonly<Nullable<T>> {
   const settings = useSettings();
+  const storage = window.localStorage;
+
+  const isSettingsKey = useMemo(() => key.startsWith("settings"), [key]);
+
+  ASSERT(isSettingsKey === false && key.startsWith("storage"));
 
   const optionsRef = useRef(options);
   optionsRef.current = options;
@@ -61,12 +66,20 @@ export function useSettingValue<T>(
     if (onLoaded) {
       LOG("info", `${key} is using custom loader`);
 
-      return onLoaded(settings);
+      return onLoaded(settings, storage);
     }
 
-    const path = key.replaceAll("-", ".");
+    let value: Nullable<T> = null;
+    if (isSettingsKey) {
+      const path = key.replaceAll("-", ".");
 
-    const value = get({ settings }, path, null) as Nullable<T>;
+      value = get({ settings }, path, null) as Nullable<T>;
+    } else {
+      const storageValue = storage.getItem(key);
+      if (storageValue !== null) {
+        value = JSON.parse(storageValue);
+      }
+    }
 
     if (defaultValue && (isNull(value) || isUndefined(value))) {
       LOG("info", `${key} is falling back to`, defaultValue);
@@ -75,7 +88,7 @@ export function useSettingValue<T>(
     }
 
     return value;
-  }, [key, settings]);
+  }, [isSettingsKey, key, settings, storage]);
 
   const stagedValue = useStagedValues();
 

frontend/src/utilities/console.ts

@@ -34,4 +34,5 @@ export function GROUP(
   }
 }
 
-export const ASSERT = console.assert;
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const ASSERT = isProdEnv ? () => {} : console.assert;

frontend/src/utilities/storage.ts

@@ -12,6 +12,18 @@ export function useUpdateLocalStorage() {
   }, []);
 }
 
+export function getPageSize(storage: Storage): number {
+  const defaultValue = 50;
+
+  const value = storage.getItem(uiPageSizeKey);
+
+  if (value === null) {
+    return defaultValue;
+  }
+
+  return JSON.parse(value);
+}
+
 export function usePageSize() {
   return useLocalStorage({ key: uiPageSizeKey, defaultValue: 50 });
 }