mirror of https://github.com/morpheus65535/bazarr
132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import { useSettingsMutation, useSystemSettings } from "@/apis/hooks";
|
|
import { Toolbox } from "@/components";
|
|
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 { useDocumentTitle, useForm } from "@mantine/hooks";
|
|
import { FunctionComponent, ReactNode, useCallback, useMemo } from "react";
|
|
import { enabledLanguageKey, languageProfileKey } from "../keys";
|
|
import { FormContext, FormValues } from "../utilities/FormValues";
|
|
import { SettingsProvider } from "../utilities/SettingsProvider";
|
|
|
|
type SubmitHookType = {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
[key: string]: (value: any) => unknown;
|
|
};
|
|
|
|
export const submitHooks: SubmitHookType = {
|
|
[languageProfileKey]: (value) => JSON.stringify(value),
|
|
[enabledLanguageKey]: (value: Language.Info[]) => value.map((v) => v.code2),
|
|
};
|
|
|
|
function invokeHooks(settings: LooseObject) {
|
|
for (const key in settings) {
|
|
if (key in submitHooks) {
|
|
const value = settings[key];
|
|
const fn = submitHooks[key];
|
|
settings[key] = fn(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
interface Props {
|
|
name: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
const Layout: FunctionComponent<Props> = (props) => {
|
|
const { children, name } = props;
|
|
|
|
const { data: settings, isLoading, isRefetching } = useSystemSettings();
|
|
const { mutate, isLoading: isMutating } = useSettingsMutation();
|
|
|
|
const form = useForm<FormValues>({
|
|
initialValues: {
|
|
settings: {},
|
|
storages: {},
|
|
},
|
|
});
|
|
|
|
useOnValueChange(isRefetching, (value) => {
|
|
if (!value) {
|
|
form.reset();
|
|
}
|
|
});
|
|
|
|
const updateStorage = useUpdateLocalStorage();
|
|
|
|
const submit = useCallback(
|
|
(values: FormValues) => {
|
|
const { settings, storages } = values;
|
|
|
|
if (Object.keys(settings).length > 0) {
|
|
const settingsToSubmit = { ...settings };
|
|
invokeHooks(settingsToSubmit);
|
|
LOG("info", "submitting settings", settingsToSubmit);
|
|
mutate(settingsToSubmit);
|
|
}
|
|
|
|
if (Object.keys(storages).length > 0) {
|
|
const storagesToSubmit = { ...storages };
|
|
LOG("info", "submitting storages", storagesToSubmit);
|
|
updateStorage(storagesToSubmit);
|
|
}
|
|
},
|
|
[mutate, updateStorage]
|
|
);
|
|
|
|
const totalStagedCount = useMemo(() => {
|
|
const object = { ...form.values.settings, ...form.values.storages };
|
|
|
|
return Object.keys(object).length;
|
|
}, [form.values.settings, form.values.storages]);
|
|
|
|
usePrompt(
|
|
totalStagedCount > 0,
|
|
`You have ${totalStagedCount} unsaved changes, are you sure you want to leave?`
|
|
);
|
|
|
|
useDocumentTitle(`${name} - Bazarr (Settings)`);
|
|
|
|
if (settings === undefined) {
|
|
return <LoadingOverlay visible></LoadingOverlay>;
|
|
}
|
|
|
|
return (
|
|
<SettingsProvider value={settings}>
|
|
<LoadingProvider value={isLoading || isMutating}>
|
|
<form onSubmit={form.onSubmit(submit)}>
|
|
<Toolbox>
|
|
<Group>
|
|
<Toolbox.Button
|
|
type="submit"
|
|
icon={faSave}
|
|
loading={isMutating}
|
|
disabled={totalStagedCount === 0}
|
|
rightIcon={
|
|
<Badge size="xs" radius="sm" hidden={totalStagedCount === 0}>
|
|
{totalStagedCount}
|
|
</Badge>
|
|
}
|
|
>
|
|
Save
|
|
</Toolbox.Button>
|
|
</Group>
|
|
</Toolbox>
|
|
<FormContext.Provider value={form}>
|
|
<Container size="xl" mx={0}>
|
|
{children}
|
|
</Container>
|
|
</FormContext.Provider>
|
|
</form>
|
|
</LoadingProvider>
|
|
</SettingsProvider>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|