feat: edit comment or reply and updat ui immediately

coderSuresh · coderSuresh · commit 7f4499cbcb66 · 2023-10-07T13:31:40.000+05:45
diff --git a/app/api/update-comment/route.ts b/app/api/update-comment/route.ts
@@ -0,0 +1,50 @@
+import CommentModel from "@/models/Comment"
+import { connectDB } from "@/utils/database"
+import { CommentProps } from "@/types/props"
+
+const PUT = async (req: Request) => {
+    try {
+        const { id, commentId, comment } = await req.json()
+
+        await connectDB()
+
+        const commentToEdit = await CommentModel.findOne({ _id: id })
+
+        if (!commentToEdit) {
+            // user is editing a reply
+            const parentComment = await CommentModel.findOne(
+                { '_id': commentId }
+            )
+
+            if (!parentComment) {
+                return new Response(JSON.stringify({ error: 'Comment not found!' }))
+            }
+
+            const reply = parentComment.replies.find((reply: CommentProps) => reply._id == id)
+
+            if (!reply) {
+                return new Response(JSON.stringify({ error: 'Reply not found!' }))
+            }
+
+            reply.comment = comment
+
+            const updated = await CommentModel.updateOne(
+                { _id: commentId },
+                { $set: { replies: parentComment.replies } }
+            )
+
+            if (!updated.matchedCount) return new Response(JSON.stringify({ error: 'Could not update comment. Please try again.' }))
+
+            return new Response(JSON.stringify({ success: 'Commment updated successfully.' }))
+        }
+
+        commentToEdit.comment = comment
+        await commentToEdit.save()
+        return new Response(JSON.stringify({ success: 'Comment updated successfully!' }))
+
+    } catch (error) {
+        new Response(JSON.stringify({ error: 'Something went wrong! Please try again.' }))
+    }
+}
+
+export { PUT }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from 'next'
 import UserProvider from '@/providers/UserProvider'
 import ReplyProvider from '@/providers/ReplyProvider'
 import DeletedCommentProvider from '@/providers/DeletedCommentProvider'
