Refactor: update comment components

src/components/BeerById/BeerCommentForm.tsx

@@ -10,7 +10,7 @@ import CreateCommentValidationSchema from '@/services/schema/CommentSchema/Creat
 import toast from 'react-hot-toast';
 import createErrorToast from '@/util/createErrorToast';
 import { sendCreateBeerCommentRequest } from '@/requests/comments/beer-comment';
-import CommentForm from '../ui/CommentForm';
+import CommentForm from '../Comments/CommentForm';
 
 interface BeerCommentFormProps {
   beerPost: z.infer<typeof BeerPostQueryResult>;

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -6,15 +6,15 @@ import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { z } from 'zod';
 import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
 import { useRouter } from 'next/router';
-import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
+
 import {
   deleteBeerPostCommentRequest,
   editBeerPostCommentRequest,
 } from '@/requests/comments/beer-comment';
 import BeerCommentForm from './BeerCommentForm';
 
-import LoadingComponent from './LoadingComponent';
-import CommentsComponent from '../ui/CommentsComponent';
+import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
+import CommentsComponent from '../Comments/CommentsComponent';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof BeerPostQueryResult>;
@@ -32,21 +32,6 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
   const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
-  const handleDeleteRequest = async (id: string) => {
-    await deleteBeerPostCommentRequest({ commentId: id, beerPostId: beerPost.id });
-  };
-
-  const handleEditRequest = async (
-    id: string,
-    data: z.infer<typeof CreateCommentValidationSchema>,
-  ) => {
-    await editBeerPostCommentRequest({
-      body: data,
-      commentId: id,
-      beerPostId: beerPost.id,
-    });
-  };
-
   return (
     <div className="w-full space-y-3" ref={commentSectionRef}>
       <div className="card bg-base-300">
@@ -68,7 +53,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
          */
         isLoading ? (
           <div className="card bg-base-300 pb-6">
-            <LoadingComponent length={PAGE_SIZE} />
+            <CommentLoadingComponent length={PAGE_SIZE} />
           </div>
         ) : (
           <CommentsComponent
@@ -80,8 +65,19 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
             setSize={setSize}
             size={size}
             mutate={mutate}
-            handleDeleteRequest={handleDeleteRequest}
-            handleEditRequest={handleEditRequest}
+            handleDeleteCommentRequest={(id) => {
+              return deleteBeerPostCommentRequest({
+                commentId: id,
+                beerPostId: beerPost.id,
+              });
+            }}
+            handleEditCommentRequest={(id, data) => {
+              return editBeerPostCommentRequest({
+                body: data,
+                commentId: id,
+                beerPostId: beerPost.id,
+              });
+            }}
           />
         )
       }

src/components/BeerStyleById/BeerStyleCommentForm.tsx

@@ -11,7 +11,7 @@ import createErrorToast from '@/util/createErrorToast';
 import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
 import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
 import { sendCreateBeerStyleCommentRequest } from '@/requests/comments/beer-style-comment';
-import CommentForm from '../ui/CommentForm';
+import CommentForm from '../Comments/CommentForm';
 
 interface BeerCommentFormProps {
   beerStyle: z.infer<typeof BeerStyleQueryResult>;

src/components/BeerStyleById/BeerStyleCommentSection.tsx

@@ -3,17 +3,16 @@ import UserContext from '@/contexts/UserContext';
 import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { z } from 'zod';
 import { useRouter } from 'next/router';
-import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
 
 import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
 import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
-import LoadingComponent from '../BeerById/LoadingComponent';
-import CommentsComponent from '../ui/CommentsComponent';
-import BeerStyleCommentForm from './BeerStyleCommentForm';
 import {
   sendDeleteBeerStyleCommentRequest,
   sendEditBeerStyleCommentRequest,
 } from '@/requests/comments/beer-style-comment';
+import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
+import CommentsComponent from '../Comments/CommentsComponent';
+import BeerStyleCommentForm from './BeerStyleCommentForm';
 
 interface BeerStyleCommentsSectionProps {
   beerStyle: z.infer<typeof BeerStyleQueryResult>;
@@ -31,21 +30,6 @@ const BeerStyleCommentsSection: FC<BeerStyleCommentsSectionProps> = ({ beerStyle
 
   const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
-  const handleDeleteRequest = async (id: string) => {
-    await sendDeleteBeerStyleCommentRequest({ beerStyleId: beerStyle.id, commentId: id });
-  };
-
-  const handleEditRequest = async (
-    id: string,
-    data: z.infer<typeof CreateCommentValidationSchema>,
-  ) => {
-    await sendEditBeerStyleCommentRequest({
-      beerStyleId: beerStyle.id,
-      commentId: id,
-      body: data,
-    });
-  };
-
   return (
     <div className="w-full space-y-3" ref={commentSectionRef}>
       <div className="card bg-base-300">
@@ -67,7 +51,7 @@ const BeerStyleCommentsSection: FC<BeerStyleCommentsSectionProps> = ({ beerStyle
          */
         isLoading ? (
           <div className="card bg-base-300 pb-6">
-            <LoadingComponent length={PAGE_SIZE} />
+            <CommentLoadingComponent length={PAGE_SIZE} />
           </div>
         ) : (
           <CommentsComponent
@@ -79,8 +63,19 @@ const BeerStyleCommentsSection: FC<BeerStyleCommentsSectionProps> = ({ beerStyle
             setSize={setSize}
             size={size}
             mutate={mutate}
-            handleDeleteRequest={handleDeleteRequest}
-            handleEditRequest={handleEditRequest}
+            handleDeleteCommentRequest={(id) => {
+              return sendDeleteBeerStyleCommentRequest({
+                beerStyleId: beerStyle.id,
+                commentId: id,
+              });
+            }}
+            handleEditCommentRequest={(id, data) => {
+              return sendEditBeerStyleCommentRequest({
+                beerStyleId: beerStyle.id,
+                commentId: id,
+                body: data,
+              });
+            }}
           />
         )
       }

src/components/BreweryById/BreweryCommentForm.tsx

@@ -8,7 +8,7 @@ import toast from 'react-hot-toast';
 import { z } from 'zod';
 import sendCreateBreweryCommentRequest from '@/requests/comments/brewery-comment/sendCreateBreweryCommentRequest';
 import createErrorToast from '@/util/createErrorToast';
-import CommentForm from '../ui/CommentForm';
+import CommentForm from '../Comments/CommentForm';
 
 interface BreweryCommentFormProps {
   breweryPost: z.infer<typeof BreweryPostQueryResult>;

src/components/BreweryById/BreweryCommentsSection.tsx

@@ -2,11 +2,14 @@ import UserContext from '@/contexts/UserContext';
 import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
 import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { z } from 'zod';
-import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
 
 import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
-import LoadingComponent from '../BeerById/LoadingComponent';
-import CommentsComponent from '../ui/CommentsComponent';
+import {
+  sendDeleteBreweryPostCommentRequest,
+  sendEditBreweryPostCommentRequest,
+} from '@/requests/comments/brewery-comment';
+import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
+import CommentsComponent from '../Comments/CommentsComponent';
 import BreweryCommentForm from './BreweryCommentForm';
 
 interface BreweryBeerSectionProps {
@@ -30,35 +33,6 @@ const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) =>
 
   const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
-  const handleDeleteRequest = async (commentId: string) => {
-    const response = await fetch(
-      `/api/breweries/${breweryPost.id}/comments/${commentId}`,
-      { method: 'DELETE' },
-    );
-
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-  };
-
-  const handleEditRequest = async (
-    commentId: string,
-    data: z.infer<typeof CreateCommentValidationSchema>,
-  ) => {
-    const response = await fetch(
-      `/api/breweries/${breweryPost.id}/comments/${commentId}`,
-      {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: data.content, rating: data.rating }),
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-  };
-
   return (
     <div className="w-full space-y-3" ref={commentSectionRef}>
       <div className="card">
@@ -79,7 +53,7 @@ const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) =>
          */
         isLoading ? (
           <div className="card pb-6">
-            <LoadingComponent length={PAGE_SIZE} />
+            <CommentLoadingComponent length={PAGE_SIZE} />
           </div>
         ) : (
           <CommentsComponent
@@ -91,8 +65,19 @@ const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) =>
             size={size}
             commentSectionRef={commentSectionRef}
             mutate={mutate}
-            handleDeleteRequest={handleDeleteRequest}
-            handleEditRequest={handleEditRequest}
+            handleDeleteCommentRequest={(id) => {
+              return sendDeleteBreweryPostCommentRequest({
+                breweryPostId: breweryPost.id,
+                commentId: id,
+              });
+            }}
+            handleEditCommentRequest={(commentId, data) => {
+              return sendEditBreweryPostCommentRequest({
+                breweryPostId: breweryPost.id,
+                commentId,
+                body: { content: data.content, rating: data.rating },
+              });
+            }}
           />
         )
       }

src/components/Comments/CommentCardBody.tsx

@@ -3,28 +3,26 @@ import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResu
 import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
-import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
+
 import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 import UserAvatar from '../Account/UserAvatar';
+import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
 
 interface CommentCardProps {
   comment: z.infer<typeof CommentQueryResult>;
   mutate: ReturnType<typeof useBeerPostComments>['mutate'];
   ref?: ReturnType<typeof useInView>['ref'];
-  handleDeleteRequest: (id: string) => Promise<void>;
-  handleEditRequest: (
-    id: string,
-    data: z.infer<typeof CreateCommentValidationSchema>,
-  ) => Promise<void>;
+  handleDeleteCommentRequest: HandleDeleteCommentRequest;
+  handleEditCommentRequest: HandleEditCommentRequest;
 }
 
 const CommentCardBody: FC<CommentCardProps> = ({
   comment,
   mutate,
   ref,
-  handleDeleteRequest,
-  handleEditRequest,
+  handleDeleteCommentRequest,
+  handleEditCommentRequest,
 }) => {
   const [inEditMode, setInEditMode] = useState(false);
 
@@ -44,8 +42,8 @@ const CommentCardBody: FC<CommentCardProps> = ({
             comment={comment}
             mutate={mutate}
             setInEditMode={setInEditMode}
-            handleDeleteRequest={handleDeleteRequest}
-            handleEditRequest={handleEditRequest}
+            handleDeleteCommentRequest={handleDeleteCommentRequest}
+            handleEditCommentRequest={handleEditCommentRequest}
           />
         )}
       </div>

src/components/Comments/CommentForm.tsx

@@ -8,12 +8,12 @@ import type {
   UseFormSetValue,
   UseFormWatch,
 } from 'react-hook-form';
-import FormError from './forms/FormError';
-import FormInfo from './forms/FormInfo';
-import FormLabel from './forms/FormLabel';
-import FormSegment from './forms/FormSegment';
-import FormTextArea from './forms/FormTextArea';
-import Button from './forms/Button';
+import FormError from '../ui/forms/FormError';
+import FormInfo from '../ui/forms/FormInfo';
+import FormLabel from '../ui/forms/FormLabel';
+import FormSegment from '../ui/forms/FormSegment';
+import FormTextArea from '../ui/forms/FormTextArea';
+import Button from '../ui/forms/Button';
 
 interface Comment {
   content: string;

src/components/Comments/CommentLoadingComponent.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react';
 import Spinner from '../ui/Spinner';
-import CommentLoadingCardBody from '../BeerBreweryComments/CommentLoadingCardBody';
+import CommentLoadingCardBody from './CommentLoadingCardBody';
 
-interface LoadingComponentProps {
+interface CommentLoadingComponentProps {
   length: number;
 }
 
-const LoadingComponent: FC<LoadingComponentProps> = ({ length }) => {
+const CommentLoadingComponent: FC<CommentLoadingComponentProps> = ({ length }) => {
   return (
     <>
       {Array.from({ length }).map((_, i) => (
@@ -19,4 +19,4 @@ const LoadingComponent: FC<LoadingComponentProps> = ({ length }) => {
   );
 };
 
-export default LoadingComponent;
+export default CommentLoadingComponent;

src/components/Comments/CommentsComponent.tsx

@@ -7,39 +7,33 @@ import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPost
 
 import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
 import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
-import NoCommentsCard from '../BeerById/NoCommentsCard';
-import LoadingComponent from '../BeerById/LoadingComponent';
-import CommentCardBody from '../BeerBreweryComments/CommentCardBody';
+import NoCommentsCard from './NoCommentsCard';
+import CommentLoadingComponent from './CommentLoadingComponent';
+import CommentCardBody from './CommentCardBody';
+import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
 
 type HookReturnType = ReturnType<
   typeof useBeerPostComments | typeof useBreweryPostComments | typeof useBeerStyleComments
 >;
 
-type HandleDeleteRequest = (id: string) => Promise<void>;
-
-type HandleEditRequest = (
-  id: string,
-  data: { content: string; rating: number },
-) => Promise<void>;
-
 interface CommentsComponentProps {
   comments: HookReturnType['comments'];
-  commentSectionRef: MutableRefObject<HTMLDivElement | null>;
-  handleDeleteRequest: HandleDeleteRequest;
-  handleEditRequest: HandleEditRequest;
   isAtEnd: HookReturnType['isAtEnd'];
   isLoadingMore: HookReturnType['isLoadingMore'];
   mutate: HookReturnType['mutate'];
-  pageSize: number;
   setSize: HookReturnType['setSize'];
   size: HookReturnType['size'];
+  commentSectionRef: MutableRefObject<HTMLDivElement | null>;
+  handleDeleteCommentRequest: HandleDeleteCommentRequest;
+  handleEditCommentRequest: HandleEditCommentRequest;
+  pageSize: number;
 }
 
 const CommentsComponent: FC<CommentsComponentProps> = ({
   comments,
   commentSectionRef,
-  handleDeleteRequest,
-  handleEditRequest,
+  handleDeleteCommentRequest,
+  handleEditCommentRequest,
   isAtEnd,
   isLoadingMore,
   mutate,
@@ -50,8 +44,8 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
   const { ref: penultimateCommentRef } = useInView({
     threshold: 0.1,
     /**
-     * When the last comment comes into view, call setSize from useBeerPostComments to
-     * load more comments.
+     * When the last comment comes into view, call setSize from the comment fetching hook
+     * to load more comments.
      */
     onChange: (visible) => {
       if (!visible || isAtEnd) return;
@@ -78,8 +72,8 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
                 <CommentCardBody
                   comment={comment}
                   mutate={mutate}
-                  handleDeleteRequest={handleDeleteRequest}
-                  handleEditRequest={handleEditRequest}
+                  handleDeleteCommentRequest={handleDeleteCommentRequest}
+                  handleEditCommentRequest={handleEditCommentRequest}
                 />
               </div>
             );
@@ -90,7 +84,7 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
              * If there are more comments to load, show a loading component with a
              * skeleton loader and a loading spinner.
              */
-            !!isLoadingMore && <LoadingComponent length={pageSize} />
+            !!isLoadingMore && <CommentLoadingComponent length={pageSize} />
           }
 
           {

src/components/Comments/EditCommentBody.tsx

@@ -14,6 +14,7 @@ import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
 import FormSegment from '../ui/forms/FormSegment';
 import FormTextArea from '../ui/forms/FormTextArea';
+import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
 
 interface EditCommentBodyProps {
   comment: z.infer<typeof CommentQueryResult>;
@@ -22,19 +23,16 @@ interface EditCommentBodyProps {
   mutate: ReturnType<
     typeof useBeerPostComments | typeof useBreweryPostComments
   >['mutate'];
-  handleDeleteRequest: (id: string) => Promise<void>;
-  handleEditRequest: (
-    id: string,
-    data: z.infer<typeof CreateCommentValidationSchema>,
-  ) => Promise<void>;
+  handleDeleteCommentRequest: HandleDeleteCommentRequest;
+  handleEditCommentRequest: HandleEditCommentRequest;
 }
 
 const EditCommentBody: FC<EditCommentBodyProps> = ({
   comment,
   setInEditMode,
   mutate,
-  handleDeleteRequest,
-  handleEditRequest,
+  handleDeleteCommentRequest,
+  handleEditCommentRequest,
 }) => {
   const { register, handleSubmit, formState, setValue, watch } = useForm<
     z.infer<typeof CreateCommentValidationSchema>
@@ -51,7 +49,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
     const loadingToast = toast.loading('Deleting comment...');
     setIsDeleting(true);
     try {
-      await handleDeleteRequest(comment.id);
+      await handleDeleteCommentRequest(comment.id);
       await mutate();
       toast.remove(loadingToast);
       toast.success('Deleted comment.');
@@ -68,7 +66,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
 
     try {
       setInEditMode(true);
-      await handleEditRequest(comment.id, data);
+      await handleEditCommentRequest(comment.id, data);
       await mutate();
       toast.remove(loadingToast);
       toast.success('Comment edits submitted successfully.');
@@ -80,6 +78,8 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
     }
   };
 
+  const disableForm = isSubmitting || isDeleting;
+
   return (
     <div className="py-4 pr-3 animate-in fade-in-10">
       <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
@@ -95,7 +95,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
               placeholder="Comment"
               rows={2}
               error={!!errors.content?.message}
-              disabled={isSubmitting || isDeleting}
+              disabled={disableForm}
             />
           </FormSegment>
           <div className="flex flex-row items-center justify-between">
@@ -114,8 +114,8 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
                   <Rating.Item
                     name="rating-1"
                     className="mask mask-star cursor-default"
-                    disabled={isSubmitting || isDeleting}
-                    aria-disabled={isSubmitting || isDeleting}
+                    disabled={disableForm}
+                    aria-disabled={disableForm}
                     key={index}
                   />
                 ))}
@@ -125,7 +125,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
               <button
                 type="button"
                 className="btn join-item btn-xs lg:btn-sm"
-                disabled={isSubmitting || isDeleting}
+                disabled={disableForm}
                 onClick={() => {
                   setInEditMode(false);
                 }}
@@ -134,7 +134,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
               </button>
               <button
                 type="submit"
-                disabled={isSubmitting || isDeleting}
+                disabled={disableForm}
                 className="btn join-item btn-xs lg:btn-sm"
               >
                 Save
@@ -143,7 +143,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
                 type="button"
                 className="btn join-item btn-xs lg:btn-sm"
                 onClick={onDelete}
-                disabled={isDeleting || formState.isSubmitting}
+                disabled={disableForm}
               >
                 Delete
               </button>

src/components/Comments/types/index.ts

@@ -0,0 +1,12 @@
+import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+
+type APIResponse = z.infer<typeof APIResponseValidationSchema>;
+
+export type HandleEditCommentRequest = (
+  id: string,
+  data: z.infer<typeof CreateCommentValidationSchema>,
+) => Promise<APIResponse>;
+
+export type HandleDeleteCommentRequest = (id: string) => Promise<APIResponse>;

src/requests/comments/beer-comment/index.ts

@@ -11,9 +11,11 @@ import {
  *
  * @param params - The parameters for the request.
  * @param params.body - The body of the request.
+ * @param params.body.content - The content of the comment.
+ * @param params.body.rating - The rating of the beer.
  * @param params.commentId - The id of the comment to edit.
  * @param params.beerPostId - The id of the beer post the comment belongs to.
- * @returns The edited comment.
+ * @returns The JSON response from the server.
  * @throws An error if the request fails or the response is invalid.
  */
 export const editBeerPostCommentRequest: SendEditBeerPostCommentRequest = async ({
@@ -47,7 +49,7 @@ export const editBeerPostCommentRequest: SendEditBeerPostCommentRequest = async
  * @param params - The parameters for the request.
  * @param params.commentId - The id of the comment to delete.
  * @param params.beerPostId - The id of the beer post the comment belongs to.
- * @returns The deleted comment.
+ * @returns The JSON response from the server.
  * @throws An error if the request fails or the response is invalid.
  */
 export const deleteBeerPostCommentRequest: SendDeleteBeerPostCommentRequest = async ({

src/requests/comments/beer-style-comment/index.ts

@@ -6,6 +6,88 @@ import {
   SendEditBeerStyleCommentRequest,
 } from './types';
 
+/**
+ * Sends an api request to edit a beer style comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.body - The body of the request.
+ * @param params.body.content - The content of the comment.
+ * @param params.body.rating - The rating of the beer.
+ * @param params.beerStyleId - The id of the beer style the comment belongs to.
+ * @param params.commentId - The id of the comment to edit.
+ * @returns The JSON response from the server.
+ * @throws An error if the request fails or the response is invalid.
+ */
+export const sendEditBeerStyleCommentRequest: SendEditBeerStyleCommentRequest = async ({
+  commentId,
+  body: { content, rating },
+  beerStyleId,
+}) => {
+  const response = await fetch(`/api/beers/styles/${beerStyleId}/comments/${commentId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content, rating }),
+  });
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    throw new Error('Invalid API response');
+  }
+
+  return parsed.data;
+};
+
+/**
+ * Sends an api request to delete a beer style comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.beerStyleId - The id of the beer style the comment belongs to.
+ * @param params.commentId - The id of the comment to delete.
+ * @returns The json response from the server.
+ * @throws An error if the request fails or the response is invalid.
+ */
+export const sendDeleteBeerStyleCommentRequest: SendDeleteBeerStyleCommentRequest =
+  async ({ beerStyleId, commentId }) => {
+    const response = await fetch(
+      `/api/beers/styles/${beerStyleId}/comments/${commentId}`,
+      {
+        method: 'DELETE',
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+
+    if (!parsed.success) {
+      throw new Error('Invalid API response');
+    }
+
+    return parsed.data;
+  };
+
+/**
+ * Sends an api request to create a beer style comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.body - The body of the request.
+ * @param params.body.content - The content of the comment.
+ * @param params.body.rating - The rating of the beer.
+ * @param params.beerStyleId - The id of the beer style the comment belongs to.
+ * @returns The created comment.
+ * @throws An error if the request fails or the response is invalid.
+ */
 export const sendCreateBeerStyleCommentRequest: SendCreateBeerStyleCommentRequest =
   async ({ beerStyleId, body: { content, rating } }) => {
     const response = await fetch(`/api/beers/styles/${beerStyleId}/comments`, {
@@ -33,53 +115,3 @@ export const sendCreateBeerStyleCommentRequest: SendCreateBeerStyleCommentReques
 
     return parsedPayload.data;
   };
-
-export const sendEditBeerStyleCommentRequest: SendEditBeerStyleCommentRequest = async ({
-  commentId,
-  body: { content, rating },
-  beerStyleId,
-}) => {
-  const response = await fetch(`/api/beers/styles/${beerStyleId}/comments/${commentId}`, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ content, rating }),
-  });
-
-  if (!response.ok) {
-    throw new Error(response.statusText);
-  }
-
-  const json = await response.json();
-
-  const parsed = APIResponseValidationSchema.safeParse(json);
-
-  if (!parsed.success) {
-    throw new Error('Invalid API response');
-  }
-
-  return parsed.data;
-};
-
-export const sendDeleteBeerStyleCommentRequest: SendDeleteBeerStyleCommentRequest =
-  async ({ beerStyleId, commentId }) => {
-    const response = await fetch(
-      `/api/beers/styles/${beerStyleId}/comments/${commentId}`,
-      {
-        method: 'DELETE',
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-
-    const json = await response.json();
-
-    const parsed = APIResponseValidationSchema.safeParse(json);
-
-    if (!parsed.success) {
-      throw new Error('Invalid API response');
-    }
-
-    return parsed.data;
-  };

src/requests/comments/brewery-comment/index.ts

@@ -0,0 +1,109 @@
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import {
+  SendCreateBreweryPostCommentRequest,
+  SendDeleteBreweryPostCommentRequest,
+  SendEditBreweryPostCommentRequest,
+} from './types';
+/**
+ * Sends an api request to edit a brewery comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.breweryId - The id of the brewery the comment belongs to.
+ * @param params.commentId - The id of the comment to edit.
+ * @param params.body - The body of the request.
+ * @param params.body.content - The content of the comment.
+ * @param params.body.rating - The rating of the beer.
+ */
+export const sendEditBreweryPostCommentRequest: SendEditBreweryPostCommentRequest =
+  async ({ body: { content, rating }, breweryPostId, commentId }) => {
+    const response = await fetch(
+      `/api/breweries/${breweryPostId}/comments/${commentId}`,
+      {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content, rating }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const parsed = APIResponseValidationSchema.safeParse(json);
+
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    return parsed.data;
+  };
+
+/**
+ * Sends an api request to delete a brewery comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.breweryId - The id of the brewery the comment belongs to.
+ * @param params.commentId - The id of the comment to delete.
+ * @returns The JSON response from the server.
+ * @throws An error if the request fails or the response is invalid.
+ */
+export const sendDeleteBreweryPostCommentRequest: SendDeleteBreweryPostCommentRequest =
+  async ({ breweryPostId, commentId }) => {
+    const response = await fetch(
+      `/api/breweries/${breweryPostId}/comments/${commentId}`,
+      {
+        method: 'DELETE',
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const parsed = APIResponseValidationSchema.safeParse(json);
+
+    if (!parsed.success) {
+      throw new Error(parsed.error.message);
+    }
+
+    return parsed.data;
+  };
+/**
+ * Sends an api request to create a brewery comment.
+ *
+ * @param params - The parameters for the request.
+ * @param params.body - The body of the request.
+ * @param params.body.content - The content of the comment.
+ * @param params.body.rating - The rating of the beer.
+ * @param params.breweryId - The id of the brewery the comment belongs to.
+ * @returns The created comment.
+ * @throws An error if the request fails or the response is invalid.
+ */
+export const sendCreateBreweryCommentRequest: SendCreateBreweryPostCommentRequest =
+  async ({ body: { content, rating }, breweryPostId }) => {
+    const response = await fetch(`/api/breweries/${breweryPostId}/comments`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content, rating }),
+    });
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const data = await response.json();
+    const parsedResponse = APIResponseValidationSchema.safeParse(data);
+    if (!parsedResponse.success) {
+      throw new Error('Invalid API response');
+    }
+
+    const parsedPayload = CommentQueryResult.safeParse(parsedResponse.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('Invalid API response payload');
+    }
+
+    return parsedPayload.data;
+  };

src/requests/comments/brewery-comment/types/index.ts

@@ -0,0 +1,19 @@
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+
+export type SendEditBreweryPostCommentRequest = (args: {
+  body: { content: string; rating: number };
+  commentId: string;
+  breweryPostId: string;
+}) => Promise<z.infer<typeof APIResponseValidationSchema>>;
+
+export type SendDeleteBreweryPostCommentRequest = (args: {
+  commentId: string;
+  breweryPostId: string;
+}) => Promise<z.infer<typeof APIResponseValidationSchema>>;
+
+export type SendCreateBreweryPostCommentRequest = (args: {
+  breweryPostId: string;
+  body: { content: string; rating: number };
+}) => Promise<z.infer<typeof CommentQueryResult>>;