refactor after review

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -79,7 +79,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
               />
               <CardSpacer />
               <SeoForm
-                isCreating={true}
+                allowEmptySlug={true}
                 helperText={intl.formatMessage({
                   defaultMessage:
                     "Add search engine title and description to make this category easier to find"

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -135,7 +135,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                 />
                 <CardSpacer />
                 <SeoForm
-                  isCreating={true}
+                  allowEmptySlug={true}
                   description={data.seoDescription}
                   disabled={disabled}
                   descriptionPlaceholder=""

src/components/SeoForm/SeoForm.tsx

@@ -81,7 +81,7 @@ interface SeoFormProps {
   errors?: Array<PageErrorFragment | ProductErrorFragment>;
   loading?: boolean;
   helperText?: string;
-  isCreating?: boolean;
+  allowEmptySlug?: boolean;
   title: string;
   slug: string;
   slugPlaceholder?: string;
@@ -97,7 +97,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
     disabled,
     errors = [],
     helperText,
-    isCreating = false,
+    allowEmptySlug = false,
     loading,
     title,
     slug,
@@ -124,15 +124,11 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const getSlugHelperMessage = () => {
     const error = !!getError(SeoField.slug);
 
-    if (isCreating && !error) {
+    if (allowEmptySlug && !error) {
       return intl.formatMessage(seoFieldMessage);
     }
 
-    if (error) {
-      return getSlugErrorMessage();
-    }
-
-    return "";
+    return error ? getSlugErrorMessage() : "";
   };
 
   const getSlugErrorMessage = () => {
@@ -144,7 +140,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
       : getPageErrorMessage(error as PageErrorFragment, intl);
   };
 
-  const handleSlugChange = event => {
+  const handleSlugChange = (event: React.ChangeEvent<any>) => {
     const { value } = event.target;
 
     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 (
     <Card>
@@ -211,7 +207,6 @@ const SeoForm: React.FC<SeoFormProps> = props => {
             <FormSpacer />
             <TextField
               name={SeoField.title}
-              error={!!getError(SeoField.title)}
               label={
                 <div className={classes.labelContainer}>
                   <div className={classes.label}>
@@ -240,7 +235,6 @@ const SeoForm: React.FC<SeoFormProps> = props => {
             />
             <FormSpacer />
             <TextField
-              error={!!getError(SeoField.description)}
               name={SeoField.description}
               label={
                 <div className={classes.labelContainer}>

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -38,7 +38,7 @@ export interface PageDetailsPageProps {
   disabled: boolean;
   errors: PageErrorFragment[];
   page: PageDetails_page;
-  isCreating?: boolean;
+  allowEmptySlug?: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onRemove: () => void;
@@ -56,7 +56,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
-  const pageExists = page === null;
+  const pageExists = page !== null;
 
   const initialForm: FormData = {
     content: maybe(
@@ -79,7 +79,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
           </AppHeader>
           <PageHeader
             title={
-              pageExists
+              !pageExists
                 ? intl.formatMessage({
                     defaultMessage: "Create Page",
                     description: "page header"
@@ -99,7 +99,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
               <CardSpacer />
               <SeoForm
                 errors={errors}
-                isCreating={pageExists}
+                allowEmptySlug={!pageExists}
                 description={data.seoDescription}
                 disabled={disabled}
                 descriptionPlaceholder={maybe(

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -306,7 +306,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   </>
                 )}
                 <SeoForm
-                  isCreating={true}
+                  allowEmptySlug={true}
                   helperText={intl.formatMessage({
                     defaultMessage:
                       "Add search engine title and description to make this product easier to find"