From 04d1d9ee558452d39556fc401de4911596af519b Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 22 Jul 2024 18:18:30 -0400 Subject: [PATCH 1/3] Fetch users from db --- .../TabPanels/Account/TeamPanel.jsx | 351 +++++------------- 1 file changed, 86 insertions(+), 265 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index cc717485a..59ed4fb88 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -9,17 +9,12 @@ import { Modal, Select, Stack, - Table, - TableBody, - TableCell, - TableHead, - TableRow, TextField, Typography, } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; import Button from "../../Button"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import EditSvg from "../../../assets/icons/edit.svg?react"; import Field from "../../Inputs/Field"; import { credentials } from "../../../Validation/validation"; @@ -27,6 +22,7 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import axiosInstance from "../../../Utils/axiosConfig"; import { createToast } from "../../../Utils/toastUtils"; import { useSelector } from "react-redux"; +import BasicTable from "../../BasicTable"; /** * TeamPanel component manages the organization and team members, @@ -36,138 +32,97 @@ import { useSelector } from "react-redux"; * @returns {JSX.Element} */ -const teamColumns = [ - { - id: "checkbox", - label: "", - sx: { minWidth: "20px", width: "40px" }, - }, - { - id: "name", - label: "NAME", - sx: { fontSize: "12px" }, - }, - { id: "email", label: "EMAIL", sx: { fontSize: "12px" } }, - { id: "role", label: "ROLE", sx: { fontSize: "12px" } }, -]; -//for testing, will be removed later -const teamConfig = [ - { - id: 0, - isChecked: false, - name: "John Connor", - email: "john@domain.com", - type: "admin", - role: "Administrator", - createdAt: "10/4/2022", - }, - { - id: 1, - isChecked: false, - name: "Adam McFadden", - email: "adam@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, - { - id: 2, - isChecked: false, - name: "Cris Cross", - email: "cris@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, - { - id: 3, - isChecked: false, - name: "Prince", - email: "prince@domain.com", - type: "member", - role: "Member", - createdAt: "10/4/2022", - }, -]; -const actionsConfig = [ - { - value: "bulk", - label: "Bulk actions", - }, -]; -const roleConfig = [ - { - value: "role", - label: "Change role to", - }, -]; - const TeamPanel = () => { const theme = useTheme(); - //TODO - use redux loading state - //!! - currently all loading buttons are tied to the same state - const [isLoading, setIsLoading] = useState(false); - //TODO - connect to redux + + const { authToken } = useSelector((state) => state.auth); + //TODO const [orgStates, setOrgStates] = useState({ name: "Bluewave Labs", - isLoading: false, isEdit: false, }); + const [toInvite, setToInvite] = useState({ + email: "", + role: "", + }); + const [teamStates, setTeamStates] = useState({}); + const [tableData, setTableData] = useState({}); + const [errors, setErrors] = useState({}); + useEffect(() => { + const fetchTeam = async () => { + try { + const response = await axiosInstance.get("/auth/users", { + headers: { Authorization: `Bearer ${authToken}` }, + }); + setTeamStates({ members: response.data.data, filters: "" }); + + const data = { + cols: [ + { id: 1, name: "NAME" }, + { id: 2, name: "EMAIL" }, + { id: 3, name: "ROLE" }, + ], + rows: response.data.data.map((member, idx) => { + return { + id: member._id, + data: [ + { id: idx, data: member.firstName + " " + member.lastName }, + { id: idx + 1, data: member.email }, + { + id: idx + 2, + data: member.role[0] === "admin" ? "Administrator" : "Member", + }, + ], + }; + }), + }; + + setTableData(data); + } catch (error) { + createToast({ + body: error.message || "Error fetching team members.", + }); + } + }; + + fetchTeam(); + }, []); + + // RENAME ORGANIZATION const toggleEdit = () => { setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit })); }; const handleRename = () => {}; - const [teamStates, setTeamStates] = useState({ - members: teamConfig, - filter: "", - }); - const handleCheckCell = (id) => { - const updatedTeamStates = [...teamStates.members]; - updatedTeamStates[id] = { - ...updatedTeamStates[id], - isChecked: !updatedTeamStates[id].isChecked, - }; - setTeamStates((prev) => ({ - ...prev, - members: updatedTeamStates, - })); - }; - const handleFilter = (filter) => { - setTeamStates((prev) => ({ - ...prev, - filter: filter, - })); - }; - //TODO - implement select action function - const handleSelectActionType = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); - }; - //TODO - implement select role function - const handleSelectRoleType = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); - }; - //TODO - implement save team function - const handleSaveTeam = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); + // TABLE ACTIONS + const handleMembersQuery = (type) => { + let count = 0; + tableData.rows?.forEach((member) => { + type === "" ? count++ : member.data[2].data === type ? count++ : ""; + }); + return count; }; - const { authToken } = useSelector((state) => state.auth); - const [toInvite, setToInvite] = useState({ - email: "", - role: "", - }); - const [errors, setErrors] = useState({}); + // const handleCheckCell = (id) => { + // const updatedTeamStates = [...teamStates.members]; + // updatedTeamStates[id] = { + // ...updatedTeamStates[id], + // isChecked: !updatedTeamStates[id].isChecked, + // }; + // setTeamStates((prev) => ({ + // ...prev, + // members: updatedTeamStates, + // })); + // }; + // const handleFilter = (filter) => { + // setTeamStates((prev) => ({ + // ...prev, + // filter: filter, + // })); + // }; + //TODO - implement save team function + const handleSaveTeam = () => {}; const handleChange = (event) => { const { value } = event.target; @@ -192,6 +147,8 @@ const TeamPanel = () => { return updatedErrors; }); }; + + // INVITE MEMBER const [isOpen, setIsOpen] = useState(false); const handleInviteMember = async () => { if (toInvite.role !== "user" || toInvite !== "admin") @@ -233,13 +190,6 @@ const TeamPanel = () => { setErrors({}); }; - const handleMembersQuery = (type) => { - let count = 0; - teamStates.members.forEach((member) => { - type === "" ? count++ : member.type === type ? count++ : ""; - }); - return count; - }; return (
@@ -315,13 +265,13 @@ const TeamPanel = () => { handleFilter("admin")}> Administrator - {handleMembersQuery("admin")} + {handleMembersQuery("Administrator")} handleFilter("member")}> Member - {handleMembersQuery("member")} + {handleMembersQuery("Member")} @@ -332,136 +282,7 @@ const TeamPanel = () => { onClick={() => setIsOpen(true)} /> -
- - - - - - - - - - - - - - - {teamColumns.map((cell) => ( - - {cell.label} - - ))} - - - - {teamStates.members.map((cell) => - teamStates.filter === "" || - teamStates.filter === cell.type ? ( - - - handleCheckCell(cell.id)} - inputProps={{ "aria-label": "controlled" }} - /> - - - - - {cell.name} - - Created at {cell.createdAt} - - - {cell.email} - {cell.role} - - ) : ( - "" - ) - )} - -
- -
+