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

Fixed DisplayUserProject component to fetch and display usernames

Browse source
This commit is contained in:
Davenludd 2024-04-04 22:19:35 +02:00
parent 544383809b
commit a6f3fc4a1c
1 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,17 +3,14 @@ import { Link, useParams } from "react-router-dom";
import { api } from "../API/API"; import { api } from "../API/API";
import { WeeklyReport } from "../Types/goTypes"; import { WeeklyReport } from "../Types/goTypes";
/**
* 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 { function DisplayUserProject(): JSX.Element {
const { projectName } = useParams(); const { projectName } = useParams();
const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]); const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]);
//const navigate = useNavigate(); const [usernames, setUsernames] = useState<string[]>([]);
const token = localStorage.getItem("accessToken") ?? "";
useEffect(() => { useEffect(() => {
const getUnsignedReports = async (): Promise<void> => { const getUnsignedReports = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getUnsignedReportsInProject( const response = await api.getUnsignedReportsInProject(
projectName ?? "", projectName ?? "",
token, token,
@ -21,13 +18,21 @@ function DisplayUserProject(): JSX.Element {
console.log(response); console.log(response);
if (response.success) { if (response.success) {
setUnsignedReports(response.data ?? []); setUnsignedReports(response.data ?? []);
const usernamesPromises = (response.data ?? []).map((report) =>
api.getUsername(report.userId, token),
);
const usernamesResponses = await Promise.all(usernamesPromises);
const usernames = usernamesResponses.map(
(res) => (res.data as { username?: string }).username ?? "",
);
setUsernames(usernames);
} else { } else {
console.error(response.message); console.error(response.message);
} }
}; };
void getUnsignedReports(); void getUnsignedReports();
}, [projectName]); // Include 'projectName' in the dependency array }, [projectName, token]);
return ( return (
<> <>
@ -39,8 +44,8 @@ function DisplayUserProject(): 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">
<span className="ml-6 mr-2 font-bold">UserID:</span> <span className="ml-6 mr-2 font-bold">Username:</span>
<h1>{unsignedReport.userId}</h1> <h1>{usernames[index]}</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">Total Time:</span> <span className="ml-6 mr-2 font-bold">Total Time:</span>
@ -58,7 +63,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.userId}/${unsignedReport.week}`} to={`/PMViewUnsignedReport/${projectName}/${usernames[index]}/${unsignedReport.week}`}
> >
<h1 className="underline cursor-pointer font-bold"> <h1 className="underline cursor-pointer font-bold">
View Report View Report