45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Project } from "../Types/goTypes";
|
|
import { Link } from "react-router-dom";
|
|
import { api } from "../API/API";
|
|
|
|
/**
|
|
* 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 [projects, setProjects] = useState<Project[]>([]);
|
|
|
|
const getProjects = async (): Promise<void> => {
|
|
const token = localStorage.getItem("accessToken") ?? "";
|
|
const response = await api.getUserProjects(token);
|
|
console.log(response);
|
|
if (response.success) {
|
|
setProjects(response.data ?? []);
|
|
} else {
|
|
console.error(response.message);
|
|
}
|
|
};
|
|
|
|
// Call getProjects when the component mounts
|
|
useEffect(() => {
|
|
void getProjects();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
|
|
{projects.map((project, index) => (
|
|
<Link to={`/project/${project.name}`} key={index}>
|
|
<h1 className="font-bold underline text-[30px] cursor-pointer">
|
|
{project.name}
|
|
</h1>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default DisplayUserProject;
|