From 980e34cbbbe138a1136d54e6a6ba38ee8b5bba4f Mon Sep 17 00:00:00 2001
From: LuisMSuarez <140195810+LuisMSuarez@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:48:55 -0700
Subject: [PATCH] Refactor review summary generation to use useMutation

Replaces local state management for review summary generation with React Query's useMutation. This improves handling of loading, success, and error states and simplifies the code by removing unnecessary state variables.
---
 .../src/components/reviews/ReviewList.tsx     | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/reviews/ReviewList.tsx b/packages/client/src/components/reviews/ReviewList.tsx
index 6a49c16..8b9a79c 100644
--- a/packages/client/src/components/reviews/ReviewList.tsx
+++ b/packages/client/src/components/reviews/ReviewList.tsx
@@ -1,9 +1,8 @@
 import axios from 'axios';
 import StarRating from './StarRating';
 import { HiSparkles } from 'react-icons/hi2';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Button } from '../ui/button';
-import { useState } from 'react';
 import ReviewSkeleton from './ReviewSkeleton';
 
 interface Props {
@@ -28,9 +27,14 @@ type SummarizeResponse = {
 };
 
 const ReviewList = ({ productId }: Props) => {
-   const [summaryRegenerated, setSummaryRegenerated] = useState(false);
-   const [generatingSummary, setGeneratingSummary] = useState(false);
-   const [summaryGenError, setSummaryGenError] = useState('');
+   const {
+      mutate: handleSummarize,
+      isPending: generatingSummary,
+      isSuccess: summaryRegenerated,
+      isError: summaryGenError,
+   } = useMutation<SummarizeResponse>({
+      mutationFn: () => generateSummary(),
+   });
 
    const {
       data: reviewData,
@@ -49,20 +53,10 @@ const ReviewList = ({ productId }: Props) => {
    };
 
    const generateSummary = async () => {
-      setGeneratingSummary(true);
-      setSummaryGenError('');
-      try {
-         const { data } = await axios.post<SummarizeResponse>(
-            `/api/products/${productId}/summaries`
-         );
-         setSummaryRegenerated(true);
-         return data;
-      } catch (error) {
-         console.error(error);
-         setSummaryGenError('Could not summarize the reviews. Try again.');
-      } finally {
-         setGeneratingSummary(false);
-      }
+      const { data } = await axios.post<SummarizeResponse>(
+         `/api/products/${productId}/summaries`
+      );
+      return data;
    };
 
    if (isLoading) {
@@ -97,7 +91,10 @@ const ReviewList = ({ productId }: Props) => {
                   <ReviewSkeleton />
                </div>
             ) : (
-               <Button onClick={generateSummary} className="cursor-pointer">
+               <Button
+                  onClick={() => handleSummarize()}
+                  className="cursor-pointer"
+               >
                   <HiSparkles className="text-yellow-400" />
                   Summarize
                </Button>