refactor after review
This commit is contained in:
parent
fe2b15c798
commit
f956be3fbc
5 changed files with 13 additions and 19 deletions
|
@ -79,7 +79,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
|
||||||
/>
|
/>
|
||||||
<CardSpacer />
|
<CardSpacer />
|
||||||
<SeoForm
|
<SeoForm
|
||||||
isCreating={true}
|
allowEmptySlug={true}
|
||||||
helperText={intl.formatMessage({
|
helperText={intl.formatMessage({
|
||||||
defaultMessage:
|
defaultMessage:
|
||||||
"Add search engine title and description to make this category easier to find"
|
"Add search engine title and description to make this category easier to find"
|
||||||
|
|
|
@ -135,7 +135,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
|
||||||
/>
|
/>
|
||||||
<CardSpacer />
|
<CardSpacer />
|
||||||
<SeoForm
|
<SeoForm
|
||||||
isCreating={true}
|
allowEmptySlug={true}
|
||||||
description={data.seoDescription}
|
description={data.seoDescription}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
descriptionPlaceholder=""
|
descriptionPlaceholder=""
|
||||||
|
|
|
@ -81,7 +81,7 @@ interface SeoFormProps {
|
||||||
errors?: Array<PageErrorFragment | ProductErrorFragment>;
|
errors?: Array<PageErrorFragment | ProductErrorFragment>;
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
helperText?: string;
|
helperText?: string;
|
||||||
isCreating?: boolean;
|
allowEmptySlug?: boolean;
|
||||||
title: string;
|
title: string;
|
||||||
slug: string;
|
slug: string;
|
||||||
slugPlaceholder?: string;
|
slugPlaceholder?: string;
|
||||||
|
@ -97,7 +97,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
disabled,
|
disabled,
|
||||||
errors = [],
|
errors = [],
|
||||||
helperText,
|
helperText,
|
||||||
isCreating = false,
|
allowEmptySlug = false,
|
||||||
loading,
|
loading,
|
||||||
title,
|
title,
|
||||||
slug,
|
slug,
|
||||||
|
@ -124,15 +124,11 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
const getSlugHelperMessage = () => {
|
const getSlugHelperMessage = () => {
|
||||||
const error = !!getError(SeoField.slug);
|
const error = !!getError(SeoField.slug);
|
||||||
|
|
||||||
if (isCreating && !error) {
|
if (allowEmptySlug && !error) {
|
||||||
return intl.formatMessage(seoFieldMessage);
|
return intl.formatMessage(seoFieldMessage);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
return error ? getSlugErrorMessage() : "";
|
||||||
return getSlugErrorMessage();
|
|
||||||
}
|
|
||||||
|
|
||||||
return "";
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSlugErrorMessage = () => {
|
const getSlugErrorMessage = () => {
|
||||||
|
@ -144,7 +140,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
: getPageErrorMessage(error as PageErrorFragment, intl);
|
: getPageErrorMessage(error as PageErrorFragment, intl);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSlugChange = event => {
|
const handleSlugChange = (event: React.ChangeEvent<any>) => {
|
||||||
const { value } = event.target;
|
const { value } = event.target;
|
||||||
|
|
||||||
if (value === "" || SLUG_REGEX.test(value)) {
|
if (value === "" || SLUG_REGEX.test(value)) {
|
||||||
|
@ -152,7 +148,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getError = fieldName => getFieldError(errors, fieldName);
|
const getError = (fieldName: SeoField) => getFieldError(errors, fieldName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
|
@ -211,7 +207,6 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
<FormSpacer />
|
<FormSpacer />
|
||||||
<TextField
|
<TextField
|
||||||
name={SeoField.title}
|
name={SeoField.title}
|
||||||
error={!!getError(SeoField.title)}
|
|
||||||
label={
|
label={
|
||||||
<div className={classes.labelContainer}>
|
<div className={classes.labelContainer}>
|
||||||
<div className={classes.label}>
|
<div className={classes.label}>
|
||||||
|
@ -240,7 +235,6 @@ const SeoForm: React.FC<SeoFormProps> = props => {
|
||||||
/>
|
/>
|
||||||
<FormSpacer />
|
<FormSpacer />
|
||||||
<TextField
|
<TextField
|
||||||
error={!!getError(SeoField.description)}
|
|
||||||
name={SeoField.description}
|
name={SeoField.description}
|
||||||
label={
|
label={
|
||||||
<div className={classes.labelContainer}>
|
<div className={classes.labelContainer}>
|
||||||
|
|
|
@ -38,7 +38,7 @@ export interface PageDetailsPageProps {
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
errors: PageErrorFragment[];
|
errors: PageErrorFragment[];
|
||||||
page: PageDetails_page;
|
page: PageDetails_page;
|
||||||
isCreating?: boolean;
|
allowEmptySlug?: boolean;
|
||||||
saveButtonBarState: ConfirmButtonTransitionState;
|
saveButtonBarState: ConfirmButtonTransitionState;
|
||||||
onBack: () => void;
|
onBack: () => void;
|
||||||
onRemove: () => void;
|
onRemove: () => void;
|
||||||
|
@ -56,7 +56,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
|
||||||
}) => {
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const localizeDate = useDateLocalize();
|
const localizeDate = useDateLocalize();
|
||||||
const pageExists = page === null;
|
const pageExists = page !== null;
|
||||||
|
|
||||||
const initialForm: FormData = {
|
const initialForm: FormData = {
|
||||||
content: maybe(
|
content: maybe(
|
||||||
|
@ -79,7 +79,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
|
||||||
</AppHeader>
|
</AppHeader>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={
|
title={
|
||||||
pageExists
|
!pageExists
|
||||||
? intl.formatMessage({
|
? intl.formatMessage({
|
||||||
defaultMessage: "Create Page",
|
defaultMessage: "Create Page",
|
||||||
description: "page header"
|
description: "page header"
|
||||||
|
@ -99,7 +99,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
|
||||||
<CardSpacer />
|
<CardSpacer />
|
||||||
<SeoForm
|
<SeoForm
|
||||||
errors={errors}
|
errors={errors}
|
||||||
isCreating={pageExists}
|
allowEmptySlug={!pageExists}
|
||||||
description={data.seoDescription}
|
description={data.seoDescription}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
descriptionPlaceholder={maybe(
|
descriptionPlaceholder={maybe(
|
||||||
|
|
|
@ -306,7 +306,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<SeoForm
|
<SeoForm
|
||||||
isCreating={true}
|
allowEmptySlug={true}
|
||||||
helperText={intl.formatMessage({
|
helperText={intl.formatMessage({
|
||||||
defaultMessage:
|
defaultMessage:
|
||||||
"Add search engine title and description to make this product easier to find"
|
"Add search engine title and description to make this product easier to find"
|
||||||
|
|
Loading…
Reference in a new issue