Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor ProjectMembers component to use API for fetching project members

Browse source
This commit is contained in:
Mattias 2024-03-21 09:36:08 +01:00
parent 01a6f9e61d
commit c415539904
1 changed files with 49 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
frontend/src/Components/ProjectMembers.tsx
View file

@ -1,60 +1,57 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { api } from "../API/API";
import { UserProjectMember } from "../Types/goTypes";
function ProjectMembers(): JSX.Element { function ProjectMembers(): JSX.Element {
const { projectName } = useParams(); const { projectName } = useParams();
const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]); const [projectMembers, setProjectMembers] = useState<UserProjectMember[]>([]);
// const getProjectMembers = async (): Promise<void> => {
// const token = localStorage.getItem("accessToken") ?? "";
// const response = await api.getProjectMembers(projectName ?? "", token);
// console.log(response);
// if (response.success) {
// setProjectMembers(response.data ?? []);
// } else {
// console.error(response.message);
// }
// };
interface ProjectMember {
username: string;
role: string;
}
const mockProjectMembers = [
{
username: "username1",
role: "Project Manager",
},
{
username: "username2",
role: "System Manager",
},
{
username: "username3",
role: "Developer",
},
{
username: "username4",
role: "Tester",
},
{
username: "username5",
role: "Tester",
},
{
username: "username6",
role: "Tester",
},
];
const getProjectMembers = async (): Promise<void> => { const getProjectMembers = async (): Promise<void> => {
// Use the mock data const token = localStorage.getItem("accessToken") ?? "";
setProjectMembers(mockProjectMembers); const response = await api.getAllUsersProject(projectName ?? "", token);
console.log(response);
await Promise.resolve(); if (response.success) {
setProjectMembers(response.data ?? []);
} else {
console.error(response.message);
}
}; };
// const mockProjectMembers = [
// {
// username: "username1",
// role: "Project Manager",
// },
// {
// username: "username2",
// role: "System Manager",
// },
// {
// username: "username3",
// role: "Developer",
// },
// {
// username: "username4",
// role: "Tester",
// },
// {
// username: "username5",
// role: "Tester",
// },
// {
// username: "username6",
// role: "Tester",
// },
// ];
// const getProjectMembers = async (): Promise<void> => {
// // Use the mock data
// setProjectMembers(mockProjectMembers);
// await Promise.resolve();
// };
useEffect(() => { useEffect(() => {
void getProjectMembers(); void getProjectMembers();
}); });
@ -66,21 +63,21 @@ function ProjectMembers(): JSX.Element {
<h1 key={index} className="border-b-2 border-black w-full"> <h1 key={index} className="border-b-2 border-black w-full">
<div className="flex justify-between"> <div className="flex justify-between">
<div className="flex"> <div className="flex">
<h1>{projectMember.username}</h1> <h1>{projectMember.Username}</h1>
<span className="ml-6 mr-2 font-bold">Role:</span> <span className="ml-6 mr-2 font-bold">Role:</span>
<h1>{projectMember.role}</h1> <h1>{projectMember.UserRole}</h1>
</div> </div>
<div className="flex"> <div className="flex">
<div className="ml-auto flex space-x-4"> <div className="ml-auto flex space-x-4">
<Link <Link
to={`/viewReports/${projectName}/${projectMember.username}`} to={`/viewReports/${projectName}/${projectMember.Username}`}
> >
<h1 className="underline cursor-pointer font-bold"> <h1 className="underline cursor-pointer font-bold">
View Reports View Reports
</h1> </h1>
</Link> </Link>
<Link <Link
to={`/changeRole/${projectName}/${projectMember.username}`} to={`/changeRole/${projectName}/${projectMember.Username}`}
> >
<h1 className="underline cursor-pointer font-bold"> <h1 className="underline cursor-pointer font-bold">
Change Role Change Role