refactor

.prettierrc

@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "printWidth": 140
 }

src/components/SeoForm/SeoForm.tsx

@@ -95,39 +95,6 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const [expanded, setExpansionStatus] = React.useState(false);
   const toggleExpansion = () => setExpansionStatus(!expanded);
   const shouldDisplayHelperText = () => helperText && !expanded;
-  // const getParsedProps = () => {
-  //   const keysToParse: Array<keyof SeoFormProps> = [
-  //     "slug",
-  //     "slugPlaceholder",
-  //     "description",
-  //     "descriptionPlaceholder",
-  //     "title",
-  //     "titlePlaceholder"
-  //   ];
-
-  //   return reduce(
-  //     props,
-  //     (result, value, key: keyof SeoFormProps) => {
-  //       console.log({ result, value, key });
-  //       if (keysToParse.includes(key)) {
-  //         return { ...result, [key]: !!value ? "" : value };
-  //       }
-  //       return result;
-  //     },
-  //     {} as Partial<SeoFormProps>
-  //   );
-  // };
-
-  // const {
-  //   title,
-  //   titlePlaceholder,
-  //   slug,
-  //   slugPlaceholder,
-  //   description,
-  //   descriptionPlaceholder
-  // } = getParsedProps();
-
-  // console.log({ ...getParsedProps() });
 
   return (
     <Card>
@@ -137,21 +104,12 @@ const SeoForm: React.FC<SeoFormProps> = props => {
         })}
         toolbar={
           <Button color="primary" variant="text" onClick={toggleExpansion}>
-            <FormattedMessage
-              defaultMessage="Edit website SEO"
-              description="button"
-            />
+            <FormattedMessage defaultMessage="Edit website SEO" description="button" />
           </Button>
         }
       />
       <CardContent>
-        {shouldDisplayHelperText() && (
-          <Typography
-            className={classNames({ [classes.helperText]: expanded })}
-          >
-            {helperText}
-          </Typography>
-        )}
+        {shouldDisplayHelperText() && <Typography className={classNames({ [classes.helperText]: expanded })}>{helperText}</Typography>}
         {expanded && (
           <div className={classes.container}>
             <TextField
@@ -176,12 +134,11 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 </div>
               }
               helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
+                defaultMessage: "If empty, the preview shows what will be autogenerated."
               })}
               value={slug?.slice(0, 69)}
               disabled={loading || disabled}
-              placeholder={slug || slugify(slugPlaceholder)}
+              placeholder={slug || slugify(slugPlaceholder, { lower: true })}
               onChange={onChange}
               fullWidth
             />
@@ -208,8 +165,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 </div>
               }
               helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
+                defaultMessage: "If empty, the preview shows what will be autogenerated."
               })}
               value={title?.slice(0, 69)}
               disabled={loading || disabled}
@@ -240,8 +196,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 </div>
               }
               helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
+                defaultMessage: "If empty, the preview shows what will be autogenerated."
               })}
               value={description?.slice(0, 299)}
               onChange={onChange}

src/pages/components/PageSlug/PageSlug.tsx

@@ -1,64 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import TextField from "@material-ui/core/TextField";
-import CardTitle from "@saleor/components/CardTitle";
-import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
-import { getFormErrors } from "@saleor/utils/errors";
-import getPageErrorMessage from "@saleor/utils/errors/page";
-import React from "react";
-import { useIntl } from "react-intl";
-import slugify from "slugify";
-
-import { FormData } from "../PageDetailsPage";
-
-export interface PageSlugProps {
-  data: FormData;
-  disabled: boolean;
-  errors: PageErrorFragment[];
-  onChange: (event: React.ChangeEvent<any>) => void;
-}
-
-const PageSlug: React.FC<PageSlugProps> = ({
-  data,
-  disabled,
-  errors,
-  onChange
-}) => {
-  const intl = useIntl();
-
-  const formErrors = getFormErrors(["slug"], errors);
-
-  return (
-    <Card>
-      <CardTitle
-        title={intl.formatMessage({
-          defaultMessage: "URL"
-        })}
-      />
-      <CardContent>
-        <TextField
-          name={"slug" as keyof FormData}
-          disabled={disabled}
-          error={!!formErrors.slug}
-          label={intl.formatMessage({
-            defaultMessage: "Slug",
-            description: "page internal name"
-          })}
-          helperText={
-            getPageErrorMessage(formErrors.slug, intl) ||
-            intl.formatMessage({
-              defaultMessage:
-                "If empty, URL will be autogenerated from Page Name"
-            })
-          }
-          placeholder={slugify(data.title)}
-          value={data.slug}
-          onChange={onChange}
-          fullWidth
-        />
-      </CardContent>
-    </Card>
-  );
-};
-PageSlug.displayName = "PageSlug";
-export default PageSlug;

src/pages/components/PageSlug/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./PageSlug";
-export * from "./PageSlug";