From 04e66ced86d335953760045d904c4b698adb55ac Mon Sep 17 00:00:00 2001
From: lim <lbooks424@gmail.com>
Date: Wed, 6 Mar 2024 03:37:14 +0900
Subject: [PATCH] [frontend] Fixed toast to be placed inside useEffect

---
 .../app/ui/settings/change-password-form.tsx  | 13 ++++---
 frontend/app/ui/settings/profile-form.tsx     |  9 +++--
 .../ui/user/accept-friend-request-button.tsx  | 34 ++++++++++---------
 frontend/app/ui/user/add-friend-button.tsx    | 22 ++++++------
 frontend/app/ui/user/block-button.tsx         | 22 ++++++------
 .../ui/user/cancel-friend-request-button.tsx  | 34 ++++++++++---------
 .../ui/user/reject-friend-request-button.tsx  | 34 ++++++++++---------
 frontend/app/ui/user/remove-friend-button.tsx | 22 ++++++------
 frontend/app/ui/user/unblock-button.tsx       | 22 ++++++------
 9 files changed, 117 insertions(+), 95 deletions(-)

diff --git a/frontend/app/ui/settings/change-password-form.tsx b/frontend/app/ui/settings/change-password-form.tsx
index f4c3b2bb..02fa8348 100644
--- a/frontend/app/ui/settings/change-password-form.tsx
+++ b/frontend/app/ui/settings/change-password-form.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/use-toast";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useFormState, useFormStatus } from "react-dom";
 
 function ErrorText({ text }: { text: string }) {
@@ -70,9 +70,14 @@ export default function ChangePasswordForm() {
   const { pending } = useFormStatus();
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  if (code === "Success") {
-    toast({ title: "Success", description: "Password updated successfully." });
-  }
+  useEffect(() => {
+    if (code === "Success") {
+      toast({
+        title: "Success",
+        description: "Password updated successfully.",
+      });
+    }
+  }, [code]);
   return (
     <form action={action}>
       <Stack space="space-y-4">
diff --git a/frontend/app/ui/settings/profile-form.tsx b/frontend/app/ui/settings/profile-form.tsx
index 59f9e060..98087614 100644
--- a/frontend/app/ui/settings/profile-form.tsx
+++ b/frontend/app/ui/settings/profile-form.tsx
@@ -4,6 +4,7 @@ import { useAuthContext } from "@/app/lib/client-auth";
 import { Stack } from "@/components/layout/stack";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState, useFormStatus } from "react-dom";
 import AvatarForm from "./avatar-form";
 import { ProfileItem } from "./profile-item-form";
@@ -20,9 +21,11 @@ export default function ProfileForm() {
   const { currentUser } = useAuthContext();
   const [code, action] = useFormState(updateUser, undefined);
   const { pending } = useFormStatus();
-  if (code === "Success") {
-    toast({ title: "Success", description: "Profile updated sccessfully." });
-  }
+  useEffect(() => {
+    if (code === "Success") {
+      toast({ title: "Success", description: "Profile updated sccessfully." });
+    }
+  }, [code]);
 
   // Menu: min 100px
   // Profile : the rest
diff --git a/frontend/app/ui/user/accept-friend-request-button.tsx b/frontend/app/ui/user/accept-friend-request-button.tsx
index dc32de73..1ec26ce8 100644
--- a/frontend/app/ui/user/accept-friend-request-button.tsx
+++ b/frontend/app/ui/user/accept-friend-request-button.tsx
@@ -2,25 +2,27 @@
 import { acceptFriendRequest } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: (
-      <>
-        Failed to confirm friend request.
-        <br />
-        Please reload the page and try again.
-      </>
-    ),
-  });
-};
-
 export default function AcceptFriendButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => acceptFriendRequest(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: (
+          <>
+            Failed to confirm friend request.
+            <br />
+            Please reload the page and try again.
+          </>
+        ),
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return <Button onClick={action}>Confirm</Button>;
 }
diff --git a/frontend/app/ui/user/add-friend-button.tsx b/frontend/app/ui/user/add-friend-button.tsx
index 6da83e1a..db0cd222 100644
--- a/frontend/app/ui/user/add-friend-button.tsx
+++ b/frontend/app/ui/user/add-friend-button.tsx
@@ -2,19 +2,21 @@
 import { addFriend } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: "Failed to send friend request",
