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

fix seo form to work with null values from some props

Browse source
This commit is contained in:
Magdalena Markusik 2020-09-21 14:45:57 +02:00
parent 37e0ecce26
commit 77063deb4f
2 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -103,7 +103,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
publicationDate: maybe(() => collection.publicationDate, ""),
seoDescription: maybe(() => collection.seoDescription, ""),
seoTitle: maybe(() => collection.seoTitle, ""),
slug: collection.slug || ""
slug: collection?.slug || ""
}}
onSubmit={handleSubmit}
confirmLeave

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

@ -78,14 +78,14 @@ interface SeoFormProps {
const SeoForm: React.FC<SeoFormProps> = props => {
const {
description = "",
description,
descriptionPlaceholder,
disabled,
helperText,
loading,
title = "",
title,
slug,
slugPlaceholder = "",
slugPlaceholder,
titlePlaceholder,
onChange
} = props;
@ -95,6 +95,39 @@ 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>
@ -146,7 +179,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage:
"If empty, the preview shows what will be autogenerated."
})}
value={slug.slice(0, 69)}
value={slug?.slice(0, 69)}
disabled={loading || disabled}
placeholder={slug || slugify(slugPlaceholder)}
onChange={onChange}
@ -160,7 +193,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
<div className={classes.label}>
<FormattedMessage defaultMessage="Search engine title" />
</div>
{title.length > 0 && (
{title?.length > 0 && (
<span>
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
@ -178,7 +211,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage:
"If empty, the preview shows what will be autogenerated."
})}
value={title.slice(0, 69)}
value={title?.slice(0, 69)}
disabled={loading || disabled}
placeholder={titlePlaceholder}
onChange={onChange}
@ -192,7 +225,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
<div className={classes.label}>
<FormattedMessage defaultMessage="Search engine description" />
</div>
{description.length > 0 && (
{description?.length > 0 && (
<span>
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
@ -210,7 +243,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage:
"If empty, the preview shows what will be autogenerated."
})}
value={description ? description.slice(0, 299) : undefined}
value={description?.slice(0, 299)}
onChange={onChange}
disabled={loading || disabled}
fullWidth