From 9165663cbab245ab06adb843fef35e88dd2a3bd0 Mon Sep 17 00:00:00 2001 From: LASER-Yi Date: Mon, 21 Nov 2022 00:23:55 +0800 Subject: [PATCH] Move pageSize in UI settings to backend --- bazarr/app/config.py | 4 +- frontend/src/apis/queries/hooks.ts | 2 +- frontend/src/components/tables/BaseTable.tsx | 2 +- .../tables/plugins/useDefaultSettings.tsx | 2 +- .../pages/Settings/Languages/components.tsx | 4 +- .../pages/Settings/Providers/components.tsx | 1 - frontend/src/pages/Settings/UI/index.tsx | 1 - .../src/pages/Settings/components/Layout.tsx | 22 ++--------- .../pages/Settings/utilities/FormValues.ts | 38 ++++++++----------- .../src/pages/Settings/utilities/hooks.ts | 38 +++++-------------- frontend/src/types/settings.d.ts | 1 + frontend/src/utilities/storage.ts | 20 +++------- 12 files changed, 42 insertions(+), 93 deletions(-) diff --git a/bazarr/app/config.py b/bazarr/app/config.py index dbe3e7465..ce4d0e3a5 100644 --- a/bazarr/app/config.py +++ b/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', - 'page_size', - 'page_size_manual_search'] +ignore_keys = ['flask_secret_key'] raw_keys = ['movie_default_forced', 'serie_default_forced'] diff --git a/frontend/src/apis/queries/hooks.ts b/frontend/src/apis/queries/hooks.ts index 70d959bb6..4f8467221 100644 --- a/frontend/src/apis/queries/hooks.ts +++ b/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; diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx index d378d6f56..b13b1629a 100644 --- a/frontend/src/components/tables/BaseTable.tsx +++ b/frontend/src/components/tables/BaseTable.tsx @@ -80,7 +80,7 @@ export default function BaseTable(props: BaseTableProps) { const empty = rows.length === 0; - const [pageSize] = usePageSize(); + const pageSize = usePageSize(); const isLoading = useIsLoading(); let body: ReactNode; diff --git a/frontend/src/components/tables/plugins/useDefaultSettings.tsx b/frontend/src/components/tables/plugins/useDefaultSettings.tsx index 772dfb93a..c833c9f79 100644 --- a/frontend/src/components/tables/plugins/useDefaultSettings.tsx +++ b/frontend/src/components/tables/plugins/useDefaultSettings.tsx @@ -9,7 +9,7 @@ function useDefaultSettings(hooks: Hooks) { useDefaultSettings.pluginName = pluginName; function useOptions(options: TableOptions) { - const [pageSize] = usePageSize(); + const pageSize = usePageSize(); if (options.autoResetPage === undefined) { options.autoResetPage = false; diff --git a/frontend/src/pages/Settings/Languages/components.tsx b/frontend/src/pages/Settings/Languages/components.tsx index 7aaf8d906..ad27278f7 100644 --- a/frontend/src/pages/Settings/Languages/components.tsx +++ b/frontend/src/pages/Settings/Languages/components.tsx @@ -22,7 +22,7 @@ type LanguageSelectorProps = Omit< export const LanguageSelector: FunctionComponent< LanguageSelectorProps & BaseInput -> = ({ 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); }} > diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx index d9edadcfb..30fe39b15 100644 --- a/frontend/src/pages/Settings/Providers/components.tsx +++ b/frontend/src/pages/Settings/Providers/components.tsx @@ -129,7 +129,6 @@ const ProviderTool: FunctionComponent = ({ const form = useForm({ initialValues: { settings: staged, - storages: {}, }, }); diff --git a/frontend/src/pages/Settings/UI/index.tsx b/frontend/src/pages/Settings/UI/index.tsx index 2b85eeaca..9cb2de367 100644 --- a/frontend/src/pages/Settings/UI/index.tsx +++ b/frontend/src/pages/Settings/UI/index.tsx @@ -10,7 +10,6 @@ const SettingsUIView: FunctionComponent = () => { diff --git a/frontend/src/pages/Settings/components/Layout.tsx b/frontend/src/pages/Settings/components/Layout.tsx index af2556f96..f9080230a 100644 --- a/frontend/src/pages/Settings/components/Layout.tsx +++ b/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) => { const form = useForm({ initialValues: { settings: {}, - storages: {}, }, }); @@ -43,11 +41,9 @@ const Layout: FunctionComponent = (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) => { 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(object).length; - }, [form.values.settings, form.values.storages]); + return Object.keys(form.values.settings).length; + }, [form.values.settings]); usePrompt( totalStagedCount > 0, diff --git a/frontend/src/pages/Settings/utilities/FormValues.ts b/frontend/src/pages/Settings/utilities/FormValues.ts index eb5485c3a..d6c78f03e 100644 --- a/frontend/src/pages/Settings/utilities/FormValues.ts +++ b/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( - (object: LooseObject, location: FormKey = "settings") => { - LOG("info", `Updating values in ${location}`, object); - formRef.current.setValues((values) => { - const changes = { ...values[location], ...object }; - return { ...values, [location]: changes }; - }); - }, - [] - ); + const update = useCallback((object: LooseObject) => { + LOG("info", `Updating values`, object); + formRef.current.setValues((values) => { + const changes = { ...values.settings, ...object }; + return { ...values, settings: changes }; + }); + }, []); - const setValue = useCallback( - (v: unknown, key: string, location: FormKey = "settings") => { - LOG("info", `Updating value of ${key} in ${location}`, v); - formRef.current.setValues((values) => { - const changes = { ...values[location], [key]: v }; - return { ...values, [location]: changes }; - }); - }, - [] - ); + const setValue = useCallback((v: unknown, key: string) => { + LOG("info", `Updating value of ${key}`, v); + formRef.current.setValues((values) => { + const changes = { ...values.settings, [key]: v }; + return { ...values, settings: 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; }; diff --git a/frontend/src/pages/Settings/utilities/hooks.ts b/frontend/src/pages/Settings/utilities/hooks.ts index a5a8aebf9..02902abeb 100644 --- a/frontend/src/pages/Settings/utilities/hooks.ts +++ b/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 { - FormKey, - useFormActions, - useStagedValues, -} from "../utilities/FormValues"; +import { useFormActions, useStagedValues } from "../utilities/FormValues"; import { useSettings } from "../utilities/SettingsProvider"; import { useSubmitHookWith } from "./HooksProvider"; export interface BaseInput { disabled?: boolean; settingKey: string; - location?: FormKey; settingOptions?: SettingValueOptions; } export type SettingValueOptions = { 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(props: T & BaseInput) { - const { settingKey, settingOptions, location, ...rest } = props; + const { settingKey, settingOptions, ...rest } = props; // TODO: Opti options const value = useSettingValue(settingKey, settingOptions); @@ -36,9 +31,9 @@ export function useBaseInput(props: T & BaseInput) { 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( options?: SettingValueOptions ): Readonly> { 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( if (onLoaded) { LOG("info", `${key} is using custom loader`); - return onLoaded(settings, storage); + return onLoaded(settings); } - let value: Nullable = null; - if (isSettingsKey) { - const path = key.replaceAll("-", "."); + const path = key.replaceAll("-", "."); - value = get({ settings }, path, null) as Nullable; - } else { - const storageValue = storage.getItem(key); - if (storageValue !== null) { - value = JSON.parse(storageValue); - } - } + const value = get({ settings }, path, null) as Nullable; if (defaultValue && (isNull(value) || isUndefined(value))) { LOG("info", `${key} is falling back to`, defaultValue); @@ -88,7 +70,7 @@ export function useSettingValue( } return value; - }, [isSettingsKey, key, settings, storage]); + }, [key, settings]); const stagedValue = useStagedValues(); diff --git a/frontend/src/types/settings.d.ts b/frontend/src/types/settings.d.ts index 1db17a0ba..26da89bd9 100644 --- a/frontend/src/types/settings.d.ts +++ b/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; diff --git a/frontend/src/utilities/storage.ts b/frontend/src/utilities/storage.ts index d7e004087..c4d50a829 100644 --- a/frontend/src/utilities/storage.ts +++ b/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; }