diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx index 4e350ce2a..d646b821b 100644 --- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx +++ b/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,49 +48,74 @@ export const CategoryCreatePage: React.FC = ({ 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 ( -
- {({ data, change, submit, hasChanged }) => ( - - - {intl.formatMessage(sectionNames.categories)} - - -
- - - + {({ data, change, submit, hasChanged }) => { + const changeMetadata = makeMetadataChangeHandler(change); + + return ( + + + {intl.formatMessage(sectionNames.categories)} + + - -
-
- )} +
+ + + + + + +
+ + ); + }}
); }; diff --git a/src/categories/views/CategoryCreate.tsx b/src/categories/views/CategoryCreate.tsx index aab98691a..606fab85b 100644 --- a/src/categories/views/CategoryCreate.tsx +++ b/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 from "../components/CategoryCreatePage"; +import CategoryCreatePage, { FormData } 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 = ({ 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 = ({ onCompleted: handleSuccess }); - const errors = maybe( - () => createCategoryResult.data.categoryCreate.errors, - [] + const handleCreate = async (formData: FormData) => { + 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 = ({ /> navigate(parentId ? categoryUrl(parentId) : categoryListUrl()) } - onSubmit={formData => - createCategory({ - variables: { - input: { - descriptionJson: JSON.stringify(formData.description), - name: formData.name, - seo: { - description: formData.seoDescription, - title: formData.seoTitle - } - }, - parent: parentId || null - } - }) - } + onSubmit={handleSubmit} /> );