From 13eb6597a7ad993dcd69c5b7887dda826052611f Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Thu, 4 Apr 2024 11:54:34 +0200
Subject: [PATCH] Some fixes to how they handle names and inputs
---
frontend/src/Components/AddProject.tsx | 61 ++++++++++------------
frontend/src/Components/ChangeRoleView.tsx | 2 +-
frontend/src/Components/ChangeUsername.tsx | 9 ++--
frontend/src/Components/Register.tsx | 10 ++--
frontend/src/Components/UserInfoModal.tsx | 2 +-
5 files changed, 44 insertions(+), 40 deletions(-)
diff --git a/frontend/src/Components/AddProject.tsx b/frontend/src/Components/AddProject.tsx
index e2ad8b9..c8a1c66 100644
--- a/frontend/src/Components/AddProject.tsx
+++ b/frontend/src/Components/AddProject.tsx
@@ -1,37 +1,10 @@
import { useState } from "react";
-import { APIResponse, api } from "../API/API";
+import { api } from "../API/API";
import { NewProject } 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 {Object} props - Project name and description
- * @returns {boolean} True if created, false if not
- */
-function CreateProject(props: { name: string; description: string }): void {
- const project: NewProject = {
- name: props.name,
- description: props.description,
- };
-
- api
- .createProject(project, localStorage.getItem("accessToken") ?? "")
- .then((response: APIResponse<void>) => {
- if (response.success) {
- alert("Project added!");
- } else {
- alert("Project NOT added!");
- console.error(response.message);
- }
- })
- .catch((error) => {
- alert("Project NOT added!");
- console.error("An error occurred during creation:", error);
- });
-}
-
/**
* Provides UI for adding a project to the system.
* @returns {JSX.Element} - Returns the component UI for adding a project
@@ -40,6 +13,33 @@ function AddProject(): JSX.Element {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
+ /**
+ * Tries to add a project to the system
+ */
+ const handleCreateProject = async (): Promise<void> => {
+ const project: NewProject = {
+ name: name.replace(/ /g, ""),
+ description: description.trim(),
+ };
+ try {
+ const response = await api.createProject(
+ project,
+ localStorage.getItem("accessToken") ?? "",
+ );
+ if (response.success) {
+ alert(`${project.name} added!`);
+ setDescription("");
+ setName("");
+ } else {
+ alert("Project not added, name could be taken");
+ console.error(response.message);
+ }
+ } catch (error) {
+ alert("Project not added");
+ console.error(error);
+ }
+ };
+
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">
@@ -47,10 +47,7 @@ function AddProject(): JSX.Element {
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,
- });
+ void handleCreateProject();
}}
>
<img
diff --git a/frontend/src/Components/ChangeRoleView.tsx b/frontend/src/Components/ChangeRoleView.tsx
index 30dce3c..782ad8d 100644
--- a/frontend/src/Components/ChangeRoleView.tsx
+++ b/frontend/src/Components/ChangeRoleView.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
import Button from "./Button";
import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
-export default function ChangeRoles(props: {
+export default function ChangeRoleView(props: {
projectName: string;
username: string;
}): JSX.Element {
diff --git a/frontend/src/Components/ChangeUsername.tsx b/frontend/src/Components/ChangeUsername.tsx
index 78d7da9..2f73bb6 100644
--- a/frontend/src/Components/ChangeUsername.tsx
+++ b/frontend/src/Components/ChangeUsername.tsx
@@ -2,8 +2,11 @@ import { APIResponse, api } from "../API/API";
import { StrNameChange } from "../Types/goTypes";
function ChangeUsername(props: { nameChange: StrNameChange }): void {
- if (props.nameChange.newName === "") {
- alert("You have to select a new name");
+ if (
+ props.nameChange.newName === "" ||
+ props.nameChange.newName === props.nameChange.prevName
+ ) {
+ alert("You have to give a new name\n\nName not changed");
return;
}
api
@@ -13,7 +16,7 @@ function ChangeUsername(props: { nameChange: StrNameChange }): void {
alert("Name changed successfully");
location.reload();
} else {
- alert("Name not changed");
+ alert("Name not changed, name could be taken");
console.error(response.message);
}
})
diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index 68e0979..be35a74 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -15,17 +15,21 @@ export default function Register(): JSX.Element {
const [errMessage, setErrMessage] = useState<string>();
const handleRegister = async (): Promise<void> => {
+ if (username === "" || password === "") {
+ alert("Must provide username and password");
+ return;
+ }
const newUser: NewUser = {
- username: username ?? "",
+ username: username?.replace(/ /g, "") ?? "",
password: password ?? "",
};
const response = await api.registerUser(newUser);
if (response.success) {
- alert("User added!");
+ alert(`${newUser.username} added!`);
setPassword("");
setUsername("");
} else {
- alert("User not added");
+ alert("User not added, name could be taken");
setErrMessage(response.message ?? "Unknown error");
console.error(errMessage);
}
diff --git a/frontend/src/Components/UserInfoModal.tsx b/frontend/src/Components/UserInfoModal.tsx
index 8cb4c9d..eae011c 100644
--- a/frontend/src/Components/UserInfoModal.tsx
+++ b/frontend/src/Components/UserInfoModal.tsx
@@ -28,7 +28,7 @@ function UserInfoModal(props: {
const handleClickChangeName = (): void => {
const nameChange: StrNameChange = {
prevName: props.username,
- newName: newUsername,
+ newName: newUsername.replace(/ /g, ""),
};
ChangeUsername({ nameChange: nameChange });
};