feat: show modal on error

coderSuresh · coderSuresh · commit 426fdf5719c1 · 2023-10-07T15:02:28.000+05:45
diff --git a/app/page.tsx b/app/page.tsx
@@ -12,17 +12,22 @@ import { CommentContext } from '@/context/CommentContext'
 import { removeDeletedReply } from '@/utils/removeDeleted/removeDeletedReply'
 import { removeDeletedComment } from '@/utils/removeDeleted/removeDeletedComment'
 import { EditCommentContext } from '@/context/EditCommentContext'
+import Modal from '@/components/Modal'
 
 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 { editCommentValues } = React.useContext(EditCommentContext)
   const router = useRouter()
 
   const [comments, setComments] = React.useState<CommentProps[]>([])
   const [loading, setLoading] = React.useState(false)
+  const [needsToShowModal, setNeedsToShowModal] = React.useState({
+    show: false,
+    message: '',
+  })
 
   React.useEffect(() => {
     const checkIfUserIsLoggedIn = () => {
@@ -52,7 +57,10 @@ const Home = () => {
     setLoading(false)
 
     if (data.error) {
-      alert(data.error)
+      setNeedsToShowModal({
+        show: true,
+        message: data.error,
+      })
       return
     }
 
@@ -165,6 +173,17 @@ const Home = () => {
     <>
       {values.isLoggedIn ?
         <>
+          
+          {
+            needsToShowModal.show &&
+            <Modal
+              title='Error'
+              positive='Ok'
+              message={needsToShowModal.message}
+              confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+            />
+          }
+
           <header className='md:w-[740px] md:mx-auto md:static md:my-10 flex items-center justify-between gap-5 mb-5 absolute top-0 left-0 right-0 bg-white p-5'>
             <div className='flex gap-5 items-center'>
               <Image className='w-12' src='/images/avatars/image-amyrobson.png' height={50} width={50} alt='your profile photo' />
diff --git a/components/AddComment.tsx b/components/AddComment.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import Image from 'next/image'
 import { UserContext } from '@/context/UserContext'
 import { CommentProps } from '@/types/props'
+import Modal from './Modal'
 
 type AddCommentProps = {
     setComments: React.Dispatch<React.SetStateAction<CommentProps[]>>
@@ -12,6 +13,10 @@ const AddComment = ({ setComments }: AddCommentProps) => {
 
     const [comment, setComment] = React.useState('')
     const [commenting, setCommenting] = React.useState(false)
+    const [needsToShowModal, setNeedsToShowModal] = React.useState({
+        show: false,
+        message: '',
+    })
 
     const { values } = React.useContext(UserContext)
 
@@ -21,7 +26,10 @@ const AddComment = ({ setComments }: AddCommentProps) => {
         setCommenting(true)
 
         if (!values.username) {
-            alert('Please login to post a comment')
+            setNeedsToShowModal({
+                show: true,
+                message: 'Please log in to post a comment.',
+            })
             setCommenting(false)
             return
         }
@@ -41,7 +49,10 @@ const AddComment = ({ setComments }: AddCommentProps) => {
                 setCommenting(false)
 
                 if (data.error) {
-                    console.log(data.error)
+                    setNeedsToShowModal({
+                        show: true,
+                        message: data.error,
+                    })
                     return
                 }
 
@@ -52,6 +63,15 @@ const AddComment = ({ setComments }: AddCommentProps) => {
 
     return (
         <div className='bg-white p-5 text-dark-blue relative rounded-md flex gap-5 mb-5 sm:flex-row items-start'>
+            {
+                needsToShowModal.show &&
+                <Modal
+                    title='Error'
+                    positive='Ok'
+                    message={needsToShowModal.message}
+                    confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+                />
+            }
             <Image
                 priority
                 src='/images/avatars/image-amyrobson.png'
diff --git a/components/AddReply.tsx b/components/AddReply.tsx
@@ -4,11 +4,16 @@ import Image from 'next/image'
 import { UserContext } from '@/context/UserContext'
 import { ReplyContext } from '@/context/ReplyContext'
 import { ReplyProps } from '@/types/props'
+import Modal from './Modal'
 
 const AddReply = ({ author, _id, addReplyToComment }: ReplyProps) => {
 
     const [comment, setComment] = React.useState('')
     const [commenting, setCommenting] = React.useState(false)
+    const [needsToShowModal, setNeedsToShowModal] = React.useState({
+        show: false,
+        message: '',
+    })
 
     const { values } = React.useContext(UserContext)
     const { setReply } = React.useContext(ReplyContext)
@@ -19,7 +24,10 @@ const AddReply = ({ author, _id, addReplyToComment }: ReplyProps) => {
         setCommenting(true)
 
         if (!values.username) {
-            alert('Please login to post a reply')
+            setNeedsToShowModal({
+                show: true,
+                message: 'Please log in to post a comment.',
+            })
             setCommenting(false)
             return
         }
@@ -43,7 +51,10 @@ const AddReply = ({ author, _id, addReplyToComment }: ReplyProps) => {
                 setCommenting(false)
 
                 if (data.error) {
-                    console.log(data.error)
+                    setNeedsToShowModal({
+                        show: true,
+                        message: data.error,
+                    })
                     return
                 }
 
@@ -60,6 +71,17 @@ const AddReply = ({ author, _id, addReplyToComment }: ReplyProps) => {
 
     return (
         <div className='bg-white p-5 text-dark-blue relative rounded-md flex gap-5 mb-5 sm:flex-row items-start'>
+
+            {
+                needsToShowModal.show &&
+                <Modal
+                    title='Error'
+                    positive='Ok'
+                    message={needsToShowModal.message}
+                    confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+                />
+            }
+
             <Image
                 priority
                 src='/images/avatars/image-amyrobson.png'
diff --git a/components/CommentCardBtns.tsx b/components/CommentCardBtns.tsx
@@ -17,6 +17,10 @@ const CommentCardBtns = ({ _id, commentID, isReply, userId, author }: CommentPro
     const [loading, setLoading] = React.useState(true)
     const [deleting, setDeleting] = React.useState(false)
     const [confirmation, setConfirmation] = React.useState(false)
+    const [needsToShowModal, setNeedsToShowModal] = React.useState({
+        show: false,
+        message: '',
+    })
 
     const checkIfUserIsAuthor = async () => {
         fetch('/api/verify-author', {
@@ -29,7 +33,10 @@ const CommentCardBtns = ({ _id, commentID, isReply, userId, author }: CommentPro
                 setLoading(false)
 
                 if (data.error) {
-                    console.log(data.error)
+                    setNeedsToShowModal({
+                        show: true,
+                        message: data.error,
+                    })
                     return
                 }
 
@@ -65,7 +72,10 @@ const CommentCardBtns = ({ _id, commentID, isReply, userId, author }: CommentPro
         setDeleting(false)
 
         if (data.error) {
-            alert(data.error)
+            setNeedsToShowModal({
+                show: true,
+                message: data.error,
+            })
             return
         }
 
@@ -95,6 +105,16 @@ const CommentCardBtns = ({ _id, commentID, isReply, userId, author }: CommentPro
     return (
         <div className='sm:static absolute bottom-8 right-5'>
 
+            {
+                needsToShowModal.show &&
+                <Modal
+                    title='Error'
+                    positive='Ok'
+                    message={needsToShowModal.message}
+                    confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+                />
+            }
+
             {
                 confirmation &&
                 <Modal
diff --git a/components/EditComment.tsx b/components/EditComment.tsx
@@ -1,12 +1,18 @@
 import React from 'react'
 import { CommentProps } from '@/types/props'
 import { EditCommentContext } from '@/context/EditCommentContext'
+import Modal from './Modal'
 
 const EditComment = ({ comment, commentID, isReply, _id }: CommentProps) => {
 
     const [commenting, setCommenting] = React.useState(false)
     const [localComment, setLocalComment] = React.useState(comment)
 
+    const [needsToShowModal, setNeedsToShowModal] = React.useState({
+        show: false,
+        message: '',
+    })
+
     const { editCommentValues, setEditCommentValues } = React.useContext(EditCommentContext)
 
     const updateComment = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -23,7 +29,10 @@ const EditComment = ({ comment, commentID, isReply, _id }: CommentProps) => {
         setCommenting(false)
 
         if (data.error) {
-            alert(data.error)
+            setNeedsToShowModal({
+                show: true,
+                message: data.error,
+            })
             return
         }
 
@@ -37,31 +46,43 @@ const EditComment = ({ comment, commentID, isReply, _id }: CommentProps) => {
     }
 
     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='placeholder-grayish-blue
+        <>
+            {
+                needsToShowModal.show &&
+                <Modal
+                    title='Error'
+                    positive='Ok'
+                    message={needsToShowModal.message}
+                    confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+                />
+            }
+
+            <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='placeholder-grayish-blue
                     resize-none border rounded-md w-full h-24 py-3 px-5 focus:border-moderate-blue focus:outline-none
                     '
-            />
-            <div className='self-end flex items-center bg-white sm:static absolute bottom-5 right-5'>
-                <button aria-label='cancel edit'>
-                    <i
-                        onClick={() => setEditCommentValues({ ...editCommentValues, editComment: false })}
-                        className='fas fa-times mr-5 text-xl'
-                    />
-                </button>
-                <button
-                    className='bg-moderate-blue text-white px-5 py-2 uppercase rounded-md font-medium hover:opacity-50'
-                >
-                    {commenting ? 'Updating' : 'Update'}
-                </button>
-            </div>
-        </form>
+                />
+                <div className='self-end flex items-center bg-white sm:static absolute bottom-5 right-5'>
+                    <button aria-label='cancel edit'>
+                        <i
+                            onClick={() => setEditCommentValues({ ...editCommentValues, editComment: false })}
+                            className='fas fa-times mr-5 text-xl'
+                        />
+                    </button>
+                    <button
+                        className='bg-moderate-blue text-white px-5 py-2 uppercase rounded-md font-medium hover:opacity-50'
+                    >
+                        {commenting ? 'Updating' : 'Update'}
+                    </button>
+                </div>
+            </form>
+        </>
     )
 }
 
diff --git a/components/Modal.tsx b/components/Modal.tsx
@@ -3,17 +3,21 @@ import { ModalProps } from "@/types/props"
 const Modal = ({ title, message, positive, negative, confirm, cancel }: ModalProps) => {
     return (
         <div className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 flex justify-center items-center'>
-            <div className='bg-white sm:w-[350px] w-full mx-5 rounded-lg sm:p-6 p-4'>
+            <div className='bg-white sm:w-[350px] text-start w-full mx-5 rounded-lg sm:p-6 p-4'>
                 <h2 className='font-medium text-xl'>
                     {title}
                 </h2>
+                <hr className='my-2' />
                 <p className='text-grayish-blue text-sm my-5'>
                     {message}
                 </p>
                 <div className='flex gap-3 text-white'>
-                    <button onClick={cancel} className='bg-grayish-blue text-sm rounded-md sm:px-4 p-2 sm:py-3 flex-grow uppercase font-medium hover:opacity-50'>
-                        {negative}
-                    </button>
+                    {
+                        cancel &&
+                        <button onClick={cancel} className='bg-grayish-blue text-sm rounded-md sm:px-4 p-2 sm:py-3 flex-grow uppercase font-medium hover:opacity-50'>
+                            {negative}
+                        </button>
+                    }
                     <button onClick={confirm} className='bg-soft-red text-white text-sm sm:px-4 p-2 sm:py-3 rounded-md flex-grow uppercase font-medium hover:opacity-50'>
                         {positive}
                     </button>
diff --git a/components/UpvoteDownvote.tsx b/components/UpvoteDownvote.tsx
@@ -1,12 +1,17 @@
 'use client'
+import React from 'react'
 import { UserContext } from '@/context/UserContext'
 import { CommentProps } from '@/types/props'
-import React from 'react'
+import Modal from './Modal'
 
 const UpvoteDownvote = ({ _id, score, author, commentID }: CommentProps) => {
 
     const [vote, setVote] = React.useState(score || 0)
     const [voting, setVoting] = React.useState(false)
+    const [needsToShowModal, setNeedsToShowModal] = React.useState({
+        show: false,
+        message: '',
+    })
 
     const { values } = React.useContext(UserContext)
 
@@ -38,7 +43,10 @@ const UpvoteDownvote = ({ _id, score, author, commentID }: CommentProps) => {
                 setVoting(false)
 
                 if (data.error) {
-                    alert(data.error)
+                    setNeedsToShowModal({
+                        show: true,
+                        message: data.error,
+                    })
                     return
                 }
 
@@ -48,6 +56,17 @@ const UpvoteDownvote = ({ _id, score, author, commentID }: CommentProps) => {
 
     return (
         <div className='flex sm:flex-col sm:py-3 px-3 sm:gap-2 gap-x-5  bg-very-light-gray w-fit h-fit rounded-xl text-center'>
+
+            {
+                needsToShowModal.show &&
+                <Modal
+                    title='Error'
+                    positive='Ok'
+                    message={needsToShowModal.message}
+                    confirm={() => setNeedsToShowModal({ show: false, message: '' })}
+                />
+            }
+
             <button
                 aria-label='upvote'
                 onClick={() => handleUpvote()}
diff --git a/types/props.ts b/types/props.ts
