From 461a537de1343a2a13d35d1a17193c0d75ea8018 Mon Sep 17 00:00:00 2001
From: hz <zeeshaun@gmail.com>
Date: Tue, 13 May 2025 22:25:43 -0500
Subject: [PATCH] Adding delete to users grid, filtering out logged in user
 from users grid

---
 src/pages/Dashboard.jsx | 161 ++++++++++++++++++++++++++--------------
 src/pages/Login.jsx     |   1 +
 src/pages/Register.jsx  |   1 +
 3 files changed, 107 insertions(+), 56 deletions(-)

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 131d0fc..4251e9a 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -21,15 +21,18 @@ const tdStyle = {
 
 const Dashboard = () => {
   const [role, setRole] = useState("");
+  const [currentUser, setCurrentUser] = useState("");
   const [users, setUsers] = useState([]);
   const [newRoles, setNewRoles] = useState({});
   const [selectedUsers, setSelectedUsers] = useState([]);
 
   useEffect(() => {
-    const currentRole = localStorage.getItem("role");
-    setRole(currentRole);
+    const storedRole = localStorage.getItem("role");
+    const storedUsername = localStorage.getItem("username");
+    setRole(storedRole);
+    setCurrentUser(storedUsername);
 
-    if (currentRole === "SUPER") {
+    if (storedRole === "SUPER") {
       fetchUsers();
     }
   }, []);
@@ -79,6 +82,27 @@ const Dashboard = () => {
     }
   };
 
+  const deleteUser = async (username) => {
+    if (!window.confirm(`Are you sure you want to delete ${username}?`)) return;
+
+    const token = localStorage.getItem("token");
+
+    try {
+      const res = await fetch(`${config.apiBaseUrl}/api/User?username=${encodeURIComponent(username)}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!res.ok) throw new Error("Failed to delete user");
+
+      fetchUsers();
+    } catch (err) {
+      console.error("Error deleting user:", err);
+    }
+  };
+
   const toggleUserSelection = (username) => {
     setSelectedUsers((prev) =>
       prev.includes(username)
@@ -112,70 +136,95 @@ const Dashboard = () => {
                   <th style={thStyle}></th>
                   <th style={thStyle}>Username</th>
                   <th style={thStyle}>Role</th>
-                  {selectedUsers.length > 0 && (
-                    <th style={thStyle}>Action</th>
-                  )}
+                  {selectedUsers.length > 0 && <th style={thStyle}>Action</th>}
                 </tr>
               </thead>
               <tbody>
-                {users.map((user) => {
-                  const isSelected = selectedUsers.includes(user.username);
-                  const currentNewRole =
-                    newRoles[user.username] ?? user.role;
+                {users
+                  .filter((user) => user.username !== currentUser)
+                  .map((user) => {
+                    const isSelected = selectedUsers.includes(user.username);
+                    const currentNewRole = newRoles[user.username] ?? user.role;
 
-                  return (
-                    <tr key={user.username}>
-                      <td style={tdStyle}>
-                        <input
-                          type="checkbox"
-                          checked={isSelected}
-                          onChange={() => toggleUserSelection(user.username)}
-                        />
-                      </td>
-                      <td style={tdStyle}>{user.username}</td>
-                      <td style={tdStyle}>
-                        {isSelected ? (
-                          <select
-                            value={currentNewRole}
-                            onChange={(e) =>
-                              handleRoleChange(user.username, e.target.value)
-                            }
-                            style={{
-                              padding: "0.3rem",
-                              backgroundColor: "#2a2a2a",
-                              color: "#fff",
-                              border: "1px solid #444",
-                            }}
-                          >
-                            <option value="USER">USER</option>
-                            <option value="SUPER">SUPER</option>
-                          </select>
-                        ) : (
-                          user.role
-                        )}
-                      </td>
-                      {selectedUsers.length > 0 && (
+                    return (
+                      <tr key={user.username}>
                         <td style={tdStyle}>
-                          {isSelected && (
-                            <button
-                              onClick={() => updateUserRole(user.username)}
+                          <input
+                            type="checkbox"
+                            checked={isSelected}
+                            onChange={() => toggleUserSelection(user.username)}
+                          />
+                        </td>
+                        <td style={tdStyle}>{user.username}</td>
+                        <td style={tdStyle}>
+                          {isSelected ? (
+                            <select
+                              value={currentNewRole}
+                              onChange={(e) =>
+                                handleRoleChange(
+                                  user.username,
+                                  e.target.value
+                                )
+                              }
                               style={{
-                                padding: "0.4rem 0.8rem",
-                                backgroundColor: "#444",
+                                padding: "0.3rem",
+                                backgroundColor: "#2a2a2a",
                                 color: "#fff",
-                                border: "none",
-                                borderRadius: "4px",
-                                cursor: "pointer",
+                                border: "1px solid #444",
                               }}
                             >
-                              Update
-                            </button>
+                              <option value="USER">USER</option>
+                              <option value="SUPER">SUPER</option>
+                            </select>
+                          ) : (
+                            user.role
                           )}
                         </td>
-                      )}
-                    </tr>
-                  );
-                })}
+                        {selectedUsers.length > 0 && (
+                          <td style={tdStyle}>
+                            {isSelected && (
+                              <div
+                                style={{
+                                  display: "flex",
+                                  gap: "0.5rem",
+                                  justifyContent: "center",
+                                }}
+                              >
+                                <button
+                                  onClick={() =>
+                                    updateUserRole(user.username)
+                                  }
+                                  style={{
+                                    padding: "0.4rem 0.8rem",
+                                    backgroundColor: "#444",
+                                    color: "#fff",
+                                    border: "none",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                  }}
+                                >
+                                  Update
+                                </button>
+                                <button
+                                  onClick={() => deleteUser(user.username)}
+                                  style={{
+                                    padding: "0.4rem 0.8rem",
+                                    backgroundColor: "#aa3333",
+                                    color: "#fff",
+                                    border: "none",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                  }}
+                                >
+                                  Delete
+                                </button>
+                              </div>
+                            )}
+                          </td>
+                        )}
+                      </tr>
+                    );
+                  })}
               </tbody>
             </table>
           </div>
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 7e0e607..b815f4c 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -86,6 +86,7 @@ const Login = () => {
 
       localStorage.setItem("token", data.accessToken);
       localStorage.setItem("role", data.role);
+      localStorage.setItem("username", data.username);
 
       navigate("/dashboard");
     } catch (err) {
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
index 87264ca..211d1c2 100644
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -108,6 +108,7 @@ const Register = () => {
 
       localStorage.setItem("token", loginData.accessToken);
       localStorage.setItem("role", loginData.role);
+      localStorage.setItem("username", data.username);
 
       navigate("/dashboard");
     } catch (err) {