From 2584984e081ef32aca8766e026e26c828a160275 Mon Sep 17 00:00:00 2001
From: Bennett Fife <bennett.fife@gmail.com>
Date: Sun, 1 Dec 2024 19:46:07 -0800
Subject: [PATCH] initial changes to 'Edit Users' page

---
 app/edit-user-role-page/page.tsx  | 152 +++++++++++++++++++++++++-----
 components/EditUserRoleDialog.tsx |  92 ++++++------------
 components/UserCard.tsx           | 146 ++++++++++++++--------------
 3 files changed, 229 insertions(+), 161 deletions(-)

diff --git a/app/edit-user-role-page/page.tsx b/app/edit-user-role-page/page.tsx
index 48fe50bd..3f11c52a 100644
--- a/app/edit-user-role-page/page.tsx
+++ b/app/edit-user-role-page/page.tsx
@@ -1,9 +1,24 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import UserCard from "../../components/UserCard";
-import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  Snackbar,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
 import useAuth from "@/hooks/useAuth";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
+import EditUserRoleDialog from "@/components/EditUserRoleDialog";
 
 /**
  * Represents a user.
@@ -15,8 +30,9 @@ interface User {
   email: string;
   role: string;
 }
+
 /**
- * fetch user info from the server
+ * Fetch user info from the server
  * @param setUserInfo
  */
 async function fetchUser(setUserInfo: (userInfo: User[]) => void) {
@@ -35,7 +51,6 @@ async function fetchUser(setUserInfo: (userInfo: User[]) => void) {
     } else {
       const data = await res.json();
       setUserInfo(data);
-      console.log(data);
     }
   } catch (error) {
     console.error("Error getting user info:", error);
@@ -47,35 +62,122 @@ async function fetchUser(setUserInfo: (userInfo: User[]) => void) {
  * @returns
  */
 const EditUserRolePage = () => {
-  const [userInfo, setUserInfo] = useState<User[]>([]);
+  const [userInfo, setUserInfo] = useState<User[]>([]); // All users
+  const [newRole, setNewRole] = useState<string>(""); // User role we're editing
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null); // Selected user ID
+  const [snackbarMessage, setSnackbarMessage] = useState<string | null>(null); // Snackbar message for feedback
+  const [snackbarOpen, setSnackbarOpen] = useState(false); // Snackbar open state
+
+  const { isAuth, user } = useAuth();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
     fetchUser(setUserInfo);
   }, []);
 
