From 3fea87a88a9e58fbb7360b6ef4dbc6b65677710a Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Tue, 19 Mar 2024 21:22:49 +0100
Subject: [PATCH] New component for displaying userprojects
---
.../src/Components/DisplayUserProjects.tsx | 40 +++++++++++++++++++
frontend/src/Pages/YourProjectsPage.tsx | 33 +--------------
2 files changed, 42 insertions(+), 31 deletions(-)
create mode 100644 frontend/src/Components/DisplayUserProjects.tsx
diff --git a/frontend/src/Components/DisplayUserProjects.tsx b/frontend/src/Components/DisplayUserProjects.tsx
new file mode 100644
index 0000000..266f1ce
--- /dev/null
+++ b/frontend/src/Components/DisplayUserProjects.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+import { Project } from "../Types/goTypes";
+import { Link } from "react-router-dom";
+import { api } from "../API/API";
+
+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;
diff --git a/frontend/src/Pages/YourProjectsPage.tsx b/frontend/src/Pages/YourProjectsPage.tsx
index b5644c3..c048746 100644
--- a/frontend/src/Pages/YourProjectsPage.tsx
+++ b/frontend/src/Pages/YourProjectsPage.tsx
@@ -1,39 +1,10 @@
-import { useState, useEffect } from "react";
-import { Project } from "../Types/goTypes";
-import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";
-import { api } from "../API/API";
+import DisplayUserProjects from "../Components/DisplayUserProjects";
function UserProjectPage(): 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();
- }, []);
-
const content = (
<>
- <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>
+ <DisplayUserProjects />
</>
);