first commit

resources/client/profile/panels/profile-reviews-panel.tsx

@@ -0,0 +1,93 @@
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {Trans} from '@common/i18n/trans';
+import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel';
+import {PageStatus} from '@common/http/page-status';
+import React, {Fragment} from 'react';
+import {useUserProfile} from '@app/profile/requests/use-user-profile';
+import {RateReviewIcon} from '@common/icons/material/RateReview';
+import {useProfileReviews} from '@app/profile/requests/use-profile-reviews';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {Title} from '@app/titles/models/title';
+import {Review} from '@app/titles/models/review';
+import {TitleRating} from '@app/reviews/title-rating';
+import {TitleLink, TitleLinkWithEpisodeNumber} from '@app/titles/title-link';
+import {Episode} from '@app/titles/models/episode';
+
+export function ProfileReviewsPanel() {
+  const userQuery = useUserProfile();
+  const user = userQuery.data!.user;
+  const reviewsQuery = useProfileReviews();
+
+  if (reviewsQuery.noResults) {
+    return (
+      <IllustratedMessage
+        imageHeight="h-auto"
+        imageMargin="mb-14"
+        image={<RateReviewIcon className="text-muted" />}
+        size="sm"
+        title={<Trans message="No reviews yet" />}
+        description={
+          <Trans
+            message="Follow :user for updates on titles they review in the future."
+            values={{user: user.display_name}}
+          />
+        }
+      />
+    );
+  }
+
+  if (reviewsQuery.data) {
+    return (
+      <Fragment>
+        {reviewsQuery.items.map(review => (
+          <ReviewListItem key={review.id} review={review} />
+        ))}
+        <InfiniteScrollSentinel query={reviewsQuery} />
+      </Fragment>
+    );
+  }
+
+  return <PageStatus query={reviewsQuery} />;
+}
+
+interface ReviewListItemProps {
+  review: Review;
+}
+function ReviewListItem({review}: ReviewListItemProps) {
+  const totalVotes = review.helpful_count + review.not_helpful_count;
+  const reviewable = review.reviewable as Title | Episode;
+  const title =
+    reviewable.model_type === 'episode' ? reviewable.title! : reviewable;
+  return (
+    <div className="mb-24 flex items-start gap-24 border-b pb-24">
+      <TitlePoster title={title} size="w-90" srcSize="sm" />
+      <div>
+        <div className="text-lg font-semibold">
+          {reviewable.model_type === 'episode' ? (
+            <TitleLinkWithEpisodeNumber
+              title={title}
+              episode={reviewable}
+              target="_blank"
+            />
+          ) : (
+            <TitleLink title={title} target="_blank" />
+          )}
+        </div>
+        <TitleRating className="mb-8 mt-14" score={review.score} />
+        <div className="text-base font-semibold">{review.title}</div>
+        <p className="mt-10 whitespace-pre-line text-sm">{review.body}</p>
+        {totalVotes ? (
+          <div className="mt-12 text-xs text-muted">
+            <Trans
+              message=":helpfulCount out of :total people found this helpful."
+              values={{
+                helpfulCount: review.helpful_count,
+                total: review.helpful_count + review.not_helpful_count,
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}