first commit

common/resources/client/admin/channels/channel-editor/edit-channel-page-layout.tsx

@@ -0,0 +1,51 @@
+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>
+  );
+}