File "edit-channel-page-layout.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/channels/channel-editor/edit-channel-page-layout.tsx
File size: 1.42 KB
MIME-type: text/plain
Charset: utf-8
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>
);
}