Move pageSize in UI settings to backend

bazarr/app/config.py

@@ -267,9 +267,7 @@ settings.read(os.path.join(args.config_dir, 'config', 'config.ini'))
 settings.general.base_url = settings.general.base_url if settings.general.base_url else '/'
 base_url = settings.general.base_url.rstrip('/')
 
-ignore_keys = ['flask_secret_key',
+ignore_keys = ['flask_secret_key']
-               'page_size',
-               'page_size_manual_search']
 
 raw_keys = ['movie_default_forced', 'serie_default_forced']
 

frontend/src/apis/queries/hooks.ts

@@ -35,7 +35,7 @@ export function usePaginationQuery<
   const client = useQueryClient();
 
   const [page, setIndex] = useState(0);
-  const [pageSize] = usePageSize();
+  const pageSize = usePageSize();
 
   const start = page * pageSize;
 

frontend/src/components/tables/BaseTable.tsx

@@ -80,7 +80,7 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) {
 
   const empty = rows.length === 0;
 
-  const [pageSize] = usePageSize();
+  const pageSize = usePageSize();
   const isLoading = useIsLoading();
 
   let body: ReactNode;

frontend/src/components/tables/plugins/useDefaultSettings.tsx

@@ -9,7 +9,7 @@ function useDefaultSettings<T extends object>(hooks: Hooks<T>) {
 useDefaultSettings.pluginName = pluginName;
 
 function useOptions<T extends object>(options: TableOptions<T>) {
-  const [pageSize] = usePageSize();
+  const pageSize = usePageSize();
 
   if (options.autoResetPage === undefined) {
     options.autoResetPage = false;

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

@@ -22,7 +22,7 @@ type LanguageSelectorProps = Omit<
 
 export const LanguageSelector: FunctionComponent<
   LanguageSelectorProps & BaseInput<string[]>
-> = ({ settingKey, location, label, options }) => {
+> = ({ settingKey, label, options }) => {
   const enabled = useLatestEnabledLanguages();
   const { setValue } = useFormActions();
 
@@ -39,7 +39,7 @@ export const LanguageSelector: FunctionComponent<
         value={enabled}
         searchable
         onChange={(val) => {
-          setValue(val, settingKey, location);
+          setValue(val, settingKey);
         }}
       ></MultiSelector>
     </Input.Wrapper>

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

@@ -129,7 +129,6 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
   const form = useForm<FormValues>({
     initialValues: {
       settings: staged,
-      storages: {},
     },
   });
 

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

@@ -10,7 +10,6 @@ const SettingsUIView: FunctionComponent = () => {
         <Selector
           label="Page Size"
           options={pageSizeOptions}
-          location="storages"
           settingKey={uiPageSizeKey}
           defaultValue={50}
         ></Selector>

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

@@ -4,7 +4,6 @@ import { LoadingProvider } from "@/contexts";
 import { useOnValueChange } from "@/utilities";
 import { LOG } from "@/utilities/console";
 import { usePrompt } from "@/utilities/routers";
-import { useUpdateLocalStorage } from "@/utilities/storage";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { Badge, Container, Group, LoadingOverlay } from "@mantine/core";
 import { useForm } from "@mantine/form";
@@ -33,7 +32,6 @@ const Layout: FunctionComponent<Props> = (props) => {
   const form = useForm<FormValues>({
     initialValues: {
       settings: {},
-      storages: {},
     },
   });
 
@@ -43,11 +41,9 @@ const Layout: FunctionComponent<Props> = (props) => {
     }
   });
 
-  const updateStorage = useUpdateLocalStorage();
-
   const submit = useCallback(
     (values: FormValues) => {
-      const { settings, storages } = values;
+      const { settings } = values;
 
       if (Object.keys(settings).length > 0) {
         const settingsToSubmit = { ...settings };
@@ -55,23 +51,13 @@ const Layout: FunctionComponent<Props> = (props) => {
         LOG("info", "submitting settings", settingsToSubmit);
         mutate(settingsToSubmit);
       }
-
-      if (Object.keys(storages).length > 0) {
-        const storagesToSubmit = { ...storages };
-        LOG("info", "submitting storages", storagesToSubmit);
-        updateStorage(storagesToSubmit);
-
-        form.setValues((values) => ({ ...values, storages: {} }));
-      }
     },
-    [form, mutate, submitHooks, updateStorage]
+    [mutate, submitHooks]
   );
 
   const totalStagedCount = useMemo(() => {
-    const object = { ...form.values.settings, ...form.values.storages };
+    return Object.keys(form.values.settings).length;
-
+  }, [form.values.settings]);
-    return Object.keys(object).length;
-  }, [form.values.settings, form.values.storages]);
 
   usePrompt(
     totalStagedCount > 0,

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

@@ -18,7 +18,7 @@ export function useFormValues() {
 
 export function useStagedValues() {
   const form = useFormValues();
-  return { ...form.values.settings, ...form.values.storages };
+  return { ...form.values.settings };
 }
 
 export function useFormActions() {
@@ -27,27 +27,21 @@ export function useFormActions() {
   const formRef = useRef(form);
   formRef.current = form;
 
-  const update = useCallback(
+  const update = useCallback((object: LooseObject) => {
-    (object: LooseObject, location: FormKey = "settings") => {
+    LOG("info", `Updating values`, object);
-      LOG("info", `Updating values in ${location}`, object);
+    formRef.current.setValues((values) => {
-      formRef.current.setValues((values) => {
+      const changes = { ...values.settings, ...object };
-        const changes = { ...values[location], ...object };
+      return { ...values, settings: changes };
-        return { ...values, [location]: changes };
+    });
-      });
+  }, []);
-    },
+
-    []
+  const setValue = useCallback((v: unknown, key: string) => {
-  );
+    LOG("info", `Updating value of ${key}`, v);
-
+    formRef.current.setValues((values) => {
-  const setValue = useCallback(
+      const changes = { ...values.settings, [key]: v };
-    (v: unknown, key: string, location: FormKey = "settings") => {
+      return { ...values, settings: changes };
-      LOG("info", `Updating value of ${key} in ${location}`, v);
+    });
-      formRef.current.setValues((values) => {
+  }, []);
-        const changes = { ...values[location], [key]: v };
-        return { ...values, [location]: changes };
-      });
-    },
-    []
-  );
 
   return { update, setValue };
 }
@@ -57,5 +51,5 @@ export type FormValues = {
   // Settings that saved to the backend
   settings: LooseObject;
   // Settings that saved to the frontend
-  storages: LooseObject;
+  // storages: LooseObject;
 };

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

@@ -1,31 +1,26 @@
-import { ASSERT, LOG } from "@/utilities/console";
+import { LOG } from "@/utilities/console";
 import { get, isNull, isUndefined, uniqBy } from "lodash";
 import { useCallback, useMemo, useRef } from "react";
-import {
+import { useFormActions, useStagedValues } from "../utilities/FormValues";
-  FormKey,
-  useFormActions,
-  useStagedValues,
-} from "../utilities/FormValues";
 import { useSettings } from "../utilities/SettingsProvider";
 import { useSubmitHookWith } from "./HooksProvider";
 
 export interface BaseInput<T> {
   disabled?: boolean;
   settingKey: string;
-  location?: FormKey;
   settingOptions?: SettingValueOptions<T>;
 }
 
 export type SettingValueOptions<T> = {
   original?: boolean;
   defaultValue?: T;
-  onLoaded?: (settings: Settings, storage: Storage) => T;
+  onLoaded?: (settings: Settings) => T;
   onSaved?: (value: T) => unknown;
   onSubmit?: (value: T) => unknown;
 };
 
 export function useBaseInput<T, V>(props: T & BaseInput<V>) {
-  const { settingKey, settingOptions, location, ...rest } = props;
+  const { settingKey, settingOptions, ...rest } = props;
   // TODO: Opti options
   const value = useSettingValue<V>(settingKey, settingOptions);
 
@@ -36,9 +31,9 @@ export function useBaseInput<T, V>(props: T & BaseInput<V>) {
       const moddedValue =
         (newValue && settingOptions?.onSaved?.(newValue)) ?? newValue;
 
-      setValue(moddedValue, settingKey, location);
+      setValue(moddedValue, settingKey);
     },
-    [settingOptions, setValue, settingKey, location]
+    [settingOptions, setValue, settingKey]
   );
 
   return { value, update, rest };
@@ -49,11 +44,6 @@ 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;
@@ -66,20 +56,12 @@ export function useSettingValue<T>(
     if (onLoaded) {
       LOG("info", `${key} is using custom loader`);
 
-      return onLoaded(settings, storage);
+      return onLoaded(settings);
     }
 
-    let value: Nullable<T> = null;
+    const path = key.replaceAll("-", ".");
-    if (isSettingsKey) {
-      const path = key.replaceAll("-", ".");
 
-      value = get({ settings }, path, null) as Nullable<T>;
+    const 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);
@@ -88,7 +70,7 @@ export function useSettingValue<T>(
     }
 
     return value;
-  }, [isSettingsKey, key, settings, storage]);
+  }, [key, settings]);
 
   const stagedValue = useStagedValues();
 

frontend/src/types/settings.d.ts

@@ -55,6 +55,7 @@ declare namespace Settings {
     serie_default_profile?: number;
     path_mappings: [string, string][];
     path_mappings_movie: [string, string][];
+    page_size: number;
     port: number;
     upgrade_subs: boolean;
     postprocessing_cmd?: string;

frontend/src/utilities/storage.ts

@@ -1,7 +1,7 @@
-import { useLocalStorage } from "@mantine/hooks";
+import { useSystemSettings } from "@/apis/hooks";
 import { useCallback } from "react";
 
-export const uiPageSizeKey = "storage-ui-pageSize";
+export const uiPageSizeKey = "settings-general-page_size";
 
 export function useUpdateLocalStorage() {
   return useCallback((newVals: LooseObject) => {
@@ -12,18 +12,8 @@ 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 });
+  const settings = useSystemSettings();
+
+  return settings.data?.general.page_size ?? 50;
 }