djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor

Browse source
This commit is contained in:
Magdalena Markusik 2020-09-21 15:34:32 +02:00
parent 0f4d0f1195
commit ca644c9bb0
5 changed files with 480 additions and 2035 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.prettierrc
View file

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

2389
schema.graphql
View file

File diff suppressed because it is too large Load diff

57
src/components/SeoForm/SeoForm.tsx
View file

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

64
src/pages/components/PageSlug/PageSlug.tsx
View file

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

2
src/pages/components/PageSlug/index.ts
View file

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