Add metadata editor to collection creator

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -1,19 +1,18 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
 import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
-import CardTitle from "@saleor/components/CardTitle";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { Container } from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+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 VisibilityCard from "@saleor/components/VisibilityCard";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import { commonMessages, sectionNames } from "@saleor/intl";
+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";
@@ -21,7 +20,7 @@ import { useIntl } from "react-intl";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 
-export interface CollectionCreatePageFormData {
+export interface CollectionCreatePageFormData extends MetadataFormData {
   backgroundImage: {
     url: string;
     value: string;
@@ -51,7 +50,9 @@ const initialForm: CollectionCreatePageFormData = {
   backgroundImageAlt: "",
   description: convertToRaw(ContentState.createFromText("")),
   isPublished: false,
+  metadata: [],
   name: "",
+  privateMetadata: [],
   publicationDate: "",
   seoDescription: "",
   seoTitle: ""
@@ -66,122 +67,122 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
 }: CollectionCreatePageProps) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit }) => {
-        <Container>
+        const changeMetadata = makeMetadataChangeHandler(change);
-          <AppHeader onBack={onBack}>
+
-            {intl.formatMessage(sectionNames.collections)}
+        return (
-          </AppHeader>
+          <Container>
-          <PageHeader
+            <AppHeader onBack={onBack}>
-            title={intl.formatMessage({
+              {intl.formatMessage(sectionNames.collections)}
-              defaultMessage: "Add Collection",
+            </AppHeader>
-              description: "page header"
+            <PageHeader
-            })}
+              title={intl.formatMessage({
-          />
+                defaultMessage: "Add Collection",
-          <Grid>
+                description: "page header"
-            <div>
+              })}
-              <CollectionDetails
+            />
-                data={data}
+            <Grid>
-                disabled={disabled}
-                errors={errors}
-                onChange={change}
-              />
-              <CardSpacer />
-              <CollectionImage
-                image={
-                  data.backgroundImage.url
-                    ? {
-                        __typename: "Image",
-                        alt: data.backgroundImageAlt,
-                        url: data.backgroundImage.url
-                      }
-                    : null
-                }
-                onImageDelete={() =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: null,
-                        value: null
-                      }
-                    }
-                  } as any)
-                }
-                onImageUpload={file =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: URL.createObjectURL(file),
-                        value: file
-                      }
-                    }
-                  } as any)
-                }
-                onChange={change}
-                data={data}
-              />
-              <CardSpacer />
-              <SeoForm
-                description={data.seoDescription}
-                disabled={disabled}
-                descriptionPlaceholder=""
-                helperText={intl.formatMessage({
-                  defaultMessage:
-                    "Add search engine title and description to make this collection easier to find"
-                })}
-                title={data.seoTitle}
-                titlePlaceholder={data.name}
-                onChange={change}
-              />
-            </div>
-            <div>
               <div>
-                <Card>
+                <CollectionDetails
-                  <CardTitle
+                  data={data}
-                    title={intl.formatMessage(commonMessages.availability)}
+                  disabled={disabled}
-                  />
+                  errors={errors}
-                  <CardContent>
+                  onChange={change}
-                    <VisibilityCard
+                />
-                      data={data}
+                <CardSpacer />
-                      errors={errors}
+                <CollectionImage
-                      disabled={disabled}
+                  image={
-                      hiddenMessage={intl.formatMessage(
+                    data.backgroundImage.url
-                        {
+                      ? {
-                          defaultMessage: "will be visible from {date}",
+                          __typename: "Image",
-                          description: "collection"
+                          alt: data.backgroundImageAlt,
-                        },
+                          url: data.backgroundImage.url
-                        {
-                          date: localizeDate(data.publicationDate)
                         }
-                      )}
+                      : null
-                      onChange={change}
+                  }
-                      visibleMessage={intl.formatMessage(
+                  onImageDelete={() =>
-                        {
+                    change({
-                          defaultMessage: "since {date}",
+                      target: {
-                          description: "collection"
+                        name: "backgroundImage",
-                        },
+                        value: {
-                        {
+                          url: null,
-                          date: localizeDate(data.publicationDate)
+                          value: null
                         }
-                      )}
+                      }
-                    />
+                    } as any)
-                  </CardContent>
+                  }
-                </Card>
+                  onImageUpload={file =>
+                    change({
+                      target: {
+                        name: "backgroundImage",
+                        value: {
+                          url: URL.createObjectURL(file),
+                          value: file
+                        }
+                      }
+                    } as any)
+                  }
+                  onChange={change}
+                  data={data}
+                />
+                <CardSpacer />
+                <SeoForm
+                  description={data.seoDescription}
+                  disabled={disabled}
+                  descriptionPlaceholder=""
+                  helperText={intl.formatMessage({
+                    defaultMessage:
+                      "Add search engine title and description to make this collection easier to find"
+                  })}
+                  title={data.seoTitle}
+                  titlePlaceholder={data.name}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
-            </div>
+              <div>
-          </Grid>
+                <VisibilityCard
-          <SaveButtonBar
+                  data={data}
-            state={saveButtonBarState}
+                  errors={errors}
-            disabled={disabled || !hasChanged}
+                  disabled={disabled}
-            onCancel={onBack}
+                  hiddenMessage={intl.formatMessage(
-            onSave={submit}
+                    {
-          />
+                      defaultMessage: "will be visible from {date}",
-        </Container>
+                      description: "collection"
-      )}
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                  onChange={change}
+                  visibleMessage={intl.formatMessage(
+                    {
+                      defaultMessage: "since {date}",
+                      description: "collection"
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              state={saveButtonBarState}
+              disabled={disabled || !hasChanged}
+              onCancel={onBack}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

src/collections/views/CollectionCreate.tsx

@@ -2,11 +2,18 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+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 { CollectionCreateInput } from "../../types/globalTypes";
-import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
+import CollectionCreatePage, {
+  CollectionCreatePageFormData
+} from "../components/CollectionCreatePage/CollectionCreatePage";
 import { useCollectionCreateMutation } from "../mutations";
 import { collectionListUrl, collectionUrl } from "../urls";
 
@@ -14,6 +21,8 @@ export const CollectionCreate: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const [createCollection, createCollectionOpts] = useCollectionCreateMutation({
     onCompleted: data => {
@@ -38,6 +47,31 @@ export const CollectionCreate: React.FC = () => {
     }
   });
 
+  const handleCreate = async (formData: CollectionCreatePageFormData) => {
+    const result = await createCollection({
+      variables: {
+        input: {
+          backgroundImage: formData.backgroundImage.value,
+          backgroundImageAlt: formData.backgroundImageAlt,
+          descriptionJson: JSON.stringify(formData.description),
+          isPublished: formData.isPublished,
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        }
+      }
+    });
+
+    return result.data?.collectionCreate.collection?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
   return (
     <>
       <WindowTitle
@@ -50,23 +84,7 @@ export const CollectionCreate: React.FC = () => {
         errors={createCollectionOpts.data?.collectionCreate.errors || []}
         onBack={() => navigate(collectionListUrl())}
         disabled={createCollectionOpts.loading}
-        onSubmit={formData =>
+        onSubmit={handleSubmit}
-          createCollection({
-            variables: {
-              input: {
-                backgroundImage: formData.backgroundImage.value,
-                backgroundImageAlt: formData.backgroundImageAlt,
-                descriptionJson: JSON.stringify(formData.description),
-                isPublished: formData.isPublished,
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              }
-            }
-          })
-        }
         saveButtonBarState={createCollectionOpts.status}
       />
     </>