63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { api } from "../API/API";
|
|
import { UserProjectMember } from "../Types/goTypes";
|
|
|
|
function ProjectMembers(): JSX.Element {
|
|
const { projectName } = useParams();
|
|
const [projectMembers, setProjectMembers] = useState<UserProjectMember[]>([]);
|
|
|
|
useEffect(() => {
|
|
const getProjectMembers = async (): Promise<void> => {
|
|
const token = localStorage.getItem("accessToken") ?? "";
|
|
const response = await api.getAllUsersProject(projectName ?? "", token);
|
|
console.log(response);
|
|
if (response.success) {
|
|
setProjectMembers(response.data ?? []);
|
|
} else {
|
|
console.error(response.message);
|
|
}
|
|
};
|
|
|
|
void getProjectMembers();
|
|
}, [projectName]);
|
|
|
|
interface ProjectMember {
|
|
Username: string;
|
|
UserRole: string;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-[30px] mb-[20px]">
|
|
All Members In: {projectName}{" "}
|
|
</h1>
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
|
|
{projectMembers.map((projectMember: ProjectMember, index: number) => (
|
|
<h1 key={index} className="border-b-2 border-black w-full">
|
|
<div className="flex justify-between">
|
|
<div className="flex">
|
|
<h1>{projectMember.Username}</h1>
|
|
<span className="ml-6 mr-2 font-bold">Role:</span>
|
|
<h1>{projectMember.UserRole}</h1>
|
|
</div>
|
|
<div className="flex">
|
|
<div className="ml-auto flex space-x-4">
|
|
<Link
|
|
to={`/otherUsersTimeReports/${projectName}/${projectMember.Username}`}
|
|
>
|
|
<h1 className="underline cursor-pointer font-bold">
|
|
View Reports
|
|
</h1>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h1>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ProjectMembers;
|