fix: fix btn cancel diplay toast

nguyentrongbut · Aug 9, 2024 · 5fab1cf · 5fab1cf
1 parent 0edaa62
commit 5fab1cf
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 86 deletions.
diff --git a/src/app/title/[slug]/reviews/@component/crud/c.review.comments.tsx b/src/app/title/[slug]/reviews/@component/crud/c.review.comments.tsx
@@ -16,7 +16,8 @@ const CReviewComments = (props: any) => {
     const [rating, setRating] = useState<number | null>(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const handleSubmit = async () => {
+    const handleSubmit = async (e:React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
         if (rating == null) {
             toast({
                 title: "Error!",
@@ -33,35 +34,34 @@ const CReviewComments = (props: any) => {
                 icon: <IconLoading />,
             });
         }
-        setTimeout(async () => {
-            if (rating != null && !hasReviewId) {
-                const data = await sendRequest<IReviews>({
-                    url: `${process.env.NEXT_PUBLIC_WEB_COMIC_API}/api/reviews`,
-                    method: "POST",
-                    body: {
-                        comicId: id,
-                        authorId: currentIdUser,
-                        content: yourReviewComment,
-                        rated: rating,
-                    },
+
+        if (rating != null && !hasReviewId) {
+            const data = await sendRequest<IReviews>({
+                url: `${process.env.NEXT_PUBLIC_WEB_COMIC_API}/api/reviews`,
+                method: "POST",
+                body: {
+                    comicId: id,
+                    authorId: currentIdUser,
+                    content: yourReviewComment,
+                    rated: rating,
+                },
+            });
+            if (data) {
+                fetchReviews();
+                toast({
+                    title: "Success!",
+                    description: "You have successfully reviewed",
+                    icon: <IconSuccess />,
                 });
-                if (data) {
-                    fetchReviews();
-                    toast({
-                        title: "Success!",
-                        description: "You have successfully reviewed",
-                        icon: <IconSuccess />,
-                    });
-                    setYourReviewComment("");
-                }
+                setYourReviewComment("");
             }
-            setIsSubmitting(false);
-        }, 1);
+        }
+        setIsSubmitting(false);
     };
 
     return (
         <form
-            onSubmit={(e) => e.preventDefault()}
+            onSubmit={handleSubmit}
             className={hasReviewId && "hidden"}
         >
             <Rating rating={rating} setRating={setRating}></Rating>
@@ -82,12 +82,12 @@ const CReviewComments = (props: any) => {
             <div className="flex justify-end mt-6">
                 <Button
                     className={`flex gap-1 items-center bg-primary-color p-1.5 ${
-                        isSubmitting && "pointer-events-none"
+                        isSubmitting ? "pointer-events-none" : ""
                     }`}
-                    onClick={handleSubmit}
                     disabled={isSubmitting}
+                    type="submit"
                 >
-                    {isSubmitting ? (
+                    {isSubmitting && rating !== null ? (
                         <IconLoading className="animate-spin" />
                     ) : (
                         <IconSend />

diff --git a/src/app/title/[slug]/reviews/@component/crud/r.review.comments.tsx b/src/app/title/[slug]/reviews/@component/crud/r.review.comments.tsx
@@ -51,23 +51,21 @@ const RReviewComments = (props: any) => {
                 fetchReviews={fetchReviews}
                 hasReviewId={hasReviewId}
             ></CReviewComments>
-            <form
-                onSubmit={(e) => e.preventDefault()}
-                className={formUpdate ? "" : "hidden"}
-            >
-                {specialReview && (
-                    <UReviewComments
-                        uId={specialReview?.id}
-                        currentIdUser={currentIdUser}
-                        id={id}
-                        fetchReviews={fetchReviews}
-                        setHiddenReviewCurrent={setHiddenReviewCurrent}
-                        setFormUpdate={setFormUpdate}
-                        currentRating={specialReview?.rated}
-                        currentReview={specialReview?.content}
-                    ></UReviewComments>
-                )}
-            </form>
+
+            {specialReview && (
+                <UReviewComments
+                    uId={specialReview?.id}
+                    currentIdUser={currentIdUser}
+                    id={id}
+                    fetchReviews={fetchReviews}
+                    setHiddenReviewCurrent={setHiddenReviewCurrent}
+                    formUpdate={formUpdate}
+                    setFormUpdate={setFormUpdate}
+                    currentRating={specialReview?.rated}
+                    currentReview={specialReview?.content}
+                ></UReviewComments>
+            )}
+
             <Separator
                 className={`mt-4 bg-neutral-300 ${currentIdUser && "hidden"}`}
             ></Separator>

diff --git a/src/app/title/[slug]/reviews/@component/crud/u.review.comments.tsx b/src/app/title/[slug]/reviews/@component/crud/u.review.comments.tsx
@@ -19,53 +19,58 @@ const UReviewComments = (props: any) => {
         setFormUpdate,
         currentRating,
         currentReview,
+        formUpdate,
     } = props;
     const [uRating, setURating] = useState(currentRating);
     const [uReview, setUReview] = useState(currentReview);
     const [isSubmitting, setIsSubmitting] = useState(false);
-
-    const handleSubmit = async () => {
-        setIsSubmitting(true);
-        toast({
-            title: "Please wait...",
-            description: "Updating review",
-            icon: <IconLoading />,
-        });
-        setTimeout(async () => {
-            if (uRating != null) {
-                const data = await sendRequest<IReviews>({
-                    url: `${process.env.NEXT_PUBLIC_WEB_COMIC_API}/api/reviews/${uId}`,
-                    method: "PATCH",
-                    body: {
-                        comicId: id,
-                        authorId: currentIdUser,
-                        content: uReview,
-                        rated: uRating,
-                        updateAt: Date.now(),
-                    },
-                });
-                if (data) {
-                    setFormUpdate(false);
-                    fetchReviews();
-                    setHiddenReviewCurrent(true);
-                    toast({
-                        title: "Success!",
-                        description: "Your review was successfully updated.",
-                        icon: <IconSuccess />,
-                    });
-                }
-            }
-            setIsSubmitting(false);
-        }, 1);
-    };
+    const [isCancel, setIsCancel] = useState(true);
 
     const handleCancel = () => {
         setFormUpdate(false);
         setHiddenReviewCurrent(true);
+        setIsCancel(true);
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsCancel(false);
+        setIsSubmitting(true);
+        if (!isCancel) {
+            toast({
+                title: "Please wait...",
+                description: "Updating review",
+                icon: <IconLoading />,
+            });
+        }
+        if (uRating != null) {
+            const data = await sendRequest<IReviews>({
+                url: `${process.env.NEXT_PUBLIC_WEB_COMIC_API}/api/reviews/${uId}`,
+                method: "PATCH",
+                body: {
+                    comicId: id,
+                    authorId: currentIdUser,
+                    content: uReview,
+                    rated: uRating,
+                    updateAt: Date.now(),
+                },
+            });
+            if (data && !isCancel) {
+                setFormUpdate(false);
+                fetchReviews();
+                setHiddenReviewCurrent(true);
+                toast({
+                    title: "Success!",
+                    description: "Your review was successfully updated.",
+                    icon: <IconSuccess />,
+                });
+            }
+        }
+        setIsSubmitting(false);
     };
 
     return (
-        <>
+        <form onSubmit={handleSubmit} className={formUpdate ? "" : "hidden"}>
             <Rating rating={uRating} setRating={setURating}></Rating>
             <div className="relative">
                 <Textarea
@@ -89,21 +94,20 @@ const UReviewComments = (props: any) => {
                     Cancel
                 </Button>
                 <Button
-                    className={`flex gap-1 items-center bg-primary-color p-1.5 ${
-                        isSubmitting && "pointer-events-none"
-                    }`}
-                    onClick={handleSubmit}
+                    className={`flex gap-1 items-center bg-primary-color p-1.5
+                    } ${isSubmitting ? "pointer-events-none" : ""}`}
                     disabled={isSubmitting}
+                    type="submit"
                 >
-                    {isSubmitting ? (
+                    {isSubmitting && uRating !== null ? (
                         <IconLoading className="animate-spin" />
                     ) : (
                         <IconSend />
                     )}
                     <span>{isSubmitting ? "Submitting..." : "Submit"}</span>
                 </Button>
             </div>
-        </>
+        </form>
     );
 };