open-source-mirrors
/
bazarr
mirror of https://github.com/morpheus65535/bazarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move pageSize in UI settings to backend

Browse Source
pull/1991/head v1.1.3-beta.22
LASER-Yi 2 years ago
parent 551f57bc0e
commit 9165663cba
12 changed files with 43 additions and 94 deletions
Show Stats Download Patch File Download Diff File

4
bazarr/app/config.py
Unescape View File

@ -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']

2
frontend/src/apis/queries/hooks.ts
Unescape View File

@ -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;

2
frontend/src/components/tables/BaseTable.tsx
Unescape View File

@ -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;

2
frontend/src/components/tables/plugins/useDefaultSettings.tsx
Unescape View File

@ -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;

4
frontend/src/pages/Settings/Languages/components.tsx
Unescape View File

@ -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>

1
frontend/src/pages/Settings/Providers/components.tsx
Unescape View File

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

1
frontend/src/pages/Settings/UI/index.tsx
Unescape View File

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

22
frontend/src/pages/Settings/components/Layout.tsx
Unescape View File

@ -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(object).length;
}, [form.values.settings, form.values.storages]);
return Object.keys(form.values.settings).length;
}, [form.values.settings]);
usePrompt(
totalStagedCount > 0,

40
frontend/src/pages/Settings/utilities/FormValues.ts
Unescape View File

@ -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 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 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) => {
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;
};

38
frontend/src/pages/Settings/utilities/hooks.ts
Unescape View File

@ -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<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;
if (isSettingsKey) {
const path = key.replaceAll("-", ".");
const path = key.replaceAll("-", ".");
value = get({ settings }, path, null) as Nullable<T>;
} else {
const storageValue = storage.getItem(key);
if (storageValue !== null) {
value = JSON.parse(storageValue);
}
}
const value = get({ settings }, path, null) as Nullable<T>;
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();

1
frontend/src/types/settings.d.ts vendored
Unescape View File

@ -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;

20
frontend/src/utilities/storage.ts
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save