-  });
-};
-
 export default function AddFriendButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => addFriend(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: "Failed to send friend request",
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return <Button onClick={action}>Add Friend</Button>;
 }
diff --git a/frontend/app/ui/user/block-button.tsx b/frontend/app/ui/user/block-button.tsx
index 690562cc..3042a9d6 100644
--- a/frontend/app/ui/user/block-button.tsx
+++ b/frontend/app/ui/user/block-button.tsx
@@ -2,19 +2,21 @@
 import { blockUser } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: "failed to block user",
-  });
-};
-
 export default function BlockButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => blockUser(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: "failed to block user",
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return <Button onClick={action}>Block</Button>;
 }
diff --git a/frontend/app/ui/user/cancel-friend-request-button.tsx b/frontend/app/ui/user/cancel-friend-request-button.tsx
index 66b561bb..492f507b 100644
--- a/frontend/app/ui/user/cancel-friend-request-button.tsx
+++ b/frontend/app/ui/user/cancel-friend-request-button.tsx
@@ -2,26 +2,28 @@
 import { cancelFriendRequest } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: (
-      <>
-        Failed to cancel friend request.
-        <br />
-        Please reload the page and try again.
-      </>
-    ),
-  });
-};
-
 export default function CancelFriendRequestButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => cancelFriendRequest(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: (
+          <>
+            Failed to cancel friend request.
+            <br />
+            Please reload the page and try again.
+          </>
+        ),
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return (
     <Button onClick={action} variant={"outline"}>
       Cancel Friend Request
diff --git a/frontend/app/ui/user/reject-friend-request-button.tsx b/frontend/app/ui/user/reject-friend-request-button.tsx
index 70c69315..4c600807 100644
--- a/frontend/app/ui/user/reject-friend-request-button.tsx
+++ b/frontend/app/ui/user/reject-friend-request-button.tsx
@@ -2,26 +2,28 @@
 import { rejectFriendRequest } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: (
-      <>
-        Failed to delete friend request.
-        <br />
-        Please reload the page and try again.
-      </>
-    ),
-  });
-};
-
 export default function RejectFriendRequestButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => rejectFriendRequest(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: (
+          <>
+            Failed to delete friend request.
+            <br />
+            Please reload the page and try again.
+          </>
+        ),
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return (
     <Button onClick={action} variant={"outline"}>
       Delete Request
diff --git a/frontend/app/ui/user/remove-friend-button.tsx b/frontend/app/ui/user/remove-friend-button.tsx
index cfa3956f..8614bd9b 100644
--- a/frontend/app/ui/user/remove-friend-button.tsx
+++ b/frontend/app/ui/user/remove-friend-button.tsx
@@ -2,20 +2,22 @@
 import { unfriend } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: "Failed to remove friend",
-  });
-};
-
 export default function RemoveFriendButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => unfriend(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: "Failed to remove friend",
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return (
     <Button onClick={action} variant={"outline"}>
       Remove Friend
diff --git a/frontend/app/ui/user/unblock-button.tsx b/frontend/app/ui/user/unblock-button.tsx
index 9de85746..ffa62e3b 100644
--- a/frontend/app/ui/user/unblock-button.tsx
+++ b/frontend/app/ui/user/unblock-button.tsx
@@ -2,20 +2,22 @@
 import { unblockUser } from "@/app/lib/actions";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 
-const showErrorToast = () => {
-  toast({
-    title: "Error",
-    description: "failed to unblock user",
-  });
-};
-
 export default function UnblockButton({ id }: { id: number }) {
   const [code, action] = useFormState(() => unblockUser(id), undefined);
-  if (code && code !== "Success") {
-    showErrorToast();
-  }
+  useEffect(() => {
+    const showErrorToast = () => {
+      toast({
+        title: "Error",
+        description: "failed to unblock user",
+      });
+    };
+    if (code && code !== "Success") {
+      showErrorToast();
+    }
+  }, [code]);
   return (
     <Button onClick={action} variant={"outline"}>
       Unblock