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,59 +13,29 @@ 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 && (
-              <details open={i === 0} key={item.category.id}>
-                <summary>
-                  {item.category.text} ({item.total})
-                </summary>
-                <ul className={styles.container} key={item.category.id}>
-                  {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}
-                      ratings={title.ratings}
-                    />
-                  ))}
-                </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>
+      {data.released.map(
+        (item, i) =>
+          !!item.total && (
+            <details open={i === 0} key={item.category.id}>
+              <summary>
+                {item.category.text} ({item.total})
+              </summary>
+              <ul className={styles.container} key={item.category.id}>
+                {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}
+                    ratings={title.ratings}
+                  />
+                ))}
+              </ul>
+            </details>
+          )
+      )}
     </section>
   );
 };

src/components/name/DidYouKnow.tsx

@@ -7,46 +7,44 @@ 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>
-          <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
-        </section>
-      )}
-      {!!data.quotes?.total && (
-        <section>
-          <h3 className='heading heading__tertiary'>Quotes</h3>
-          <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
-        </section>
-      )}
-      {!!data.trademark?.total && (
-        <section>
-          <h3 className='heading heading__tertiary'>Trademark</h3>
-          <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
-        </section>
-      )}
-      {!!data.nicknames.length && (
-        <section>
-          <h3 className='heading heading__tertiary'>Nicknames</h3>
-          <p>{data.nicknames.join(', ')}</p>
-        </section>
-      )}
-      {!!data.salary?.total && (
-        <section>
-          <h3 className='heading heading__tertiary'>Salary</h3>
-          <p>
-            <span>{data.salary.value} in </span>
-            <Link href={`/title/${data.salary.title.id}`}>
-              <a className={'link'}>{data.salary.title.text}</a>
-            </Link>
-            <span> ({data.salary.title.year})</span>
-          </p>
-        </section>
-      )}
-    </div>
+    {!!data.trivia?.total && (
+      <section>
+        <h3 className='heading heading__tertiary'>Trivia</h3>
+        <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
+      </section>
+    )}
+    {!!data.quotes?.total && (
+      <section>
+        <h3 className='heading heading__tertiary'>Quotes</h3>
+        <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
+      </section>
+    )}
+    {!!data.trademark?.total && (
+      <section>
+        <h3 className='heading heading__tertiary'>Trademark</h3>
+        <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
+      </section>
+    )}
+    {!!data.nicknames.length && (
+      <section>
+        <h3 className='heading heading__tertiary'>Nicknames</h3>
+        <p>{data.nicknames.join(', ')}</p>
+      </section>
+    )}
+    {!!data.salary?.total && (
+      <section>
+        <h3 className='heading heading__tertiary'>Salary</h3>
+        <p>
+          <span>{data.salary.value} in </span>
+          <Link href={`/title/${data.salary.title.id}`}>
+            <a className={'link'}>{data.salary.title.text}</a>
+          </Link>
+          <span> ({data.salary.title.year})</span>
+        </p>
+      </section>
+    )}
   </section>
 );
 

src/components/name/Info.tsx

@@ -82,13 +82,15 @@ const PersonalDetails = ({ info, accolades }: Props) => {
             <p>
               <span>Died: </span>
               <span>{info.death.date}</span>
-              <span>
-                {' '}
-                in{' '}
-                <Link href={`/search/name?death_place=${info.death.location}`}>
-                  <a className='link'>{info.death.location}</a>
-                </Link>
-              </span>
+              {info.death.location && (
+                <span>
+                  {' '}
+                  in{' '}
+                  <Link href={`/search/name?death_place=${info.death.location}`}>
+                    <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} (
-                    {spouse.attributes.join(', ')})
-                  </>
+                  {!!i && ', '}
+                  {renderPersonNameWithLink(spouse)} {spouse.range}
+                  {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)}
-                  </>
+                  {!!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)}
-                  </>
+                  {!!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})
-                  </>
+                  {!!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 }} />
-                  </>
+                  {!!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;
@@ -687,13 +687,13 @@ export default interface Name {
                       }>;
                     };
                   };
-                 titleGenres: {
-                  genres: Array<{
-                    genre: {
-                      text: string;
-                    };
-                  }>;
-                };
+                  titleGenres: {
+                    genres: Array<{
+                      genre: {
+                        text: string;
+                      };
+                    }>;
+                  };
                   productionStatus: {
                     currentProductionStage: {
                       id: string;
@@ -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,