fix(name): fix a couple of crashes in name and title route

This commit is contained in:
zyachel 2023-05-21 14:44:54 +05:30
parent be80244eb3
commit 8d9b6630a5
10 changed files with 95 additions and 141 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -125,7 +125,7 @@ export default interface RawTitle {
runtime: { runtime: {
value: number; value: number;
}; };
description: { description?: {
value: string; value: string;
language: string; language: string;
}; };

View file

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

View file

@ -1,4 +1,4 @@
.bio { .container {
display: grid; display: grid;
gap: var(--comp-whitespace); gap: var(--comp-whitespace);
} }

View file

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

View file

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