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

src/components/name/Basic.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const Basic = ({ data, className }: Props) => {
   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}>
         {data.ranking && (
           <p className={styles.rating}>

src/components/name/Credits.tsx

@@ -13,8 +13,6 @@ const Credits = ({ className, data }: Props) => {
   return (
     <section className={`${className} ${styles.credits}`}>
       <h2 className='heading heading__secondary'>Credits</h2>
-      <section>
-        <h3 className='heading heading__tertiary'>Released</h3>
       {data.released.map(
         (item, i) =>
           !!item.total && (
@@ -39,34 +37,6 @@ const Credits = ({ className, data }: Props) => {
           )
       )}
     </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>
   );
 };
 

src/components/name/DidYouKnow.tsx

@@ -7,9 +7,8 @@ type Props = {
 };
 
 const DidYouKnow = ({ data }: Props) => (
-  <section className={styles.didYouKnow}>
+  <section className={styles.container}>
     <h2 className='heading heading__secondary'>Did you know</h2>
-    <div className={styles.container}>
     {!!data.trivia?.total && (
       <section>
         <h3 className='heading heading__tertiary'>Trivia</h3>
@@ -46,7 +45,6 @@ const DidYouKnow = ({ data }: Props) => (
         </p>
       </section>
     )}
-    </div>
   </section>
 );
 

src/components/name/Info.tsx

@@ -82,6 +82,7 @@ const PersonalDetails = ({ info, accolades }: Props) => {
             <p>
               <span>Died: </span>
               <span>{info.death.date}</span>
+              {info.death.location && (
                 <span>
                   {' '}
                   in{' '}
@@ -89,6 +90,7 @@ const PersonalDetails = ({ info, accolades }: Props) => {
                     <a className='link'>{info.death.location}</a>
                   </Link>
                 </span>
+              )}
             </p>
           )}
           {info.death.cause && (
@@ -102,11 +104,9 @@ const PersonalDetails = ({ info, accolades }: Props) => {
               <span>Spouses: </span>
               {info.spouses.map((spouse, i) => (
                 <span key={spouse.name}>
-                  <>
                   {!!i && ', '}
-                    {renderPersonNameWithLink(spouse)} {spouse.range} (
+                  {renderPersonNameWithLink(spouse)} {spouse.range}
-                    {spouse.attributes.join(', ')})
+                  {spouse.attributes && ' (' + spouse.attributes.join(', ') + ')'}
-                  </>
                 </span>
               ))}
             </p>
@@ -116,10 +116,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
               <span>Children: </span>
               {info.children.map((child, i) => (
                 <span key={child.name}>
-                  <>
                   {!!i && ', '}
                   {renderPersonNameWithLink(child)}
-                  </>
                 </span>
               ))}
             </p>
@@ -129,10 +127,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
               <span>Parents: </span>
               {info.parents.map((parent, i) => (
                 <span key={parent.name}>
-                  <>
                   {!!i && ', '}
                   {renderPersonNameWithLink(parent)}
-                  </>
                 </span>
               ))}
             </p>
@@ -142,10 +138,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
               <span>Relatives: </span>
               {info.relatives.map((relative, i) => (
                 <span key={relative.name}>
-                  <>
                   {!!i && ', '}
                   {renderPersonNameWithLink(relative)} ({relative.relation})
-                  </>
                 </span>
               ))}
             </p>
@@ -155,10 +149,8 @@ const PersonalDetails = ({ info, accolades }: Props) => {
               <span>Other Works: </span>
               {info.otherWorks.map((work, i) => (
                 <span key={work.text}>
-                  <>
                   {!!i && ', '}
                   <span dangerouslySetInnerHTML={{ __html: work.text }} />
-                  </>
                 </span>
               ))}
             </p>

src/interfaces/misc/rawName.ts

@@ -34,7 +34,7 @@ export default interface Name {
           total: number;
         };*/
 
-        primaryImage: {
+        primaryImage?: {
           id: string;
           url: string;
           height: number;
@@ -882,7 +882,7 @@ export default interface Name {
               plainText: string;
             };
           };
-          attributes: Array<{
+          attributes?: Array<{
             id: string;
             text: string;
           }>;

src/interfaces/misc/rawTitle.ts

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

src/styles/modules/components/name/credits.module.scss

@@ -4,12 +4,6 @@
   display: grid;
   gap: var(--comp-whitespace);
 
-  & > section {
-    overflow-x: auto;
-    display: grid;
-    gap: var(--spacer-1);
-  }
-
   details {
     overflow-x: auto;
   }

src/styles/modules/components/name/did-you-know.module.scss

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

src/utils/cleaners/name.ts

@@ -139,7 +139,7 @@ const cleanName = (rawData: RawName) => {
         })),
       },
       released: getCredits(misc.releasedPrimaryCredits),
-      unreleased: getCredits<'unreleased'>(misc.unreleasedPrimaryCredits),
+      // unreleased: getCredits<'unreleased'>(misc.unreleasedPrimaryCredits),
     },
     personalDetails: {
       officialSites: misc.personalDetailsExternalLinks.edges.map(item => ({
@@ -162,7 +162,7 @@ const cleanName = (rawData: RawName) => {
           name: spouse.spouse.asMarkdown.plainText,
           id: spouse.spouse.name?.id ?? null,
           range: spouse.timeRange.displayableProperty.value.plaidHtml,
-          attributes: spouse.attributes.map(attr => attr.text),
+          attributes: spouse.attributes?.map(attr => attr.text) ?? null,
         })) ?? null,
       children: misc.children.edges.map(child => ({
         name: child.node.relationName.displayableProperty.value.plainText,

src/utils/cleaners/title.ts

@@ -81,7 +81,7 @@ const cleanTitle = (rawData: RawTitle) => {
           isMature: main.primaryVideos.edges[0].node.isMature,
           thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
           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 => ({
             resolution: url.displayName.value,
             mimeType: url.mimeType,