ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 Actions Packages Activity

fix(title): fix title route crash

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

re https://github.com/zyachel/libremdb/issues/98
This commit is contained in:
zyachel
2025-06-01 13:07:02 +00:00
committed by ngn
parent ac60bda3bd
commit 255fbb521f
4 changed files with 1053 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/components/title/Reviews.tsx
View File

@ -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) => {
return (
<section className={styles.reviews}>
<h2 className='heading heading__secondary'>Reviews</h2>
<RatingsDistribution ratings={reviews.ratingsDistribution} />
<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>{featuredReview.review.summary}</strong>
</summary>
<div
className={styles.review__text}
dangerouslySetInnerHTML={{
__html: featuredReview.review.html,
}}
></div>
<footer className={styles.review__metadata}>
<p>
{featuredReview.rating && <span>Rated {featuredReview.rating}/10</span>}
<span>
{' '}
by{' '}
<Link href={`/user/${featuredReview.reviewer.id}`}>
<a className='link'>{featuredReview.reviewer.name}</a>
</Link>
</span>
</p>
</footer>
</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>
)}
<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 (
<section className={styles.reviews}>
<h2 className="heading heading__secondary">Reviews</h2>
{reviews.featuredReview && (
<article className={styles.reviews__reviewContainer}>
<details className={styles.review}>
<summary className={styles.review__summary}>
<strong>{reviews.featuredReview.review.summary}</strong>
</summary>
<div
className={styles.review__text}
dangerouslySetInnerHTML={{
__html: reviews.featuredReview.review.html,
}}
></div>
</details>
<footer className={styles.review__metadata}>
<p>
{reviews.featuredReview.rating && (
<span>Rated {reviews.featuredReview.rating}/10</span>
)}
<span>
{' '}
by{' '}
<Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
<a className="link">{reviews.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>
)}
<div className={styles.reviews__stats}>
<p>
<Link href={`/title/${titleId}/reviews`}>
<a className="link">
{formatNumber(reviews.numUserReviews)} User reviews
</a>
</Link>
</p>
<p>
<Link href={`/title/${titleId}/externalreviews`}>
<a className="link">
{formatNumber(reviews.numCriticReviews)} Critic reviews
</a>
</Link>
</p>
<p>
<Link href={`/title/${titleId}/criticreviews`}>
<a className="link"> {reviews.metacriticScore} Metascore</a>
</Link>
</p>
</div>
</section>
<div className={styles.reviewStats}>
<p>
<Link href={`/title/${titleId}/reviews`}>
<a className='link'>{formatNumber(reviews.numUserReviews)} User reviews</a>
</Link>
</p>
<p>
<Link href={`/title/${titleId}/externalreviews`}>
<a className='link'>{formatNumber(reviews.numCriticReviews)} Critic reviews</a>
</Link>
</p>
<p>
<Link href={`/title/${titleId}/criticreviews`}>
<a className='link'> {reviews.metacriticScore} Metascore</a>
</Link>
</p>
</div>
);
};
export default Reviews;