+import EditCommentProvider from '@/providers/EditCommentProvider'
 
 export const metadata: Metadata = {
   title: 'Comments | CoderSuresh',
@@ -23,9 +24,11 @@ const RootLayout = ({
       <body className='md:w-[740px] md:mx-auto mx-3 md:my-10'>
         <UserProvider>
           <DeletedCommentProvider>
-            <ReplyProvider>
-              {children}
-            </ReplyProvider>
+            <EditCommentProvider>
+              <ReplyProvider>
+                {children}
+              </ReplyProvider>
+            </EditCommentProvider>
           </DeletedCommentProvider>
         </UserProvider>
       </body>
diff --git a/app/page.tsx b/app/page.tsx
@@ -9,14 +9,16 @@ import { ReplyContext } from '@/context/ReplyContext'
 import { CommentProps } from '@/types/props'
 import AddReply from '@/components/AddReply'
 import { CommentContext } from '@/context/CommentContext'
-import {removeDeletedReply} from '@/utils/removeDeleted/removeDeletedReply'
+import { removeDeletedReply } from '@/utils/removeDeleted/removeDeletedReply'
 import { removeDeletedComment } from '@/utils/removeDeleted/removeDeletedComment'
+import { EditCommentContext } from '@/context/EditCommentContext'
 
 const Home = () => {
 
   const { values, setValues } = React.useContext(UserContext)
   const { reply } = React.useContext(ReplyContext)
   const { deletedCommentValues, setDeletedCommentValues } = React.useContext(CommentContext)
+  const { editCommentValues, setEditCommentValues } = React.useContext(EditCommentContext)
   const router = useRouter()
 
   const [comments, setComments] = React.useState<CommentProps[]>([])
@@ -50,7 +52,7 @@ const Home = () => {
     setLoading(false)
 
     if (data.error) {
-      console.log(data.error)
+      alert(data.error)
       return
     }
 
@@ -62,6 +64,7 @@ const Home = () => {
     fetchComments()
   }, [])
 
+  // updated ui when a comment or reply is deleted
   React.useEffect(() => {
     if (deletedCommentValues.isDeleted) {
 
@@ -78,6 +81,33 @@ const Home = () => {
     }
   }, [deletedCommentValues])
 
+  // update ui when a comment or reply is updated by the author
+  React.useEffect(() => {
+    if (editCommentValues.editedComment) {
+
+      const commentIndex = comments.findIndex(comment => comment._id === editCommentValues.commentId)
+
+      if (commentIndex != -1) {
+        const updatedComments = [...comments]
+
+        if (editCommentValues.isReply) {
+          const replies = updatedComments[commentIndex].replies
+
+          replies?.map((reply: CommentProps) => {
+            if (reply._id === editCommentValues.id) {
+              reply.comment = editCommentValues.editedComment
+            }
+          })
+
+        } else {
+          updatedComments[commentIndex].comment = editCommentValues.editedComment
+        }
+
+        setComments(updatedComments)
+      }
+    }
+  }, [editCommentValues])
+
   const addReplyToComment = (commentId: string, newReply: CommentProps) => {
     setComments((prevComments: any) => [
       ...prevComments.map((comment: CommentProps) => {
diff --git a/components/CommentBody.tsx b/components/CommentBody.tsx
@@ -4,10 +4,13 @@ import CommentCardBtns from './CommentCardBtns'
 import { CommentProps } from '@/types/props'
 import { UserContext } from '@/context/UserContext'
 import { formatDistanceToNow } from 'date-fns'
+import { EditCommentContext } from '@/context/EditCommentContext'
+import EditComment from './EditComment'
 
 const CommentBody = ({ _id, author, commentID, userId, replyTo, comment, createdAt, loading }: CommentProps) => {
 
     const { values } = React.useContext(UserContext)
+    const { editCommentValues } = React.useContext(EditCommentContext)
 
     const renderTime = (createdAt: Date) => {
         const timeAgo = formatDistanceToNow(new Date(createdAt), {
@@ -53,7 +56,7 @@ const CommentBody = ({ _id, author, commentID, userId, replyTo, comment, created
                     </div>
                 </div>
 
-                <CommentCardBtns _id={_id} commentID={commentID || _id} userId={userId} author={author} />
+                <CommentCardBtns _id={_id} isReply={commentID ? true : false} commentID={commentID || _id} userId={userId} author={author} />
 
             </div>
 
@@ -67,7 +70,12 @@ const CommentBody = ({ _id, author, commentID, userId, replyTo, comment, created
                             <span className='font-medium text-moderate-blue'>@{replyTo} </span>
                     }
                     {
-                        comment
+                        editCommentValues.editComment && editCommentValues.id === _id
+                            ?
+                            // only reply has commentID field in DB.
+                            <EditComment comment={comment} isReply={commentID ? true : false} commentID={commentID || _id} _id={_id} />
+                            :
+                            comment
                     }
                 </div>
             </div>
diff --git a/components/CommentCardBtns.tsx b/components/CommentCardBtns.tsx
@@ -4,12 +4,14 @@ import { ReplyContext } from '@/context/ReplyContext'
 import { UserContext } from '@/context/UserContext'
 import { CommentContext } from '@/context/CommentContext'
 import Modal from './Modal'
+import { EditCommentContext } from '@/context/EditCommentContext'
 
-const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
+const CommentCardBtns = ({ _id, commentID, isReply, userId, author }: CommentProps) => {
 
     const { reply, setReply } = React.useContext(ReplyContext)
     const { values } = React.useContext(UserContext)
     const { setDeletedCommentValues } = React.useContext(CommentContext)
+    const { setEditCommentValues } = React.useContext(EditCommentContext)
 
     const [isAuthor, setIsAuthor] = React.useState(false)
     const [loading, setLoading] = React.useState(true)
@@ -80,6 +82,16 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
         })
     }
 
+    const editComment = () => {
+        setEditCommentValues({
+            editComment: true,
+            id: _id!,
+            commentId: commentID!,
+            editedComment: '',
+            isReply: isReply || false,
+        })
+    }
+
     return (
         <div className='sm:static absolute bottom-8 right-5'>
 
@@ -113,7 +125,7 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
                                 </button>
                         }
 
-                        <button className='flex items-center gap-x-2 hover:opacity-50 text-sm font-medium text-moderate-blue'>
+                        <button onClick={() => editComment()} className='flex items-center gap-x-2 hover:opacity-50 text-sm font-medium text-moderate-blue'>
                             <i className='fas fa-pencil text-xs' />
                             <span>Edit</span>
                         </button>
diff --git a/components/EditComment.tsx b/components/EditComment.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { CommentProps } from '@/types/props'
+import { EditCommentContext } from '@/context/EditCommentContext'
+
+const EditComment = ({ comment, commentID, isReply, _id }: CommentProps) => {
+
+    const [commenting, setCommenting] = React.useState(false)
+    const [localComment, setLocalComment] = React.useState(comment)
+
+    const { editCommentValues, setEditCommentValues } = React.useContext(EditCommentContext)
+
+    const updateComment = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        setCommenting(true)
+
+        const res = await fetch('/api/update-comment', {
+            method: 'PUT',
+            body: JSON.stringify({ 'comment': localComment, 'id': _id, 'commentId': commentID })
+        })
+
+        const data = await res.json()
+
+        setCommenting(false)
+
+        if (data.error) {
+            alert(data.error)
+            return
+        }
+
+        console.log(commentID, isReply)
+
+        setEditCommentValues({
+            ...editCommentValues,
+            editComment: false,
+            editedComment: localComment!,
+        })
+    }
+
+    return (
+        <form action="#" onSubmit={updateComment} className='flex flex-1 flex-col items-start gap-5'>
+            <textarea
+                required
+                value={localComment}
+                onChange={(e) => setLocalComment(e.currentTarget.value)}
+                placeholder='Add a reply...'
+                name="comment" id="comment"
+                className='sm:mb-0 mb-[60px] placeholder-grayish-blue
+                    resize-none border rounded-md w-full h-24 py-3 px-5 focus:border-moderate-blue focus:outline-none
+                    '
+            />
+            <button
+                className='bg-moderate-blue self-end text-white px-5 py-2 uppercase rounded-md font-medium hover:opacity-50
+                        sm:static absolute bottom-5 right-5'
+            >
+                {commenting ? 'Updating' : 'Update'}
+            </button>
+        </form>
+    )
+}
+
+export default EditComment
diff --git a/context/EditCommentContext.ts b/context/EditCommentContext.ts
@@ -0,0 +1,9 @@
+import React from 'react'
+import { EditCommentContextType } from '@/types/EditCommentContextType'
+
+const EditCommentContext = React.createContext({
+    editCommentValues: {} as EditCommentContextType,
+    setEditCommentValues: (editCommentValues: EditCommentContextType) => { }
+})
+
+export { EditCommentContext }
diff --git a/providers/EditCommentProvider.tsx b/providers/EditCommentProvider.tsx
@@ -0,0 +1,21 @@
+'use client'
+import React from 'react'
+import { EditCommentContext } from '@/context/EditCommentContext'
+import { ChildrenProps } from '@/types/props'
+import { EditCommentContextType } from '@/types/EditCommentContextType'
+
+const EditCommentProvider = ({ children }: ChildrenProps) => {
+
+    const [editCommentValues, setEditCommentValues] = React.useState<EditCommentContextType>({
+        editComment: false,
+        id: '',
+    })
+
+    return (
+        <EditCommentContext.Provider value={{ editCommentValues, setEditCommentValues }}>
+            {children}
+        </EditCommentContext.Provider>
+    )
+}
+
+export default EditCommentProvider
diff --git a/types/EditCommentContextType.ts b/types/EditCommentContextType.ts
@@ -0,0 +1,7 @@
+export type EditCommentContextType = {
+    editComment: boolean,
+    editedComment: string,
+    id: string,
+    isReply: boolean,
+    commentId: string,
+}
diff --git a/types/props.ts b/types/props.ts
@@ -11,6 +11,7 @@ export type CommentProps = {
     createdAt?: Date,
     loading?: boolean,
     replies?: [],
+    isReply?: boolean,
     score?: number,
     replyTo?: string,
 };
