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

Refactor DisplayUnsignedReports component to use API and WeeklyReport type

Browse source
This commit is contained in:
Mattias 2024-04-02 17:05:55 +02:00
parent 93659a72dc
commit 0b8b430f38
1 changed files with 37 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontend/src/Components/DisplayUnsignedReports.tsx
View file

@ -1,12 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { api } from "../API/API";
interface UnsignedReports { import { WeeklyReport } from "../Types/goTypes";
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. * Renders a component that displays the projects a user is a part of and links to the projects start-page.
@ -14,74 +9,21 @@ interface UnsignedReports {
*/ */
function DisplayUserProject(): JSX.Element { function DisplayUserProject(): JSX.Element {
const { projectName } = useParams(); const { projectName } = useParams();
const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]); const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]);
//const navigate = useNavigate(); //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> => { const getUnsignedReports = async (): Promise<void> => {
// Simulate a delay const token = localStorage.getItem("accessToken") ?? "";
await Promise.resolve(); const response = await api.getUnsignedReportsInProject(
projectName ?? "",
// Use mock data token,
const reports: UnsignedReports[] = [ );
{ console.log(response);
projectName: "projecttest", if (response.success) {
username: "user1", setUnsignedReports(response.data ?? []);
week: 2, } else {
signed: false, console.error(response.message);
}, }
{
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 // Call getProjects when the component mounts
@ -95,12 +37,12 @@ function DisplayUserProject(): JSX.Element {
All Unsigned Reports In: {projectName}{" "} All Unsigned Reports In: {projectName}{" "}
</h1> </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]"> <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( {unsignedReports.map((unsignedReport: WeeklyReport, index: number) => (
(unsignedReport: UnsignedReports, index: number) => (
<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>{unsignedReport.username}</h1> <span className="ml-6 mr-2 font-bold">UserID:</span>
<h1>{unsignedReport.userId}</h1>
<span className="ml-6 mr-2 font-bold">Week:</span> <span className="ml-6 mr-2 font-bold">Week:</span>
<h1>{unsignedReport.week}</h1> <h1>{unsignedReport.week}</h1>
<span className="ml-6 mr-2 font-bold">Signed:</span> <span className="ml-6 mr-2 font-bold">Signed:</span>
@ -109,7 +51,7 @@ function DisplayUserProject(): JSX.Element {
<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={`/PMViewUnsignedReport/${projectName}/${unsignedReport.username}/${unsignedReport.week}`} to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.userId}/${unsignedReport.week}`}
> >
<h1 className="underline cursor-pointer font-bold"> <h1 className="underline cursor-pointer font-bold">
View Report View Report
@ -119,8 +61,7 @@ function DisplayUserProject(): JSX.Element {
</div> </div>
</div> </div>
</h1> </h1>
), ))}
)}
</div> </div>
</> </>
); );