1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
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 { useForm } from "@mantine/form";
import { useDocumentTitle } from "@mantine/hooks";
import { FunctionComponent, ReactNode, useCallback, useMemo } from "react";
import { FormContext, FormValues } from "../utilities/FormValues";
import {
SubmitHooksProvider,
useSubmitHooksSource,
} from "../utilities/HooksProvider";
import { SettingsProvider } from "../utilities/SettingsProvider";
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 submitHooks = useSubmitHooksSource();
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 };
submitHooks.invoke(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, submitHooks, 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}>
<SubmitHooksProvider value={submitHooks}>
<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>
</SubmitHooksProvider>
</LoadingProvider>
</SettingsProvider>
);
};
export default Layout;
|
