From 56112251f25100c1334c5af7da6552a1dba4dfc2 Mon Sep 17 00:00:00 2001
From: Kilian <kilian.boute@gmail.com>
Date: Fri, 21 Jun 2024 11:48:53 +0200
Subject: [PATCH] Add invite sent message

---
 .../dashboard/components/InviteUserDialog.tsx | 69 ++++++++++++-------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/ui/src/app/dashboard/components/InviteUserDialog.tsx b/ui/src/app/dashboard/components/InviteUserDialog.tsx
index 9773bd6..d91024d 100644
--- a/ui/src/app/dashboard/components/InviteUserDialog.tsx
+++ b/ui/src/app/dashboard/components/InviteUserDialog.tsx
@@ -8,14 +8,18 @@ import { useAppSelector } from "@/lib/hooks";
 import { RootState } from "@/lib/store";
 
 const InviteUserDialog: React.FC = () => {
-  const [addUser, { error, isLoading }] = useAddUserMutation();
+  const [addUser, { isLoading }] = useAddUserMutation();
   const isVisible = useAppSelector(
     (store: RootState) => store.dialog.isVisible
   );
   const [email, setEmail] = useState("");
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
-  async function handleClose() {
+  function handleClose() {
+    setEmail("");
+    setIsSubmitted(false);
+    setSubmitError(null);
     console.log("Dialog has closed");
   }
 
@@ -25,10 +29,12 @@ const InviteUserDialog: React.FC = () => {
 
     try {
       await addUser({ email }).unwrap();
+      setIsSubmitted(true);
       console.log("Inviting user with email", email);
     } catch (err) {
-      if ("data" in err) {
-        setSubmitError(err.data.error || "Failed to add user");
+      if (err && typeof err === "object" && "data" in err) {
+        const errorData = (err as { data?: { error?: string } }).data;
+        setSubmitError(errorData?.error || "Failed to add user");
       } else {
         setSubmitError("An unexpected error occurred");
       }
@@ -37,29 +43,40 @@ const InviteUserDialog: React.FC = () => {
 
   return isVisible ? (
     <Dialog title="Invite User" onClose={handleClose}>
-      <form onSubmit={handleSubmit}>
-        <Text as="label" htmlFor="email">
-          New user email
-        </Text>
-        <Input
-          className="mb-4"
-          type="email"
-          id="email"
-          name="email"
-          placeholder="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        {submitError && (
-          <Text as="p" variant="error" className="text-red-700">
-            {submitError}
+      {isSubmitted ? (
+        <>
+          <Text as="p" className="mb-4">
+            User has been invited.
+          </Text>
+          <Button onClick={handleClose}>Close</Button>
+        </>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <Text as="label" htmlFor="email">
+            New user email
           </Text>
-        )}
-        <Button type="submit" disabled={isLoading}>
-          {isLoading ? "Inviting..." : "Invite"}
-        </Button>
-      </form>
+          <Input
+            className="mb-4"
+            type="email"
+            id="email"
+            name="email"
+            placeholder="email"
+            value={email}
+            onChange={(e: { target: { value: string } }) =>
+              setEmail(e.target.value)
+            }
+            required
+          />
+          {submitError && (
+            <Text as="p" variant="error" className="text-red-700">
+              {submitError}
+            </Text>
+          )}
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? "Inviting..." : "Invite"}
+          </Button>
+        </form>
+      )}
     </Dialog>
   ) : null;
 };