update bugs

frontend_admin/src/utils/useUsers.ts

@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import Cookies from "js-cookie";
+import { myToast } from "./frontendService";
 
 export interface User {
   id: number;
@@ -11,20 +13,141 @@ export interface User {
   role: string;
 }
 
-export function useUsers(): User[] {
+export type UserReturn = {
+  users: User[];
+  refresh: () => void;
+  setUsers: Dispatch<SetStateAction<User[]>>;
+  deleteUser: (id: number) => void;
+  updateUser: (id: number) => void;
+};
+
+export function useUsers(): UserReturn {
   const [users, setUsers] = useState<User[]>([]);
 
-  useEffect(() => {
-    const data = localStorage.getItem("users");
-    if (data) {
-      try {
-        const parsed = JSON.parse(data);
-        setUsers(parsed.result || []);
-      } catch {
-        setUsers([]);
-      }
-    }
-  }, []);
+  const token = Cookies.get("token");
 
-  return users;
+  const headers = {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch("http://localhost:5002/api/getAllUsers", {
+        method: "GET",
+        headers: headers,
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data.result);
+        myToast("Users fetched successfully", "success");
+      } else {
+        console.error("Failed to fetch users");
+      }
+    } catch (error) {
+      console.error("Error fetching users:", error);
+    }
+  }
+
+  const deleteUser = (id: number) => {
+    fetch("http://localhost:5002/api/deleteUser", {
+      method: "POST",
+      body: JSON.stringify({ id: id }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+    })
+      .then((response) => {
+        if (response.ok) {
+          setUsers((prevUsers) => prevUsers.filter((user) => user.id !== id));
+          myToast("User deleted successfully", "success");
+        } else {
+          alert("Failed to delete user");
+        }
+      })
+      .catch((error) => {
+        console.log("Error deleting user: ", error);
+      });
+  };
+
+  const updateUserFunc = async (userID: number) => {
+    console.log("UpdateFunc" + userID);
+
+    // Validate that required DOM elements exist
+    const usernameEl = document.getElementById(
+      `username-${userID}`
+    ) as HTMLInputElement;
+    const firstNameEl = document.getElementById(
+      `first_name-${userID}`
+    ) as HTMLInputElement;
+    const lastNameEl = document.getElementById(
+      `last_name-${userID}`
+    ) as HTMLInputElement;
+    const emailEl = document.getElementById(
+      `email-${userID}`
+    ) as HTMLInputElement;
+    const passwordEl = document.getElementById(
+      `password-${userID}`
+    ) as HTMLInputElement;
+
+    if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
+      console.error("Required form elements not found");
+      alert("Form elements not found");
+      return;
+    }
+
+    const userData = {
+      id: userID,
+      username: usernameEl.value,
+      first_name: firstNameEl.value,
+      last_name: lastNameEl.value,
+      email: emailEl.value,
+      password: passwordEl?.value || "", // password might be optional
+    };
+
+    console.log("Sending user data:", userData);
+
+    try {
+      const response = await fetch("http://localhost:5002/api/updateUser", {
+        method: "POST",
+        body: JSON.stringify(userData),
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+      });
+
+      console.log("Response status:", response.status);
+      console.log("Response ok:", response.ok);
+
+      if (response.ok) {
+        console.log("User updated successfully");
+        setUsers((prevUsers) =>
+          prevUsers.map((user) =>
+            user.id === userID ? { ...user, ...userData } : user
+          )
+        );
+
+        myToast("User updated successfully", "success");
+      } else {
+        const errorText = await response.text();
+        console.error("Server error:", response.status, errorText);
+        alert(`Failed to update user: ${response.status} - ${errorText}`);
+      }
+    } catch (error) {
+      console.error("Network error updating user:", error);
+      alert("Network error occurred while updating user");
+    }
+  };
+
+
+
+  return {
+    users: users,
+    setUsers: setUsers,
+    refresh: () => fetchUsers(),
+    deleteUser: (id: number) => deleteUser(id),
+    updateUser: (id: number) => updateUserFunc(id),
+  }
 }