Refactor reviews API logic into separate module

packages/client/src/components/reviews/ReviewList.tsx

@@ -1,55 +1,28 @@
-import axios from 'axios';
 import StarRating from './StarRating';
 import { HiSparkles } from 'react-icons/hi2';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Button } from '../ui/button';
 import ReviewSkeleton from './ReviewSkeleton';
+import {
+   ReviewsApi,
+   type GetReviewsResponse,
+   type SummarizeResponse,
+} from './ReviewsApi';
 
 interface Props {
    productId: number;
 }
 
-type Review = {
-   id: number;
-   author: string;
-   content: string;
-   rating: number;
-   createdAt: string;
-};
-
-type GetReviewsResponse = {
-   summary: string | null;
-   reviews: Review[];
-};
-
-type SummarizeResponse = {
-   summary: string;
-};
-
 const ReviewList = ({ productId }: Props) => {
    const reviewSummaryMutation = useMutation<SummarizeResponse>({
-      mutationFn: () => generateSummary(),
+      mutationFn: async () => await ReviewsApi.summarizeReviews(productId),
    });
 
    const getReviewsQuery = useQuery<GetReviewsResponse>({
       queryKey: ['reviews', productId, reviewSummaryMutation.isSuccess],
-      queryFn: () => fetchReviews(),
+      queryFn: async () => await ReviewsApi.fetchReviews(productId),
    });
 
-   const fetchReviews = async () => {
-      const { data } = await axios.get<GetReviewsResponse>(
-         `/api/products/${productId}/reviews`
-      );
-      return data;
-   };
-
-   const generateSummary = async () => {
-      const { data } = await axios.post<SummarizeResponse>(
-         `/api/products/${productId}/summaries`
-      );
-      return data;
-   };
-
    if (getReviewsQuery.isLoading) {
       return (
          <div className="flex flex-col gap-5">

packages/client/src/components/reviews/ReviewsApi.ts

@@ -0,0 +1,33 @@
+import axios from 'axios';
+
+type Review = {
+   id: number;
+   author: string;
+   content: string;
+   rating: number;
+   createdAt: string;
+};
+
+export type GetReviewsResponse = {
+   summary: string | null;
+   reviews: Review[];
+};
+
+export type SummarizeResponse = {
+   summary: string;
+};
+
+export const ReviewsApi = {
+   async fetchReviews(productId: number) {
+      const { data } = await axios.get<GetReviewsResponse>(
+         `/api/products/${productId}/reviews`
+      );
+      return data;
+   },
+   async summarizeReviews(productId: number) {
+      const { data } = await axios.post<SummarizeResponse>(
+         `/api/products/${productId}/summaries`
+      );
+      return data;
+   },
+};