fix(title): fix title route crash

was due to an upstream change.
also show ai summary, ratings distrubution, and multiple user
reviews

re https://github.com/zyachel/libremdb/issues/98

src/components/title/Reviews.tsx

@@ -1,82 +1,127 @@
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { Reviews } from 'src/interfaces/shared/title';
+import type { Reviews as TReviews } from 'src/interfaces/shared/title';
 import { formatNumber } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/title/reviews.module.scss';
 
 type Props = {
-  reviews: Reviews;
+  reviews: TReviews;
 };
 
 const Reviews = ({ reviews }: Props) => {
-  const router = useRouter();
-  const { titleId } = router.query;
-
   return (
     <section className={styles.reviews}>
-      <h2 className="heading heading__secondary">Reviews</h2>
+      <h2 className='heading heading__secondary'>Reviews</h2>
 
-      {reviews.featuredReview && (
+      <RatingsDistribution ratings={reviews.ratingsDistribution} />
-        <article className={styles.reviews__reviewContainer}>
+
+      <section className={styles.userReviews}>
+        <h3 className='heading heading__tertiary'>User Reviews</h3>
+        {reviews.featuredReviews ? (
+          <ul className={styles.userReviews__list} role='list'>
+            {reviews.featuredReviews.map(featuredReview => (
+              <li key={featuredReview.id}>
                 <details className={styles.review}>
                   <summary className={styles.review__summary}>
-              <strong>{reviews.featuredReview.review.summary}</strong>
+                    <strong>{featuredReview.review.summary}</strong>
                   </summary>
                   <div
                     className={styles.review__text}
                     dangerouslySetInnerHTML={{
-                __html: reviews.featuredReview.review.html,
+                      __html: featuredReview.review.html,
                     }}
                   ></div>
-          </details>
                   <footer className={styles.review__metadata}>
                     <p>
-              {reviews.featuredReview.rating && (
+                      {featuredReview.rating && <span>Rated {featuredReview.rating}/10</span>}
-                <span>Rated {reviews.featuredReview.rating}/10</span>
-              )}
                       <span>
                         {' '}
                         by{' '}
-                <Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
+                        <Link href={`/user/${featuredReview.reviewer.id}`}>
-                  <a className="link">{reviews.featuredReview.reviewer.name}</a>
+                          <a className='link'>{featuredReview.reviewer.name}</a>
                         </Link>
                       </span>
-              <span> on {reviews.featuredReview.date}.</span>
-            </p>
-            <p>
-              <span>
-                {formatNumber(reviews.featuredReview.votes.up)} upvotes
-              </span>
-              <span>
-                , {formatNumber(reviews.featuredReview.votes.down)} downvotes
-              </span>
                     </p>
                   </footer>
-        </article>
+                </details>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>No reviews yet.</p>
+        )}
+      </section>
+
+      {reviews.ai?.summary && (
+        <details className={styles.reviewAi}>
+          <summary className='heading heading__tertiary'>AI Summary</summary>
+          <p dangerouslySetInnerHTML={{ __html: reviews.ai.summary }} />
+          <ul>
+            {reviews.ai.themes.map(theme => (
+              <li key={theme.id}>{theme.text}</li>
+            ))}
+          </ul>
+        </details>
       )}
 
-      <div className={styles.reviews__stats}>
+      <ReviewStats reviews={reviews} />
+    </section>
+  );
+};
+
+export default Reviews;
+
+const RatingsDistribution = ({ ratings }: { ratings: Props['reviews']['ratingsDistribution'] }) => {
+  const maxRating = Math.max(...ratings.map(r => r.votes));
+
+  return (
+    <div className={styles.ratingsDistribution}>
+      <h3 className='heading heading__tertiary'>Ratings Distribution</h3>
+      {ratings.length ? (
+        <ul>
+          {ratings.map(rating => (
+            <li
+              key={rating.rating}
+              style={
+                {
+                  '--bar-height': `${((rating.votes / maxRating) * 100).toFixed(2)}%`,
+                } as React.CSSProperties
+              }
+            >
+              <span>
+                {rating.rating} <span>({formatNumber(rating.votes)})</span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No ratings yet.</p>
+      )}
+    </div>
+  );
+};
+
+const ReviewStats = ({ reviews }: { reviews: Props['reviews'] }) => {
+  const router = useRouter();
+  const { titleId } = router.query;
+
+  return (
+    <div className={styles.reviewStats}>
       <p>
         <Link href={`/title/${titleId}/reviews`}>
-            <a className="link">
+          <a className='link'>{formatNumber(reviews.numUserReviews)} User reviews</a>
-              {formatNumber(reviews.numUserReviews)} User reviews
-            </a>
         </Link>
       </p>
       <p>
         <Link href={`/title/${titleId}/externalreviews`}>
-            <a className="link">
+          <a className='link'>{formatNumber(reviews.numCriticReviews)} Critic reviews</a>
-              {formatNumber(reviews.numCriticReviews)} Critic reviews
-            </a>
         </Link>
       </p>
       <p>
         <Link href={`/title/${titleId}/criticreviews`}>
-            <a className="link"> {reviews.metacriticScore} Metascore</a>
+          <a className='link'> {reviews.metacriticScore} Metascore</a>
         </Link>
       </p>
     </div>
-    </section>
   );
 };
-export default Reviews;

src/styles/modules/components/title/reviews.module.scss

@@ -1,26 +1,94 @@
 .reviews {
   display: grid;
   gap: var(--comp-whitespace);
+}
 
-  &__reviewContainer {
+.ratingsDistribution {
-    // background-color: antiquewhite;
+  overflow: hidden;
+
+  ul {
+    list-style: none;
+    display: flex;
+    gap: var(--spacer-2);
+    overflow-x: auto;
+    padding-block: var(--spacer-1);
   }
 
-  &__stats {
+  li {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    height: 5em;
+    align-items: center;
+    flex-shrink: 0;
+
+    &::before {
+      display: block;
+      content: '';
+
+      height: var(--bar-height);
+      margin-top: auto;
+      background-color: var(--clr-fill);
+      width: var(--spacer-6);
+      border-radius: var(--spacer-0);
+    }
+
+    span {
+      font-weight: var(--fw-bold);
+
+      > span {
+        font-weight: initial;
+        font-size: 0.9em;
+        color: var(--clr-text-muted);
+      }
+    }
+  }
+}
+
+.reviewAi {
+  summary {
+    cursor: pointer;
+  }
+  p {
+    padding-block: var(--spacer-2);
+  }
+  ul {
+    list-style: none;
+    display: flex;
+    gap: var(--spacer-1);
+    flex-wrap: wrap;
+
+    li {
+      padding: var(--spacer-1);
+      background-color: var(--clr-bg-muted);
+      border-radius: var(--spacer-0);
+    }
+  }
+}
+
+.reviewStats {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacer-2);
+}
+
+.userReviews {
+
+  &__list {
+    padding-block-start: var(--spacer-1);
+    display: grid;
+    gap: var(--spacer-1);
+    list-style: none;
   }
 }
 
 .review {
   &__summary {
-    font-size: calc(var(--fs-5) * 1.1);
     cursor: pointer;
   }
 
   &__text,
   &__metadata {
-    padding-top: var(--spacer-2);
+    padding-top: var(--spacer-1);
   }
 }

src/utils/cleaners/title.ts

@@ -12,6 +12,7 @@ const cleanTitle = (rawData: RawTitle) => {
     titleId: main.id,
     basic: {
       id: main.id,
+      isAdult: main.isAdult,
       title: main.titleText.text,
       // ...(main.originalTitleText.text.toLowerCase() !==
       //   main.titleText.text.toLowerCase() && {
@@ -50,6 +51,10 @@ const cleanTitle = (rawData: RawTitle) => {
         id: genre.id,
         text: genre.text,
       })),
+      interests: main.interests.edges.map(interest => ({
+        id: interest.node.id,
+        text: interest.node.primaryText.text,
+      })),
       plot: main.plot?.plotText?.plainText || null,
       primaryCrew: main.principalCredits.map(type => ({
         type: { category: type.category.text, id: type.category.id },
@@ -84,7 +89,7 @@ const cleanTitle = (rawData: RawTitle) => {
           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 ?? null,
+            mimeType: url.videoMimeType ?? null,
             url: url.url,
           })),
         },
@@ -122,6 +127,9 @@ const cleanTitle = (rawData: RawTitle) => {
       }),
       topRating: misc.ratingsSummary.topRanking?.rank || null,
     },
+    watchlist: {
+      text: main.engagementStatistics?.watchlistStatistics.displayableCount.text || null,
+    },
     meta: {
       // for tv episode
       ...(main.series && {
@@ -208,24 +216,34 @@ const cleanTitle = (rawData: RawTitle) => {
       metacriticScore: main.metacritic?.metascore.score || null,
       numCriticReviews: main.criticReviewsTotal.total,
       numUserReviews: misc.reviews.total,
+      ratingsDistribution:
+        misc.aggregateRatingsBreakdown.histogram?.histogramValues.map(v => ({
+          rating: v.rating,
+          votes: v.voteCount,
+        })) || [],
+      ...(misc.reviewSummary && {
+        ai: {
+          summary: misc.reviewSummary.overall.medium.value.plaidHtml,
+          themes: misc.reviewSummary.themes.map(t => ({
+            text: t.label.value,
+            id: t.themeId,
+            sentiment: t.sentiment as 'POSITIVE' | 'NEGATIVE',
+          })),
+        },
+      }),
       ...(misc.featuredReviews.edges.length && {
-        featuredReview: {
+        featuredReviews: misc.featuredReviews.edges.map(featuredReview => ({
-          id: misc.featuredReviews.edges[0].node.id,
+          id: featuredReview.node.id,
           reviewer: {
-            id: misc.featuredReviews.edges[0].node.author.userId,
+            id: featuredReview.node.author.userId,
-            name: misc.featuredReviews.edges[0].node.author.nickName,
+            name: featuredReview.node.author.username.text,
-          },
-          rating: misc.featuredReviews.edges[0].node.authorRating,
-          date: formatDate(misc.featuredReviews.edges[0].node.submissionDate),
-          votes: {
-            up: misc.featuredReviews.edges[0].node.helpfulness.upVotes,
-            down: misc.featuredReviews.edges[0].node.helpfulness.downVotes,
           },
+          rating: featuredReview.node.authorRating,
           review: {
-            summary: misc.featuredReviews.edges[0].node.summary.originalText,
+            summary: featuredReview.node.summary.originalText,
-            html: misc.featuredReviews.edges[0].node.text.originalText.plaidHtml,
+            html: featuredReview.node.text.originalText.plaidHtml,
-          },
           },
+        })),
       }),
     },
     details: {
@@ -242,8 +260,8 @@ const cleanTitle = (rawData: RawTitle) => {
           },
         },
       }),
-      ...(misc.countriesOfOrigin && {
+      ...(misc.countriesDetails && {
-        countriesOfOrigin: misc.countriesOfOrigin.countries.map(country => ({
+        countriesOfOrigin: misc.countriesDetails.countries.map(country => ({
           id: country.id,
           text: country.text,
         })),
@@ -353,6 +371,10 @@ const cleanTitle = (rawData: RawTitle) => {
       },
       genres: title.node.titleGenres?.genres.map(genre => genre.genre.text) ?? null,
     })),
+    faqs: {
+      questions: misc.faqs.edges.map(q => ({ question: q.node.question, id: q.node.id })),
+      total: misc.faqs.total,
+    },
   };
 
   return cleanData;