Add metadata editor to category creator
This commit is contained in:
dominik-zeglen
parent
dde82e0756
commit
5737e5f64d
2 changed files with 101 additions and 62 deletions
|
|
@ -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<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={onSubmit} initial={initialData} confirmLeave>
|
||||
{({ data, change, submit, hasChanged }) => (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.categories)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Create New Category",
|
||||
description: "page header"
|
||||
})}
|
||||
/>
|
||||
<div>
|
||||
<CategoryDetailsForm
|
||||
disabled={disabled}
|
||||
data={data}
|
||||
onChange={change}
|
||||
errors={errors}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<SeoForm
|
||||
helperText={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Add search engine title and description to make this category easier to find"
|
||||
<Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
|
||||
{({ data, change, submit, hasChanged }) => {
|
||||
const changeMetadata = makeMetadataChangeHandler(change);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.categories)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Create New Category",
|
||||
description: "page header"
|
||||
})}
|
||||
title={data.seoTitle}
|
||||
titlePlaceholder={data.name}
|
||||
description={data.seoDescription}
|
||||
descriptionPlaceholder={data.name}
|
||||
loading={disabled}
|
||||
onChange={change}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<SaveButtonBar
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
state={saveButtonBarState}
|
||||
disabled={disabled || !hasChanged}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
)}
|
||||
<div>
|
||||
<CategoryDetailsForm
|
||||
disabled={disabled}
|
||||
data={data}
|
||||
onChange={change}
|
||||
errors={errors}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<SeoForm
|
||||
helperText={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Add search engine title and description to make this category easier to find"
|
||||
})}
|
||||
title={data.seoTitle}
|
||||
titlePlaceholder={data.name}
|
||||
description={data.seoDescription}
|
||||
descriptionPlaceholder={data.name}
|
||||
loading={disabled}
|
||||
onChange={change}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<Metadata data={data} onChange={changeMetadata} />
|
||||
<SaveButtonBar
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
state={saveButtonBarState}
|
||||
disabled={disabled || !hasChanged}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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<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(
|
||||
() => 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<CategoryCreateViewProps> = ({
|
|||
/>
|
||||
<CategoryCreatePage
|
||||
saveButtonBarState={createCategoryResult.status}
|
||||
errors={errors}
|
||||
errors={createCategoryResult.data?.categoryCreate.errors || []}
|
||||
disabled={createCategoryResult.loading}
|
||||
onBack={() =>
|
||||
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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue