Ax/scrum 131 Fix Text Highlight Bug for Edit Username Flow (#133)

Co-authored-by: Austin-X <[email protected]>

Author: Austin-X

course-matrix/frontend/src/components/UserMenu.tsx

@@ -59,7 +59,11 @@ import { useEffect, useState, useRef } from "react";
  * @returns {JSX.Element} The rendered user menu dropdown with account options.
  */
 
-export function UserMenu() {
+interface UserMenuProps {
+  setOpen: (open: boolean) => void;
+}
+
+export function UserMenu({ setOpen }: UserMenuProps) {
   const dispatch = useDispatch();
   const [logout] = useLogoutMutation();
   const navigate = useNavigate();
@@ -100,24 +104,6 @@ export function UserMenu() {
     }
   };
 
-  const handleUsernameUpdate = async () => {
-    try {
-      const username = usernameRef?.current?.value;
-      if (!username || !username.trim()) {
-        return;
-      }
-      user_metadata.user.user_metadata.username =
-        usernameRef.current?.value.trimEnd();
-      localStorage.setItem("userInfo", JSON.stringify(user_metadata));
-      await usernameUpdate({
-        userId: userId,
-        username: user_metadata.user.user_metadata.username,
-      });
-    } catch (err) {
-      console.error("Update username failed: ", err);
-    }
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -138,41 +124,10 @@ export function UserMenu() {
             {user_metadata?.user?.user_metadata?.email}
           </p>
         </div>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-          <Dialog>
-            <DialogTrigger asChild>
-              <button className="w-full text-left">Edit Account</button>
-            </DialogTrigger>
-            <DialogContent className="gap-5">
-              <DialogHeader>
-                <DialogTitle>Edit Account</DialogTitle>
-                <DialogDescription>
-                  Edit your account details.
-                </DialogDescription>
-              </DialogHeader>
-              <Label htmlFor="username">New User Name</Label>
-              {/* Disable this email input box for now until we have the backend for accounts set up */}
-              <Input
-                id="username"
-                type="text"
-                placeholder={user_metadata.user.user_metadata.username}
-                ref={usernameRef}
-                onKeyDown={(e) => {
-                  if (e.key === " ") {
-                    e.stopPropagation(); // Allows space input
-                  }
-                }}
-              />
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button variant="secondary">Cancel</Button>
-                </DialogClose>
-                <DialogClose asChild>
-                  <Button onClick={handleUsernameUpdate}>Save</Button>
-                </DialogClose>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+        <DropdownMenuItem>
+          <button className="w-full text-left" onClick={() => setOpen(true)}>
+            Edit Account
+          </button>
         </DropdownMenuItem>
         <DropdownMenuItem>
           <button className="w-full text-left" onClick={handleLogout}>

course-matrix/frontend/src/pages/Dashboard/Dashboard.tsx

@@ -20,6 +20,8 @@ import AssistantPage from "../Assistant/AssistantPage";
 import { RuntimeProvider } from "../Assistant/runtime-provider";
 import Home from "../Home/Home";
 import { CompareTimetables } from "../Compare/CompareTimetables";
+import EditAccountDialog from "./EditAccountDialog";
+import { useState } from "react";
 
 /**
  * Dashboard Component
@@ -38,6 +40,7 @@ import { CompareTimetables } from "../Compare/CompareTimetables";
  */
 const Dashboard = () => {
   const location = useLocation();
+  const [openEditAccountDialog, setOpenEditAccountDialog] = useState(false);
 
   return (
     <>
@@ -79,7 +82,13 @@ const Dashboard = () => {
                       </BreadcrumbList>
                     </Breadcrumb>
                   </div>
-                  <UserMenu />
+                  <div>
+                    <UserMenu setOpen={setOpenEditAccountDialog} />
+                    <EditAccountDialog
+                      open={openEditAccountDialog}
+                      setOpen={setOpenEditAccountDialog}
+                    />
+                  </div>
                 </header>
                 <div>
                   <Routes>

course-matrix/frontend/src/pages/Dashboard/EditAccountDialog.tsx

@@ -0,0 +1,73 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useUpdateUsernameMutation } from "@/api/authApiSlice";
+import { useRef } from "react";
+
+interface EditAccountDialogProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const EditAccountDialog = ({ open, setOpen }: EditAccountDialogProps) => {
+  const [updateUsername] = useUpdateUsernameMutation();
+
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const user_metadata = JSON.parse(localStorage.getItem("userInfo") ?? "{}"); //User Data
+  const userId = user_metadata.user.id;
+
+  const handleUsernameUpdate = async () => {
+    try {
+      const username = usernameRef?.current?.value;
+      if (!username || !username.trim()) {
+        return;
+      }
+      user_metadata.user.user_metadata.username =
+        usernameRef.current?.value.trimEnd();
+      localStorage.setItem("userInfo", JSON.stringify(user_metadata));
+      await updateUsername({
+        userId: userId,
+        username: user_metadata.user.user_metadata.username,
+      });
+    } catch (err) {
+      console.error("Update username failed: ", err);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="gap-5">
+        <DialogHeader>
+          <DialogTitle>Edit Account</DialogTitle>
+          <DialogDescription>Edit your account details.</DialogDescription>
+        </DialogHeader>
+        <Label htmlFor="username">New User Name</Label>
+        <Input
+          id="username"
+          type="text"
+          placeholder={user_metadata.user.user_metadata.username}
+          ref={usernameRef}
+        />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={handleUsernameUpdate}>Save</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditAccountDialog;