From 4192c7850609d78254d81f285b676c4bcce76889 Mon Sep 17 00:00:00 2001
From: LuisMSuarez <140195810+LuisMSuarez@users.noreply.github.com>
Date: Wed, 29 Oct 2025 13:30:32 -0700
Subject: [PATCH] Refactor review list queries and mutation handling

Replaces destructured query and mutation variables with object references for improved clarity and consistency. Updates conditional rendering and event handlers to use the new variable names, and improves error messaging for summary generation failures.
---
 .../src/components/reviews/ReviewList.tsx     | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/reviews/ReviewList.tsx b/packages/client/src/components/reviews/ReviewList.tsx
index 8b9a79c..f0678b8 100644
--- a/packages/client/src/components/reviews/ReviewList.tsx
+++ b/packages/client/src/components/reviews/ReviewList.tsx
@@ -27,21 +27,12 @@ type SummarizeResponse = {
 };
 
 const ReviewList = ({ productId }: Props) => {
-   const {
-      mutate: handleSummarize,
-      isPending: generatingSummary,
-      isSuccess: summaryRegenerated,
-      isError: summaryGenError,
-   } = useMutation<SummarizeResponse>({
+   const reviewSummaryMutation = useMutation<SummarizeResponse>({
       mutationFn: () => generateSummary(),
    });
 
-   const {
-      data: reviewData,
-      isLoading,
-      error,
-   } = useQuery<GetReviewsResponse>({
-      queryKey: ['reviews', productId, summaryRegenerated],
+   const getReviewsQuery = useQuery<GetReviewsResponse>({
+      queryKey: ['reviews', productId, reviewSummaryMutation.isSuccess],
       queryFn: () => fetchReviews(),
    });
 
@@ -59,7 +50,7 @@ const ReviewList = ({ productId }: Props) => {
       return data;
    };
 
-   if (isLoading) {
+   if (getReviewsQuery.isLoading) {
       return (
          <div className="flex flex-col gap-5">
             {[1, 2, 3].map((placeholder) => (
@@ -69,7 +60,7 @@ const ReviewList = ({ productId }: Props) => {
       );
    }
 
-   if (error) {
+   if (getReviewsQuery.error) {
       return (
          <p className="text-red-500">
             Could not fetch reviews, please try again.
@@ -77,34 +68,36 @@ const ReviewList = ({ productId }: Props) => {
       );
    }
 
-   if (!reviewData?.reviews.length) {
+   if (!getReviewsQuery.data?.reviews.length) {
       return null;
    }
 
    return (
       <div>
          <div id="summary" className="mb-5">
-            {reviewData?.summary ? (
-               <p>{reviewData.summary}</p>
-            ) : generatingSummary ? (
+            {getReviewsQuery.data?.summary ? (
+               <p>{getReviewsQuery.data?.summary}</p>
+            ) : reviewSummaryMutation.isPending ? (
                <div>
                   <ReviewSkeleton />
                </div>
             ) : (
                <Button
-                  onClick={() => handleSummarize()}
+                  onClick={() => reviewSummaryMutation.mutate()}
                   className="cursor-pointer"
                >
                   <HiSparkles className="text-yellow-400" />
                   Summarize
                </Button>
             )}
-            {summaryGenError && (
-               <p className="text-red-500">{summaryGenError}</p>
+            {reviewSummaryMutation.isError && (
+               <p className="text-red-500">
+                  Could not generate review summary, please try again.
+               </p>
             )}
          </div>
          <div id="reviewlist" className="flex flex-col gap-5">
-            {reviewData?.reviews.map((review) => (
+            {getReviewsQuery.data?.reviews.map((review) => (
                <div key={review.id}>
                   <div className="font-semibold">{review.author}</div>
                   <div>