refactor after review

This commit is contained in:
Magdalena Markusik 2020-09-25 16:21:10 +02:00
parent fe2b15c798
commit f956be3fbc
5 changed files with 13 additions and 19 deletions

View file

@ -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"

View file

@ -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=""

View file

@ -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}>

View file

@ -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(

View file

@ -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"