Refactor beer comment requests

src/components/BeerById/BeerCommentForm.tsx

@@ -1,5 +1,3 @@
-import sendCreateBeerCommentRequest from '@/requests/comments/beer-comment/sendCreateBeerCommentRequest';
-
 import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
 import { zodResolver } from '@hookform/resolvers/zod';
 
@@ -11,6 +9,7 @@ import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPost
 import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
 import toast from 'react-hot-toast';
 import createErrorToast from '@/util/createErrorToast';
+import { sendCreateBeerCommentRequest } from '@/requests/comments/beer-comment';
 import CommentForm from '../ui/CommentForm';
 
 interface BeerCommentFormProps {
@@ -34,11 +33,7 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
   ) => {
     const loadingToast = toast.loading('Posting a new comment...');
     try {
-      await sendCreateBeerCommentRequest({
+      await sendCreateBeerCommentRequest({ body: data, beerPostId: beerPost.id });
-        content: data.content,
-        rating: data.rating,
-        beerPostId: beerPost.id,
-      });
       reset();
       toast.remove(loadingToast);
       toast.success('Comment posted successfully.');

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -7,6 +7,10 @@ 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';
@@ -29,26 +33,14 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
   const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
   const handleDeleteRequest = async (id: string) => {
-    const response = await fetch(`/api/beer-comments/${id}`, { method: 'DELETE' });
+    deleteBeerPostCommentRequest({ commentId: id });
-
-    if (!response.ok) {
-      throw new Error('Failed to delete comment.');
-    }
   };
 
   const handleEditRequest = async (
     id: string,
     data: z.infer<typeof CreateCommentValidationSchema>,
   ) => {
-    const response = await fetch(`/api/beer-comments/${id}`, {
+    editBeerPostCommentRequest({ body: data, commentId: id });
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ content: data.content, rating: data.rating }),
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to update comment.');
-    }
   };
 
   return (

src/components/ui/CommentsComponent.tsx

@@ -6,47 +6,46 @@ import { useInView } from 'react-intersection-observer';
 import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
 
 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';
 
-interface CommentsComponentProps {
+type HookReturnType = ReturnType<
-  commentSectionRef: MutableRefObject<HTMLDivElement | null>;
+  typeof useBeerPostComments | typeof useBreweryPostComments | typeof useBeerStyleComments
-  pageSize: number;
+>;
-  size: ReturnType<typeof useBeerPostComments | typeof useBreweryPostComments>['size'];
+
-  setSize: ReturnType<
+type HandleDeleteRequest = (id: string) => Promise<void>;
-    typeof useBeerPostComments | typeof useBreweryPostComments
+
-  >['setSize'];
+type HandleEditRequest = (
-  comments: ReturnType<
-    typeof useBeerPostComments | typeof useBreweryPostComments
-  >['comments'];
-  isAtEnd: ReturnType<
-    typeof useBeerPostComments | typeof useBreweryPostComments
-  >['isAtEnd'];
-  isLoadingMore: ReturnType<
-    typeof useBeerPostComments | typeof useBreweryPostComments
-  >['isLoadingMore'];
-  mutate: ReturnType<
-    typeof useBeerPostComments | typeof useBreweryPostComments
-  >['mutate'];
-  handleDeleteRequest: (id: string) => Promise<void>;
-  handleEditRequest: (
   id: string,
   data: { content: string; rating: number },
-  ) => Promise<void>;
+) => 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'];
 }
 
 const CommentsComponent: FC<CommentsComponentProps> = ({
-  commentSectionRef,
   comments,
+  commentSectionRef,
+  handleDeleteRequest,
+  handleEditRequest,
   isAtEnd,
   isLoadingMore,
+  mutate,
   pageSize,
   setSize,
   size,
-  mutate,
-  handleDeleteRequest,
-  handleEditRequest,
 }) => {
   const { ref: penultimateCommentRef } = useInView({
     threshold: 0.1,

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

@@ -0,0 +1,87 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
+import {
+  SendCreateBeerCommentRequest,
+  SendDeleteBeerPostCommentRequest,
+  SendEditBeerPostCommentRequest,
+} from './types';
+
+export const editBeerPostCommentRequest: SendEditBeerPostCommentRequest = async ({
+  body,
+  commentId,
+}) => {
+  const response = await fetch(`/api/beer-post-comments/${commentId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to edit comment');
+  }
+
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    throw new Error(parsed.error.message);
+  }
+
+  return parsed.data;
+};
+
+export const deleteBeerPostCommentRequest: SendDeleteBeerPostCommentRequest = async ({
+  commentId,
+}) => {
+  const response = await fetch(`/api/beer-post-comments/${commentId}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to delete comment');
+  }
+
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    throw new Error(parsed.error.message);
+  }
+
+  return parsed.data;
+};
+
+export const sendCreateBeerCommentRequest: SendCreateBeerCommentRequest = async ({
+  beerPostId,
+  body,
+}) => {
+  const { content, rating } = body;
+  const response = await fetch(`/api/beers/${beerPostId}/comments`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ beerPostId, 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;
+};
+
+export default sendCreateBeerCommentRequest;

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

@@ -1,53 +0,0 @@
-import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
-import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
-
-import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
-import { z } from 'zod';
-
-const BeerCommentValidationSchemaWithId = CreateCommentValidationSchema.extend({
-  beerPostId: z.string().cuid(),
-});
-
-/**
- * Sends a POST request to the server to create a new beer comment.
- *
- * @param data The data to be sent to the server.
- * @param data.beerPostId The ID of the beer post to comment on.
- * @param data.content The content of the comment.
- * @param data.rating The rating of the beer.
- * @returns A promise that resolves to the created comment.
- * @throws An error if the request fails, the API response is invalid, or the API response
- *   payload is invalid.
- */
-const sendCreateBeerCommentRequest = async ({
-  beerPostId,
-  content,
-  rating,
-}: z.infer<typeof BeerCommentValidationSchemaWithId>) => {
-  const response = await fetch(`/api/beers/${beerPostId}/comments`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ beerPostId, 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;
-};
-
-export default sendCreateBeerCommentRequest;

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

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