Update: Refactor comments section to prop drill edit and delete handlers

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -3,6 +3,7 @@ import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResul
 import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
+import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
 import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 
@@ -10,20 +11,36 @@ 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>;
 }
 
-const CommentCardBody: FC<CommentCardProps> = ({ comment, mutate, ref }) => {
+const CommentCardBody: FC<CommentCardProps> = ({
+  comment,
+  mutate,
+  ref,
+  handleDeleteRequest,
+  handleEditRequest,
+}) => {
   const [inEditMode, setInEditMode] = useState(false);
 
-  return !inEditMode ? (
-    <CommentContentBody comment={comment} ref={ref} setInEditMode={setInEditMode} />
-  ) : (
-    <EditCommentBody
-      comment={comment}
-      mutate={mutate}
-      setInEditMode={setInEditMode}
-      ref={ref}
-    />
+  return (
+    <div ref={ref}>
+      {!inEditMode ? (
+        <CommentContentBody comment={comment} setInEditMode={setInEditMode} />
+      ) : (
+        <EditCommentBody
+          comment={comment}
+          mutate={mutate}
+          setInEditMode={setInEditMode}
+          handleDeleteRequest={handleDeleteRequest}
+          handleEditRequest={handleEditRequest}
+        />
+      )}
+    </div>
   );
 };
 

src/components/BeerBreweryComments/CommentCardDropdown.tsx

@@ -36,7 +36,14 @@ const CommentCardDropdown: FC<CommentCardDropdownProps> = ({
               Edit
             </button>
           ) : (
-            <button>Report</button>
+            <button
+              type="button"
+              onClick={() => {
+                alert('This feature is not yet implemented.');
+              }}
+            >
+              Report
+            </button>
           )}
         </li>
       </ul>

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -4,26 +4,21 @@ import { format } from 'date-fns';
 import { Dispatch, FC, SetStateAction, useContext } from 'react';
 import { Link, Rating } from 'react-daisyui';
 import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
-import { useInView } from 'react-intersection-observer';
+
 import { z } from 'zod';
 import CommentCardDropdown from './CommentCardDropdown';
 
 interface CommentContentBodyProps {
   comment: z.infer<typeof CommentQueryResult>;
-  ref: ReturnType<typeof useInView>['ref'] | undefined;
   setInEditMode: Dispatch<SetStateAction<boolean>>;
 }
 
-const CommentContentBody: FC<CommentContentBodyProps> = ({
-  comment,
-  ref,
-  setInEditMode,
-}) => {
+const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMode }) => {
   const { user } = useContext(UserContext);
   const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
   return (
-    <div className="card-body animate-in fade-in-10" ref={ref}>
+    <div className="card-body animate-in fade-in-10">
       <div className="flex flex-row justify-between">
         <div>
           <h3 className="font-semibold sm:text-2xl">

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -1,38 +1,44 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
+import { FC, useState, Dispatch, SetStateAction } from 'react';
 import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
 import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
-import { useInView } from 'react-intersection-observer';
 import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
+import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
 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';
 
-interface CommentCardDropdownProps {
+interface EditCommentBodyProps {
   comment: z.infer<typeof CommentQueryResult>;
   setInEditMode: Dispatch<SetStateAction<boolean>>;
-  ref: ReturnType<typeof useInView>['ref'] | undefined;
-  mutate: ReturnType<typeof useBeerPostComments>['mutate'];
+
+  mutate: ReturnType<
+    typeof useBeerPostComments | typeof useBreweryPostComments
+  >['mutate'];
+  handleDeleteRequest: (id: string) => Promise<void>;
+  handleEditRequest: (
+    id: string,
+    data: z.infer<typeof CreateCommentValidationSchema>,
+  ) => Promise<void>;
 }
 
-const EditCommentBody: FC<CommentCardDropdownProps> = ({
+const EditCommentBody: FC<EditCommentBodyProps> = ({
   comment,
   setInEditMode,
-  ref,
+
   mutate,
+  handleDeleteRequest,
+  handleEditRequest,
 }) => {
   const { register, handleSubmit, formState, setValue, watch } = useForm<
     z.infer<typeof CreateCommentValidationSchema>
   >({
-    defaultValues: {
-      content: comment.content,
-      rating: comment.rating,
-    },
+    defaultValues: { content: comment.content, rating: comment.rating },
     resolver: zodResolver(CreateCommentValidationSchema),
   });
 
@@ -40,49 +46,24 @@ const EditCommentBody: FC<CommentCardDropdownProps> = ({
 
   const [isDeleting, setIsDeleting] = useState(false);
 
-  useEffect(() => {
-    return () => {
-      setIsDeleting(false);
-    };
-  }, []);
-
-  const handleDelete = async () => {
+  const onDelete = async () => {
     setIsDeleting(true);
-    const response = await fetch(`/api/beer-comments/${comment.id}`, {
-      method: 'DELETE',
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to delete comment');
-    }
-
+    await handleDeleteRequest(comment.id);
     await mutate();
   };
 
-  const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
+  const onEdit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
-    const response = await fetch(`/api/beer-comments/${comment.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');
-    }
-
+    setInEditMode(true);
+    await handleEditRequest(comment.id, data);
     await mutate();
     setInEditMode(false);
   };
+
   return (
-    <div className="card-body animate-in fade-in-10" ref={ref}>
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
+    <div className="card-body animate-in fade-in-10">
+      <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
         <div>
           <FormInfo>
             <FormLabel htmlFor="content">Edit your comment</FormLabel>
@@ -142,7 +123,7 @@ const EditCommentBody: FC<CommentCardDropdownProps> = ({
               <button
                 type="button"
                 className="btn-xs btn lg:btn-sm"
-                onClick={handleDelete}
+                onClick={onDelete}
                 disabled={isDeleting || formState.isSubmitting}
               >
                 Delete