fix(name): fix a couple of crashes in name and title route
This commit is contained in:
parent
be80244eb3
commit
8d9b6630a5
10 changed files with 95 additions and 141 deletions
|
@ -10,7 +10,7 @@ type Props = {
|
||||||
|
|
||||||
const Basic = ({ data, className }: Props) => {
|
const Basic = ({ data, className }: Props) => {
|
||||||
return (
|
return (
|
||||||
<CardBasic className={className} image={data.poster.url} title={data.name}>
|
<CardBasic className={className} image={data.poster?.url} title={data.name}>
|
||||||
<div className={styles.ratings}>
|
<div className={styles.ratings}>
|
||||||
{data.ranking && (
|
{data.ranking && (
|
||||||
<p className={styles.rating}>
|
<p className={styles.rating}>
|
||||||
|
|
|
@ -13,59 +13,29 @@ const Credits = ({ className, data }: Props) => {
|
||||||
return (
|
return (
|
||||||
<section className={`${className} ${styles.credits}`}>
|
<section className={`${className} ${styles.credits}`}>
|
||||||
<h2 className='heading heading__secondary'>Credits</h2>
|
<h2 className='heading heading__secondary'>Credits</h2>
|
||||||
<section>
|
{data.released.map(
|
||||||
<h3 className='heading heading__tertiary'>Released</h3>
|
(item, i) =>
|
||||||
{data.released.map(
|
!!item.total && (
|
||||||
(item, i) =>
|
<details open={i === 0} key={item.category.id}>
|
||||||
!!item.total && (
|
<summary>
|
||||||
<details open={i === 0} key={item.category.id}>
|
{item.category.text} ({item.total})
|
||||||
<summary>
|
</summary>
|
||||||
{item.category.text} ({item.total})
|
<ul className={styles.container} key={item.category.id}>
|
||||||
</summary>
|
{item.titles.map(title => (
|
||||||
<ul className={styles.container} key={item.category.id}>
|
<CardTitle
|
||||||
{item.titles.map(title => (
|
key={title.id}
|
||||||
<CardTitle
|
link={`/title/${title.id}`}
|
||||||
key={title.id}
|
name={title.title}
|
||||||
link={`/title/${title.id}`}
|
titleType={title.type.text}
|
||||||
name={title.title}
|
image={title.poster?.url}
|
||||||
titleType={title.type.text}
|
year={title.releaseYear}
|
||||||
image={title.poster?.url}
|
ratings={title.ratings}
|
||||||
year={title.releaseYear}
|
/>
|
||||||
ratings={title.ratings}
|
))}
|
||||||
/>
|
</ul>
|
||||||
))}
|
</details>
|
||||||
</ul>
|
)
|
||||||
</details>
|
)}
|
||||||
)
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h3 className='heading heading__tertiary'>Unreleased</h3>
|
|
||||||
{data.unreleased.map(
|
|
||||||
(item, i) =>
|
|
||||||
!!item.total && (
|
|
||||||
<details open={i === 0} key={item.category.id}>
|
|
||||||
<summary>
|
|
||||||
{item.category.text} ({item.total})
|
|
||||||
</summary>
|
|
||||||
<ul className={styles.container}>
|
|
||||||
{item.titles.map(title => (
|
|
||||||
<CardTitle
|
|
||||||
key={title.id}
|
|
||||||
link={`/title/${title.id}`}
|
|
||||||
name={title.title}
|
|
||||||
titleType={title.type.text}
|
|
||||||
image={title.poster?.url}
|
|
||||||
year={title.releaseYear}
|
|
||||||
>
|
|
||||||
<p>{title.productionStatus}</p>
|
|
||||||
</CardTitle>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,46 +7,44 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const DidYouKnow = ({ data }: Props) => (
|
const DidYouKnow = ({ data }: Props) => (
|
||||||
<section className={styles.didYouKnow}>
|
<section className={styles.container}>
|
||||||
<h2 className='heading heading__secondary'>Did you know</h2>
|
<h2 className='heading heading__secondary'>Did you know</h2>
|
||||||
<div className={styles.container}>
|
{!!data.trivia?.total && (
|
||||||
{!!data.trivia?.total && (
|
<section>
|
||||||
<section>
|
<h3 className='heading heading__tertiary'>Trivia</h3>
|
||||||
<h3 className='heading heading__tertiary'>Trivia</h3>
|
<div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
|
||||||
<div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
|
</section>
|
||||||
</section>
|
)}
|
||||||
)}
|
{!!data.quotes?.total && (
|
||||||
{!!data.quotes?.total && (
|
<section>
|
||||||
<section>
|
<h3 className='heading heading__tertiary'>Quotes</h3>
|
||||||
<h3 className='heading heading__tertiary'>Quotes</h3>
|
<div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
|
||||||
<div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
|
</section>
|
||||||
</section>
|
)}
|
||||||
)}
|
{!!data.trademark?.total && (
|
||||||
{!!data.trademark?.total && (
|
<section>
|
||||||
<section>
|
<h3 className='heading heading__tertiary'>Trademark</h3>
|
||||||
<h3 className='heading heading__tertiary'>Trademark</h3>
|
<div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
|
||||||
<div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
|
</section>
|
||||||
</section>
|
)}
|
||||||
)}
|
{!!data.nicknames.length && (
|
||||||
{!!data.nicknames.length && (
|
<section>
|
||||||
<section>
|
<h3 className='heading heading__tertiary'>Nicknames</h3>
|
||||||
<h3 className='heading heading__tertiary'>Nicknames</h3>
|
<p>{data.nicknames.join(', ')}</p>
|
||||||
<p>{data.nicknames.join(', ')}</p>
|
</section>
|
||||||
</section>
|
)}
|
||||||
)}
|
{!!data.salary?.total && (
|
||||||
{!!data.salary?.total && (
|
<section>
|
||||||
<section>
|
<h3 className='heading heading__tertiary'>Salary</h3>
|
||||||
<h3 className='heading heading__tertiary'>Salary</h3>
|
<p>
|
||||||
<p>
|
<span>{data.salary.value} in </span>
|
||||||
<span>{data.salary.value} in </span>
|
<Link href={`/title/${data.salary.title.id}`}>
|
||||||
<Link href={`/title/${data.salary.title.id}`}>
|
<a className={'link'}>{data.salary.title.text}</a>
|
||||||
<a className={'link'}>{data.salary.title.text}</a>
|
</Link>
|
||||||
</Link>
|
<span> ({data.salary.title.year})</span>
|
||||||
<span> ({data.salary.title.year})</span>
|
</p>
|
||||||
</p>
|
</section>
|
||||||
</section>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -82,13 +82,15 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<p>
|
<p>
|
||||||
<span>Died: </span>
|
<span>Died: </span>
|
||||||
<span>{info.death.date}</span>
|
<span>{info.death.date}</span>
|
||||||
<span>
|
{info.death.location && (
|
||||||
{' '}
|
<span>
|
||||||
in{' '}
|
{' '}
|
||||||
<Link href={`/search/name?death_place=${info.death.location}`}>
|
in{' '}
|
||||||
<a className='link'>{info.death.location}</a>
|
<Link href={`/search/name?death_place=${info.death.location}`}>
|
||||||
</Link>
|
<a className='link'>{info.death.location}</a>
|
||||||
</span>
|
</Link>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{info.death.cause && (
|
{info.death.cause && (
|
||||||
|
@ -102,11 +104,9 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<span>Spouses: </span>
|
<span>Spouses: </span>
|
||||||
{info.spouses.map((spouse, i) => (
|
{info.spouses.map((spouse, i) => (
|
||||||
<span key={spouse.name}>
|
<span key={spouse.name}>
|
||||||
<>
|
{!!i && ', '}
|
||||||
{!!i && ', '}
|
{renderPersonNameWithLink(spouse)} {spouse.range}
|
||||||
{renderPersonNameWithLink(spouse)} {spouse.range} (
|
{spouse.attributes && ' (' + spouse.attributes.join(', ') + ')'}
|
||||||
{spouse.attributes.join(', ')})
|
|
||||||
</>
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</p>
|
</p>
|
||||||
|
@ -116,10 +116,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<span>Children: </span>
|
<span>Children: </span>
|
||||||
{info.children.map((child, i) => (
|
{info.children.map((child, i) => (
|
||||||
<span key={child.name}>
|
<span key={child.name}>
|
||||||
<>
|
{!!i && ', '}
|
||||||
{!!i && ', '}
|
{renderPersonNameWithLink(child)}
|
||||||
{renderPersonNameWithLink(child)}
|
|
||||||
</>
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</p>
|
</p>
|
||||||
|
@ -129,10 +127,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<span>Parents: </span>
|
<span>Parents: </span>
|
||||||
{info.parents.map((parent, i) => (
|
{info.parents.map((parent, i) => (
|
||||||
<span key={parent.name}>
|
<span key={parent.name}>
|
||||||
<>
|
{!!i && ', '}
|
||||||
{!!i && ', '}
|
{renderPersonNameWithLink(parent)}
|
||||||
{renderPersonNameWithLink(parent)}
|
|
||||||
</>
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</p>
|
</p>
|
||||||
|
@ -142,10 +138,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<span>Relatives: </span>
|
<span>Relatives: </span>
|
||||||
{info.relatives.map((relative, i) => (
|
{info.relatives.map((relative, i) => (
|
||||||
<span key={relative.name}>
|
<span key={relative.name}>
|
||||||
<>
|
{!!i && ', '}
|
||||||
{!!i && ', '}
|
{renderPersonNameWithLink(relative)} ({relative.relation})
|
||||||
{renderPersonNameWithLink(relative)} ({relative.relation})
|
|
||||||
</>
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</p>
|
</p>
|
||||||
|
@ -155,10 +149,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
|
||||||
<span>Other Works: </span>
|
<span>Other Works: </span>
|
||||||
{info.otherWorks.map((work, i) => (
|
{info.otherWorks.map((work, i) => (
|
||||||
<span key={work.text}>
|
<span key={work.text}>
|
||||||
<>
|
{!!i && ', '}
|
||||||
{!!i && ', '}
|
<span dangerouslySetInnerHTML={{ __html: work.text }} />
|
||||||
<span dangerouslySetInnerHTML={{ __html: work.text }} />
|
|
||||||
</>
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -34,7 +34,7 @@ export default interface Name {
|
||||||
total: number;
|
total: number;
|
||||||
};*/
|
};*/
|
||||||
|
|
||||||
primaryImage: {
|
primaryImage?: {
|
||||||
id: string;
|
id: string;
|
||||||
url: string;
|
url: string;
|
||||||
height: number;
|
height: number;
|
||||||
|
@ -687,13 +687,13 @@ export default interface Name {
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
titleGenres: {
|
titleGenres: {
|
||||||
genres: Array<{
|
genres: Array<{
|
||||||
genre: {
|
genre: {
|
||||||
text: string;
|
text: string;
|
||||||
};
|
};
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
productionStatus: {
|
productionStatus: {
|
||||||
currentProductionStage: {
|
currentProductionStage: {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -882,7 +882,7 @@ export default interface Name {
|
||||||
plainText: string;
|
plainText: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
attributes: Array<{
|
attributes?: Array<{
|
||||||
id: string;
|
id: string;
|
||||||
text: string;
|
text: string;
|
||||||
}>;
|
}>;
|
||||||
|
|
|
@ -125,7 +125,7 @@ export default interface RawTitle {
|
||||||
runtime: {
|
runtime: {
|
||||||
value: number;
|
value: number;
|
||||||
};
|
};
|
||||||
description: {
|
description?: {
|
||||||
value: string;
|
value: string;
|
||||||
language: string;
|
language: string;
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,12 +4,6 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--comp-whitespace);
|
gap: var(--comp-whitespace);
|
||||||
|
|
||||||
& > section {
|
|
||||||
overflow-x: auto;
|
|
||||||
display: grid;
|
|
||||||
gap: var(--spacer-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
details {
|
details {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.bio {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--comp-whitespace);
|
gap: var(--comp-whitespace);
|
||||||
}
|
}
|
||||||
|
|
|
@ -139,7 +139,7 @@ const cleanName = (rawData: RawName) => {
|
||||||
})),
|
})),
|
||||||
},
|
},
|
||||||
released: getCredits(misc.releasedPrimaryCredits),
|
released: getCredits(misc.releasedPrimaryCredits),
|
||||||
unreleased: getCredits<'unreleased'>(misc.unreleasedPrimaryCredits),
|
// unreleased: getCredits<'unreleased'>(misc.unreleasedPrimaryCredits),
|
||||||
},
|
},
|
||||||
personalDetails: {
|
personalDetails: {
|
||||||
officialSites: misc.personalDetailsExternalLinks.edges.map(item => ({
|
officialSites: misc.personalDetailsExternalLinks.edges.map(item => ({
|
||||||
|
@ -162,7 +162,7 @@ const cleanName = (rawData: RawName) => {
|
||||||
name: spouse.spouse.asMarkdown.plainText,
|
name: spouse.spouse.asMarkdown.plainText,
|
||||||
id: spouse.spouse.name?.id ?? null,
|
id: spouse.spouse.name?.id ?? null,
|
||||||
range: spouse.timeRange.displayableProperty.value.plaidHtml,
|
range: spouse.timeRange.displayableProperty.value.plaidHtml,
|
||||||
attributes: spouse.attributes.map(attr => attr.text),
|
attributes: spouse.attributes?.map(attr => attr.text) ?? null,
|
||||||
})) ?? null,
|
})) ?? null,
|
||||||
children: misc.children.edges.map(child => ({
|
children: misc.children.edges.map(child => ({
|
||||||
name: child.node.relationName.displayableProperty.value.plainText,
|
name: child.node.relationName.displayableProperty.value.plainText,
|
||||||
|
|
|
@ -81,7 +81,7 @@ const cleanTitle = (rawData: RawTitle) => {
|
||||||
isMature: main.primaryVideos.edges[0].node.isMature,
|
isMature: main.primaryVideos.edges[0].node.isMature,
|
||||||
thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
|
thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
|
||||||
runtime: main.primaryVideos.edges[0].node.runtime.value,
|
runtime: main.primaryVideos.edges[0].node.runtime.value,
|
||||||
caption: main.primaryVideos.edges[0].node.description.value,
|
caption: main.primaryVideos.edges[0].node.description?.value ?? null,
|
||||||
urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
|
urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
|
||||||
resolution: url.displayName.value,
|
resolution: url.displayName.value,
|
||||||
mimeType: url.mimeType,
|
mimeType: url.mimeType,
|
||||||
|
|
Loading…
Reference in a new issue