Some fixes to ChangeUsername

frontend/src/Components/ChangeUsername.tsx

@@ -1,61 +1,26 @@
-import React, { useState } from "react";
-import InputField from "./InputField";
-import { api } from "../API/API";
-
-function ChangeUsername(): JSX.Element {
-  const [newUsername, setNewUsername] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    setNewUsername(e.target.value);
-  };
-
-  const handleSubmit = async (): Promise<void> => {
-    try {
-      // Call the API function to change the username
-      const token = localStorage.getItem("accessToken");
-      if (!token) {
-        throw new Error("Access token not found");
-      }
-
-      const response = await api.changeUserName(
-        { prevName: "currentName", newName: newUsername },
-        token,
-      );
+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");
+    return;
+  }
+  api
+    .changeUserName(props.nameChange, localStorage.getItem("accessToken") ?? "")
+    .then((response: APIResponse<void>) => {
       if (response.success) {
-        // Optionally, add a success message or redirect the user
-        console.log("Username changed successfully");
+        alert("Name changed successfully");
+        location.reload();
       } else {
-        // Handle the error message
-        console.error("Failed to change username:", response.message);
-        setErrorMessage(response.message ?? "Failed to change username");
+        alert("Name not changed");
+        console.error(response.message);
       }
-    } catch (error) {
-      console.error("Error changing username:", error);
-      // Optionally, handle the error
-      setErrorMessage("Failed to change username");
-    }
-  };
-
-  const handleButtonClick = (): void => {
-    handleSubmit().catch((error) => {
-      console.error("Error in handleSubmit:", error);
+    })
+    .catch((error) => {
+      alert("Name not changed");
+      console.error("An error occurred during change:", error);
     });
-  };
-
-  return (
-    <div>
-      <InputField
-        label="New Username"
-        type="text"
-        value={newUsername}
-        onChange={handleChange}
-      />
-      {errorMessage && <div>{errorMessage}</div>}
-      <button onClick={handleButtonClick}>Update Username</button>
-    </div>
-  );
 }
 
 export default ChangeUsername;