-  const { isAuth, user } = useAuth();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  // Function to accept the new role and update via API
+  const acceptNewRole = async (userId: string, role: string) => {
+    const token = localStorage.getItem("token");
+    try {
+      const apiUrl = process.env.NSC_EVENTS_PUBLIC_API_URL;
+      const response = await fetch(`${apiUrl}/users/update/${userId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ role }),
+      });
+      if (response.ok) {
+        setSnackbarMessage("User role updated successfully!");
+      } else {
+        setSnackbarMessage("Error updating user role!");
+      }
+    } catch (error) {
+      setSnackbarMessage("Error updating user role!");
+    }
+    setSnackbarOpen(true);
+  };
+
+  // Close dialog and update role in parent component
+  const handleCloseDialog = (role?: string, success?: boolean, userId?: string) => {
+    if (success && role && userId) {
+      setNewRole(role);
+      acceptNewRole(userId, role);
+      setUserInfo((prevUserInfo) =>
+        prevUserInfo.map(
+          (user) => (user.id === userId ? { ...user, role } : user) // Update the role of the modified user
+        )
+      );
+    }
+  };
 
-  if (isAuth && (user?.role === 'admin')) {
+  if (isAuth && user?.role === "admin") {
     return (
-      <Box sx={{ display: "flex", justifyContent: "center" }}>
-        <Stack alignItems="center">
-          <Typography
-              fontSize={isMobile ? "1.75rem" : "2.25rem"}
-              textAlign={"center"}
-              marginTop={"2rem"}
-          >User Management
-          </Typography>
-          {userInfo.map((user, index) => (
-            <UserCard user={user} key={index} />
-          ))}
-        </Stack>
-      </Box>
+      <div>
+        <Typography
+          fontSize={isMobile ? "1.75rem" : "2.25rem"}
+          textAlign={"center"}
+          margin={"1.5rem"}
+        >
+          User Management
+        </Typography>
+
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center", // Centers horizontally
+            alignItems: "center", // Centers vertically if needed
+            width: "100%", // Ensures the Box takes up the full width
+            maxWidth: "90%", // Ensures the table doesn't stretch beyond 90% of the container
+            margin: "0 auto", // Centers the Box within the parent container
+          }}
+        >
+          <TableContainer component={Paper}>
+            <Table sx={{ minWidth: 650 }} aria-label="simple table">
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 700 }}>Name</TableCell>
+                  <TableCell sx={{ fontWeight: 700 }} align="left">
+                    E-Mail
+                  </TableCell>
+                  <TableCell sx={{ fontWeight: 700 }} align="left">
+                    Role
+                  </TableCell>
+                  <TableCell sx={{ fontWeight: 700 }}>Edit</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {userInfo.map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell component="th" scope="row">
+                      {user.firstName + " " + user.lastName}
+                    </TableCell>
+                    <TableCell align="left">{user.email}</TableCell>
+                    <TableCell align="left">{user.role.toUpperCase()}</TableCell>
+                    <TableCell>
+                      <EditUserRoleDialog user={user} onClose={handleCloseDialog} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>
+
+        {/* Snackbar for feedback */}
+        <Snackbar
+          open={snackbarOpen}
+          autoHideDuration={6000}
+          onClose={() => setSnackbarOpen(false)}
+          message={snackbarMessage}
+        />
+      </div>
     );
- } else {
-  return <UnauthorizedPageMessage/>
+  } else {
+    return <UnauthorizedPageMessage />;
   }
 };
 
-export default EditUserRolePage;
\ No newline at end of file
+export default EditUserRolePage;
diff --git a/components/EditUserRoleDialog.tsx b/components/EditUserRoleDialog.tsx
index a3d6330f..dac03a7d 100644
--- a/components/EditUserRoleDialog.tsx
+++ b/components/EditUserRoleDialog.tsx
@@ -1,8 +1,5 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import List from "@mui/material/List";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
@@ -11,6 +8,8 @@ import RadioGroup from "@mui/material/RadioGroup";
 import Radio from "@mui/material/Radio";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import React, { useEffect, useRef, useState } from "react";
+import { IconButton } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
 
 const options = ["admin", "creator", "user"];
 
@@ -19,7 +18,7 @@ interface ConfirmationDialogRawProps {
   keepMounted: boolean;
   value: string;
   open: boolean;
-  onClose: (value?: string, success?: boolean) => void;
+  onClose: (value?: string, success?: boolean, userId?: string) => void;
 }
 
 export function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
@@ -35,11 +34,15 @@ export function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
     }
   }, [valueProp, open]);
 
-  const handleEntering = () => {
-    if (radioGroupRef.current != null) {
-      radioGroupRef.current.focus();
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = (event.target as HTMLInputElement).value;
+    setValue(newValue);
+    if (newValue !== valueProp) {
+      setRoleUpdated(true);
+    } else {
+      setRoleUpdated(false);
     }
-  }; 
+  };
 
   const handleCancel = () => {
     onClose();
@@ -53,25 +56,10 @@ export function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
     }
   };
 
-  // const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   setValue((event.target as HTMLInputElement).value);
-  // };
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = (event.target as HTMLInputElement).value;
-    setValue(newValue);
-    if (newValue !== valueProp) {
-      setRoleUpdated(true);
-    } else {
-      setRoleUpdated(false);
-    }
-  };
-
   return (
     <Dialog
       sx={{ "& .MuiDialog-paper": { width: "50%", maxHeight: 435 } }}
       maxWidth="xs"
-      TransitionProps={{ onEntering: handleEntering }}
       open={open}
       {...other}
     >
@@ -85,12 +73,7 @@ export function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
           onChange={handleChange}
         >
           {options.map((option) => (
-            <FormControlLabel
-              value={option}
-              key={option}
-              control={<Radio />}
-              label={option}
-            />
+            <FormControlLabel value={option} key={option} control={<Radio />} label={option} />
           ))}
         </RadioGroup>
       </DialogContent>
@@ -98,7 +81,9 @@ export function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
         <Button autoFocus onClick={handleCancel}>
           Cancel
         </Button>
-        <Button onClick={handleOk} disabled={!roleUpdated}>Ok</Button>
+        <Button onClick={handleOk} disabled={!roleUpdated}>
+          Ok
+        </Button>
       </DialogActions>
     </Dialog>
   );
@@ -109,49 +94,32 @@ export default function EditUserRoleDialog({
   onClose,
 }: {
   user: { id: string; role: string };
-  onClose: (newRole?: string, success?: boolean) => void;
+  onClose: (newRole?: string, success?: boolean, userId?: string) => void;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(user.role);
 
-  const handleClickListItem = () => {
+  const handleClickIcon = () => {
     setOpen(true);
   };
 
   const handleClose = (newValue?: string, success?: boolean) => {
     setOpen(false);
-    onClose(newValue, success);
+    onClose(newValue, success, user.id);
   };
 
   return (
-    <Box
-      sx={{
-        width: "100%",
-        maxWidth: 800,
-        bgcolor: "#fff",
-        color: "#000",
-        boxShadow: 1,
-        borderRadius: "8px"
-      }}
-    >
-      <List component="div" role="group">
-        <ListItemButton
-          divider
-          aria-haspopup="true"
-          aria-controls="role-menu"
-          aria-label="User role"
-          onClick={handleClickListItem}
-        >
-          <ListItemText primary="Select User Role" secondary={value} secondaryTypographyProps={{ sx: { color: "#333" } }}/>
-        </ListItemButton>
-        <ConfirmationDialogRaw 
-          id="role-menu" 
-          keepMounted 
-          open={open} 
-          onClose={handleClose} 
-          value={value} 
-        />
-      </List>
-    </Box>
+    <>
+      <IconButton onClick={handleClickIcon}>
+        <EditIcon />
+      </IconButton>
+      <ConfirmationDialogRaw
+        id="role-menu"
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        value={value}
+      />
+    </>
   );
 }
diff --git a/components/UserCard.tsx b/components/UserCard.tsx
index e4018e66..84c89e82 100644
--- a/components/UserCard.tsx
+++ b/components/UserCard.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Box, Button, Container, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import CheckIcon from '@mui/icons-material/Check';
+import CheckIcon from "@mui/icons-material/Check";
 import EditUserRoleDialog from "./EditUserRoleDialog";
-import Snackbar from '@mui/material/Snackbar';
-import Alert, { AlertColor } from '@mui/material/Alert';
+import Snackbar from "@mui/material/Snackbar";
+import Alert, { AlertColor } from "@mui/material/Alert";
 
 export interface UserCardProps {
   id: string;
@@ -18,11 +18,11 @@ function UserCard({ user }: { user: UserCardProps }) {
   const [openDialog, setOpenDialog] = useState(false);
   const [editCompleted, setEditCompleted] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('success');
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>("success");
   const [newRole, setNewRole] = useState(user.role);
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const handleEditClick = async () => {
     if (editCompleted) {
@@ -34,31 +34,31 @@ function UserCard({ user }: { user: UserCardProps }) {
     }
 
     if (editCompleted) {
-      const token = localStorage.getItem('token');
+      const token = localStorage.getItem("token");
       try {
         const apiUrl = process.env.NSC_EVENTS_PUBLIC_API_URL;
         const response = await fetch(`${apiUrl}/users/update/${user.id}`, {
-          method: 'PATCH',
+          method: "PATCH",
           headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify({ role: newRole })
+          body: JSON.stringify({ role: newRole }),
         });
         if (response.ok) {
-          setSnackbarSeverity('success');
-          setSnackbarMessage('User role updated successfully!');
+          setSnackbarSeverity("success");
+          setSnackbarMessage("User role updated successfully!");
           setSnackbarOpen(true);
         } else {
-          console.error('Failed to update user role:', response.statusText);
-          setSnackbarSeverity('error');
-          setSnackbarMessage('Failed to update user role');
+          console.error("Failed to update user role:", response.statusText);
+          setSnackbarSeverity("error");
+          setSnackbarMessage("Failed to update user role");
           setSnackbarOpen(true);
         }
       } catch (error) {
-        console.error('Error updating user role:', error);
-        setSnackbarSeverity('error');
-        setSnackbarMessage('Error updating user role');
+        console.error("Error updating user role:", error);
+        setSnackbarSeverity("error");
+        setSnackbarMessage("Error updating user role");
         setSnackbarOpen(true);
       }
     }
@@ -76,7 +76,6 @@ function UserCard({ user }: { user: UserCardProps }) {
     if (editCompleted) {
       setOpenDialog(false);
       setEditCompleted(false);
-
     } else {
       setOpenDialog(false);
     }
@@ -92,76 +91,75 @@ function UserCard({ user }: { user: UserCardProps }) {
         alignItems: "center",
         borderRadius: "10px",
         border: "1px solid #ccc",
-        padding: "20px",
-        margin: "20px",
+        padding: "7px",
+        margin: "3px",
         width: isMobile ? "75%" : "auto",
       }}
     >
-      <Stack
-        direction="column"
-        spacing={2}
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box sx={{ textAlign: "center" }}>
-          <Typography variant="body1" gutterBottom sx={{ mb: isMobile ? 1 : 2 }}>
-            User ID: {user.id}
+      <Stack direction="row" spacing={4} alignItems="center" justifyContent="center">
+        <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+          <Typography variant="body1" sx={{ mr: 2 }}>
+            {user.firstName} {user.lastName}
           </Typography>
-          <Typography variant="body1" gutterBottom sx={{ mb: isMobile ? 1 : 2 }}>
-            Full Name: {user.firstName} {user.lastName}
+          <Typography variant="body1" sx={{ mr: 2 }}>
+            {user.email}
           </Typography>
-          <Typography variant="body1" gutterBottom sx={{ mb: isMobile ? 1 : 2 }}>
-            Email: {user.email}
-          </Typography>
-          <Typography variant="body1" gutterBottom>
-            Current Role: {user.role}
+          <Typography variant="body1" sx={{ mr: 2 }}>
+            {user.role}
           </Typography>
           {editCompleted && (
-          <Typography variant="body1" gutterBottom>
-            Selected Role: {newRole}
-          </Typography>
+            <Typography variant="body1" sx={{ mr: 2 }}>
+              {newRole}
+            </Typography>
           )}
         </Box>
+
         {openDialog && (
           <Box display="flex" justifyContent="center">
             <EditUserRoleDialog user={user} onClose={handleCloseDialog} />
           </Box>
         )}
-        <Box p={2} display="flex" justifyContent="center">
-        {!openDialog && (
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={editCompleted ? "" : <EditIcon />}
-            onClick={editCompleted ? handleCancel : handleEditClick}
-          >
-          {editCompleted ? "Cancel" : "Edit"}
-          </Button>
-        )}
-        {openDialog && (
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleCancel}
-          >
-          Cancel
-          </Button>
-        )}
-        {editCompleted && (
-          <Button
-            variant="contained"
-            color="primary"
-            sx={{ ml: 2 }}
-            endIcon={<CheckIcon />}
-            onClick={handleEditClick}
-          >
-            Done
-          </Button>
-        )}
+
+        <Box p={1} display="flex" justifyContent="center">
+          {!openDialog && (
+            <Button
+              variant="contained"
+              color="primary"
+              endIcon={editCompleted ? "" : <EditIcon />}
+              onClick={editCompleted ? handleCancel : handleEditClick}
+            >
+              {editCompleted ? "Cancel" : "Edit"}
+            </Button>
+          )}
+          {openDialog && (
+            <Button variant="contained" color="primary" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+          {editCompleted && (
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{ ml: 2 }}
+              endIcon={<CheckIcon />}
+              onClick={handleEditClick}
+            >
+              Done
+            </Button>
+          )}
         </Box>
       </Stack>
-      <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={() => setSnackbarOpen(false)} anchorOrigin={{ vertical: "bottom", horizontal: "center" }}>
-        <Alert onClose={() => setSnackbarOpen(false)} severity={snackbarSeverity} sx={{ width: '100%' }}>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => setSnackbarOpen(false)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        <Alert
+          onClose={() => setSnackbarOpen(false)}
+          severity={snackbarSeverity}
+          sx={{ width: "100%" }}
+        >
           {snackbarMessage}
         </Alert>
       </Snackbar>