129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
|
|
interface UnsignedReports {
|
|
projectName: string;
|
|
username: string;
|
|
week: number;
|
|
signed: boolean;
|
|
}
|
|
|
|
/**
|
|
* Renders a component that displays the projects a user is a part of and links to the projects start-page.
|
|
* @returns The JSX element representing the component.
|
|
*/
|
|
function DisplayUserProject(): JSX.Element {
|
|
const { projectName } = useParams();
|
|
const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]);
|
|
//const navigate = useNavigate();
|
|
|
|
// const getUnsignedReports = async (): Promise<void> => {
|
|
// const token = localStorage.getItem("accessToken") ?? "";
|
|
// const response = await api.getUserProjects(token);
|
|
// console.log(response);
|
|
// if (response.success) {
|
|
// setUnsignedReports(response.data ?? []);
|
|
// } else {
|
|
// console.error(response.message);
|
|
// }
|
|
// };
|
|
|
|
// const handleReportClick = async (projectName: string): Promise<void> => {
|
|
// const username = localStorage.getItem("username") ?? "";
|
|
// const token = localStorage.getItem("accessToken") ?? "";
|
|
// const response = await api.checkIfProjectManager(
|
|
// username,
|
|
// projectName,
|
|
// token,
|
|
// );
|
|
// if (response.success) {
|
|
// if (response.data) {
|
|
// navigate(`/PMProjectPage/${projectName}`);
|
|
// } else {
|
|
// navigate(`/project/${projectName}`);
|
|
// }
|
|
// } else {
|
|
// // handle error
|
|
// console.error(response.message);
|
|
// }
|
|
// };
|
|
|
|
const getUnsignedReports = async (): Promise<void> => {
|
|
// Simulate a delay
|
|
await Promise.resolve();
|
|
|
|
// Use mock data
|
|
const reports: UnsignedReports[] = [
|
|
{
|
|
projectName: "projecttest",
|
|
username: "user1",
|
|
week: 2,
|
|
signed: false,
|
|
},
|
|
{
|
|
projectName: "projecttest",
|
|
username: "user2",
|
|
week: 2,
|
|
signed: false,
|
|
},
|
|
{
|
|
projectName: "projecttest",
|
|
username: "user3",
|
|
week: 2,
|
|
signed: false,
|
|
},
|
|
{
|
|
projectName: "projecttest",
|
|
username: "user4",
|
|
week: 2,
|
|
signed: false,
|
|
},
|
|
];
|
|
|
|
// Set the state with the mock data
|
|
setUnsignedReports(reports);
|
|
};
|
|
|
|
// Call getProjects when the component mounts
|
|
useEffect(() => {
|
|
void getUnsignedReports();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-[30px] mb-[20px]">
|
|
All Unsigned Reports 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]">
|
|
{unsignedReports.map(
|
|
(unsignedReport: UnsignedReports, index: number) => (
|
|
<h1 key={index} className="border-b-2 border-black w-full">
|
|
<div className="flex justify-between">
|
|
<div className="flex">
|
|
<h1>{unsignedReport.username}</h1>
|
|
<span className="ml-6 mr-2 font-bold">Week:</span>
|
|
<h1>{unsignedReport.week}</h1>
|
|
<span className="ml-6 mr-2 font-bold">Signed:</span>
|
|
<h1>NO</h1>
|
|
</div>
|
|
<div className="flex">
|
|
<div className="ml-auto flex space-x-4">
|
|
<Link
|
|
to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.username}/${unsignedReport.week}`}
|
|
>
|
|
<h1 className="underline cursor-pointer font-bold">
|
|
View Report
|
|
</h1>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h1>
|
|
),
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default DisplayUserProject;
|