[frontend] Fixed toast to be placed inside useEffect (#300)

usatie · Mar 5, 2024 · 6737e8c · 6737e8c
1 parent 9d94503
commit 6737e8c
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 95 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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