Merge pull request #29 from ildecimo/develop

dev -> main

src/app/product/[productId]/review/[reviewId]/page.tsx

@@ -44,6 +44,7 @@ export default async function Page(props: PageProps) {
   });
 
   const customerReviews = reviews.filter((r) => r.email === review.email);
+  const customerReviewIdStrings = customerReviews.map((r) => `${r.id}`);
 
   let sentimentAnalysis = await db.getReviewAnalysis({
     productId,
@@ -70,6 +71,20 @@ export default async function Page(props: PageProps) {
     }
   }
 
+  const allAnalyses = await db.getAllReviewAnalyses({
+    storeHash: authorized.storeHash,
+  });
+
+  const allUserAnalyses =
+    allAnalyses?.filter((analysis) =>
+      customerReviewIdStrings.includes(analysis.reviewId)
+    ) ?? [];
+
+  const userAverageScore = allUserAnalyses.length
+    ? allUserAnalyses.reduce((acc, analysis) => acc + analysis.data.score, 0) /
+      allUserAnalyses.length
+    : undefined;
+
   return (
     <ReviewDetail
       sentimentAnalysis={
@@ -81,6 +96,7 @@ export default async function Page(props: PageProps) {
       customerReviews={customerReviews}
       product={product}
       review={review}
+      userAverageScore={userAverageScore}
     />
   );
 }

src/app/products/page.tsx

@@ -18,7 +18,10 @@ export default async function Page() {
     throw new Error('Access token not found. Try to re-install the app.');
   }
 
-  const products = await fetchAllProducts(accessToken, authorized.storeHash);
+  const [products, allReviews] = await Promise.all([
+    fetchAllProducts(accessToken, authorized.storeHash),
+    db.getAllReviewAnalyses({ storeHash: authorized.storeHash }),
+  ]);
 
-  return <ProductList products={products} />;
+  return <ProductList allAnalyses={allReviews ?? []} products={products} />;
 }

src/components/ProductList.tsx

@@ -12,9 +12,12 @@ import { NextLink } from '~/components/NextLink';
 import { ProductFilters } from '~/components/ProductFilters';
 import { StarRating } from '~/components/StarRating';
 
+import { ScoreCircle } from '~/components/ScoreCircle';
+import { type AllReviewAnalysesResponse } from '~/lib/db';
 import { convertToUDS } from '~/utils/utils';
 
 interface ProductListProps {
+  allAnalyses: AllReviewAnalysesResponse;
   products: SimpleProduct[];
 }
 
@@ -38,7 +41,7 @@ const ReviewsAverage = ({ product }: ReviewsAverageProps) => {
   return <StarRating rating={average} />;
 };
 
-const ProductList = ({ products }: ProductListProps) => {
+const ProductList = ({ allAnalyses, products }: ProductListProps) => {
   const [filteredProducts, setFilteredProducts] = useState(products);
   const sortedProductsByReviews = useMemo(
     () =>
@@ -48,11 +51,35 @@ const ProductList = ({ products }: ProductListProps) => {
     [filteredProducts]
   );
 
+  const productScoresById = products?.reduce(
+    (acc, { id: productId }) => {
+      const reviewAnalyses =
+        allAnalyses?.filter((review) => review.productId === `${productId}`) ??
+        [];
+
+      const productScore = reviewAnalyses?.length
+        ? Math.floor(
+            reviewAnalyses.reduce(
+              (acc, analysis) => acc + analysis.data.score,
+              0
+            ) / reviewAnalyses.length
+          )
+        : undefined;
+
+      return {
+        ...acc,
+        [productId]: productScore,
+      };
+    },
+    {} as Record<number, number>
+  );
+
   return (
     <div>
       <Breadcrumbs>
         <Breadcrumbs.Text>All Products</Breadcrumbs.Text>
       </Breadcrumbs>
+
       <div className="my-6">
         <ProductFilters
           products={products}
@@ -85,6 +112,16 @@ const ProductList = ({ products }: ProductListProps) => {
               hash: 'name',
               render: (product) => product.name,
             },
+            {
+              header: 'Score',
+              hash: 'score',
+              render: (product) => (
+                <ScoreCircle
+                  score={productScoresById[product.id]}
+                  tooltip="Average product sentiment"
+                />
+              ),
+            },
             {
               header: 'Price',
               hash: 'price',

src/components/ReviewDetail.tsx

@@ -32,6 +32,7 @@ interface ReviewDetailProps {
   product: Product;
   review: Review;
   sentimentAnalysis?: AnalyzeReviewOutputValues;
+  userAverageScore?: number;
 }
 
 export const ReviewDetail = ({
@@ -40,6 +41,7 @@ export const ReviewDetail = ({
   product,
   review: reviewProp,
   sentimentAnalysis,
+  userAverageScore,
 }: ReviewDetailProps) => {
   const [review, setReview] = useState(reviewProp);
 
@@ -125,7 +127,7 @@ export const ReviewDetail = ({
           }
           topRightContent={
             <ScoreCircle
-              score={92}
+              score={userAverageScore}
               tooltip="Average customer sentiment score"
             />
           }