From 200da516337b652360f30a6aada5958d4bce3636 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Mon, 18 Mar 2024 00:41:18 +0100
Subject: [PATCH] AddProject component
---
frontend/src/Components/AddProject.tsx | 97 ++++++++++++++++++++++++++
1 file changed, 97 insertions(+)
create mode 100644 frontend/src/Components/AddProject.tsx
diff --git a/frontend/src/Components/AddProject.tsx b/frontend/src/Components/AddProject.tsx
new file mode 100644
index 0000000..9fdf8e9
--- /dev/null
+++ b/frontend/src/Components/AddProject.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { APIResponse, api } from "../API/API";
+import { NewProject, Project } from "../Types/goTypes";
+import InputField from "./InputField";
+import Logo from "../assets/Logo.svg";
+import Button from "./Button";
+
+/**
+ * Tries to add a project to the system
+ * @param props - Project name and description
+ * @returns {boolean} True if created, false if not
+ */
+function CreateProject(props: { name: string; description: string }): boolean {
+ const project: NewProject = {
+ name: props.name,
+ description: props.name,
+ };
+
+ let created = false;
+
+ api
+ .createProject(project, localStorage.getItem("accessToken") ?? "")
+ .then((response: APIResponse<Project>) => {
+ //vv_FOR DEBGUGGING_vv
+ console.log(localStorage.getItem("accessToken"));
+
+ if (response.success) {
+ created = true;
+ } else {
+ console.error("Could not add project");
+ }
+ })
+ .catch((error) => {
+ console.error("An error occurred during creation:", error);
+ });
+ return created;
+}
+
+/**
+ * Tries to add a project to the system
+ * @returns {JSX.Element} UI for project adding
+ */
+function AddProject(): JSX.Element {
+ const [name, setName] = useState("");
+ const [description, setDescription] = useState("");
+
+ return (
+ <div className="flex flex-col h-fit w-screen items-center justify-center">
+ <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
+ <form
+ className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
+ onSubmit={(e) => {
+ e.preventDefault();
+ CreateProject({ name: name, description: description });
+ }}
+ >
+ <img
+ src={Logo}
+ className="logo w-[7vw] mb-10 mt-10"
+ alt="TTIME Logo"
+ />
+ <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
+ Create a new project
+ </h3>
+ <InputField
+ label="Name"
+ type="text"
+ value={name}
+ onChange={(e) => {
+ setName(e.target.value);
+ }}
+ />
+ <InputField
+ label="Description"
+ type="text"
+ value={description}
+ onChange={(e) => {
+ setDescription(e.target.value);
+ }}
+ />
+ <div className="flex items-center justify-between">
+ <Button
+ text="Create"
+ onClick={(): void => {
+ return;
+ }}
+ type="submit"
+ />
+ </div>
+ </form>
+ <p className="text-center text-gray-500 text-xs"></p>
+ </div>
+ </div>
+ );
+}
+
+export default AddProject;