import {FieldErrors, useForm} from 'react-hook-form';
import {Fragment, ReactNode} from 'react';
import {
AdminSettingsWithFiles,
useUpdateAdminSettings,
} from './requests/update-admin-settings';
import {AdminSettings} from './admin-settings';
import {useAdminSettings} from './requests/use-admin-settings';
import {Form} from '../../ui/forms/form';
import {Button} from '../../ui/buttons/button';
import {ProgressCircle} from '../../ui/progress/progress-circle';
import {ProgressBar} from '../../ui/progress/progress-bar';
import {Trans} from '../../i18n/trans';
interface Props {
title: ReactNode;
description: ReactNode;
children: ReactNode;
transformValues?: (values: AdminSettingsWithFiles) => AdminSettingsWithFiles;
}
export function SettingsPanel({
title,
description,
children,
transformValues,
}: Props) {
const {data} = useAdminSettings();
return (
<section>
<div className="mb-40">
<h2 className="mb-4 text-xl">{title}</h2>
<div className="text-sm text-muted">{description}</div>
</div>
{data ? (
<FormWrapper defaultValues={data} transformValues={transformValues}>
{children}
</FormWrapper>
) : (
<ProgressCircle isIndeterminate aria-label="Loading settings..." />
)}
</section>
);
}
interface FormWrapperProps {
children: ReactNode;
defaultValues: AdminSettings;
transformValues?: (values: AdminSettingsWithFiles) => AdminSettingsWithFiles;
}
function FormWrapper({
children,
defaultValues,
transformValues,
}: FormWrapperProps) {
const form = useForm<AdminSettingsWithFiles>({defaultValues});
const updateSettings = useUpdateAdminSettings(form);
return (
<Fragment>
<Form
form={form}
onBeforeSubmit={() => {
// clear group errors, because hook form won't automatically
// clear errors that are not bound to a specific form field
const errors = form.formState.errors as FieldErrors<object>;
const keys = Object.keys(errors).filter(key => {
return key.endsWith('_group');
});
form.clearErrors(keys as any);
}}
onSubmit={value => {
value = transformValues ? transformValues(value) : value;
updateSettings.mutate(value);
}}
>
{children}
<div className="mt-40">
<Button
type="submit"
variant="flat"
color="primary"
disabled={updateSettings.isPending}
>
<Trans message="Update" />
</Button>
</div>
</Form>
{updateSettings.isPending && (
<ProgressBar
size="xs"
className="absolute -bottom-14 left-30 w-full"
isIndeterminate
aria-label="Saving settings..."
/>
)}
</Fragment>
);
}