Add metadata editor to category creator

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -3,18 +3,20 @@ import { CardSpacer } from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
+import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 
-interface FormData {
+export interface FormData extends MetadataFormData {
   description: RawDraftContentState;
   name: string;
   seoTitle: string;
@@ -23,7 +25,9 @@ interface FormData {
 
 const initialData: FormData = {
   description: convertToRaw(ContentState.createFromText("")),
+  metadata: [],
   name: "",
+  privateMetadata: [],
   seoDescription: "",
   seoTitle: ""
 };
@@ -44,9 +48,31 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   saveButtonBarState
 }) => {
   const intl = useIntl();
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
+  const handleSubmit = (data: FormData) => {
+    const metadata = isMetadataModified ? data.metadata : undefined;
+    const privateMetadata = isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined;
+
+    onSubmit({
+      ...data,
+      metadata,
+      privateMetadata
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
+      {({ data, change, submit, hasChanged }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
-    <Form onSubmit={onSubmit} initial={initialData} confirmLeave>
-      {({ data, change, submit, hasChanged }) => (
           <Container>
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.categories)}
@@ -78,6 +104,8 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
                 onChange={change}
                 disabled={disabled}
               />
+              <CardSpacer />
+              <Metadata data={data} onChange={changeMetadata} />
               <SaveButtonBar
                 onCancel={onBack}
                 onSave={submit}
@@ -86,7 +114,8 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
               />
             </div>
           </Container>
-      )}
+        );
+      }}
     </Form>
   );
 };

src/categories/views/CategoryCreate.tsx

@@ -1,11 +1,15 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe } from "../../misc";
+import CategoryCreatePage, { FormData } from "../components/CategoryCreatePage";
-import CategoryCreatePage from "../components/CategoryCreatePage";
 import { useCategoryCreateMutation } from "../mutations";
 import { CategoryCreate } from "../types/CategoryCreate";
 import { categoryListUrl, categoryUrl } from "../urls";
@@ -20,6 +24,8 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleSuccess = (data: CategoryCreate) => {
     if (data.categoryCreate.errors.length === 0) {
@@ -37,9 +43,27 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
     onCompleted: handleSuccess
   });
 
-  const errors = maybe(
+  const handleCreate = async (formData: FormData) => {
-    () => createCategoryResult.data.categoryCreate.errors,
+    const result = await createCategory({
-    []
+      variables: {
+        input: {
+          descriptionJson: JSON.stringify(formData.description),
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        },
+        parent: parentId || null
+      }
+    });
+
+    return result.data?.categoryCreate.category?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
   );
 
   return (
@@ -52,26 +76,12 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       />
       <CategoryCreatePage
         saveButtonBarState={createCategoryResult.status}
-        errors={errors}
+        errors={createCategoryResult.data?.categoryCreate.errors || []}
         disabled={createCategoryResult.loading}
         onBack={() =>
           navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
         }
-        onSubmit={formData =>
+        onSubmit={handleSubmit}
-          createCategory({
-            variables: {
-              input: {
-                descriptionJson: JSON.stringify(formData.description),
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              },
-              parent: parentId || null
-            }
-          })
-        }
       />
     </>
   );