52 lines
1.4 KiB
TypeScript
Executable File
52 lines
1.4 KiB
TypeScript
Executable File
import {useForm} from 'react-hook-form';
|
|
import React, {ReactNode} from 'react';
|
|
import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {PageStatus} from '@common/http/page-status';
|
|
import {useChannel} from '@common/channels/requests/use-channel';
|
|
import {Channel} from '@common/channels/channel';
|
|
import {
|
|
UpdateChannelPayload,
|
|
useUpdateChannel,
|
|
} from '@common/admin/channels/requests/use-update-channel';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
export function EditChannelPageLayout({children}: Props) {
|
|
const query = useChannel(undefined, 'editChannelPage');
|
|
if (query.data) {
|
|
return <PageContent channel={query.data.channel}>{children}</PageContent>;
|
|
}
|
|
return <PageStatus query={query} loaderIsScreen={false} />;
|
|
}
|
|
|
|
interface PageContentProps {
|
|
channel: Channel;
|
|
children: ReactNode;
|
|
}
|
|
function PageContent({channel, children}: PageContentProps) {
|
|
const form = useForm<UpdateChannelPayload>({
|
|
// @ts-ignore
|
|
defaultValues: {
|
|
...channel,
|
|
},
|
|
});
|
|
const updateChannel = useUpdateChannel(form);
|
|
|
|
return (
|
|
<CrupdateResourceLayout
|
|
form={form}
|
|
onSubmit={values => {
|
|
updateChannel.mutate(values);
|
|
}}
|
|
title={
|
|
<Trans message="Edit “:name“ channel" values={{name: channel.name}} />
|
|
}
|
|
isLoading={updateChannel.isPending}
|
|
>
|
|
{children}
|
|
</CrupdateResourceLayout>
|
|
);
|
|
}
|