belindas-closet-nextjs_6_365_edit-user-role-buttons-menu (#366)

* Button changes to done and menu closes * Page reloads when user role is changed
SeattleColleges · May 16, 2024 · e032242 · e032242
1 parent 9bdc1ad
commit e032242
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/components/EditUserRoleDialog.tsx b/components/EditUserRoleDialog.tsx
@@ -163,9 +163,11 @@ export function ConfirmationDialogRaw(
  */
 export default function EditUserRoleDialog({
   user,
+  onRoleChange,
 }: {
   user: UserCardProps;
   onClose: () => void;
+  onRoleChange: (newRole: string) => void;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(user.role);
@@ -183,6 +185,7 @@ export default function EditUserRoleDialog({
 
     if (newValue) {
       setValue(newValue);
+      onRoleChange(newValue);
     }
   };
 

diff --git a/components/UserCard.tsx b/components/UserCard.tsx
@@ -13,13 +13,29 @@ export interface UserCardProps {
 
 function UserCard({ user }: { user: UserCardProps }) {
   const [openDialog, setOpenDialog] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [currentRole, setCurrentRole] = useState(user.role);
 
   const handleEditClick = () => {
-    setOpenDialog(true);
+    if (menuOpen) {
+      setMenuOpen(false);
+      setOpenDialog(false);
+      if (currentRole !== user.role) {
+        window.location.reload();
+      }
+    } else {
+      setOpenDialog(true);
+      setMenuOpen(true)
+    }
+  };
+
+  const handleRoleChange = (newRole: string) => {
+    setCurrentRole(newRole);
   };
 
   const handleCloseDialog = () => {
     setOpenDialog(false);
+    setMenuOpen(false);
   };
   return (
     <Container
@@ -55,7 +71,7 @@ function UserCard({ user }: { user: UserCardProps }) {
         </Typography>
         {openDialog && (
           <Box display="flex" justifyContent="center">
-            <EditUserRoleDialog user={user} onClose={handleCloseDialog} />
+            <EditUserRoleDialog user={user} onClose={handleCloseDialog} onRoleChange={handleRoleChange} />
           </Box>
         )}
         <Box p={2} display="flex" justifyContent="center">
@@ -65,7 +81,7 @@ function UserCard({ user }: { user: UserCardProps }) {
             startIcon={<EditIcon />}
             onClick={handleEditClick}
           >
-            Edit
+            {menuOpen ? "Done" : "Edit"}
           </Button>
         </Box>
       </Stack>