From 19501122020f52baa1f607cf80b93c77e60f98e3 Mon Sep 17 00:00:00 2001
From: pavel Hamawand <pavelhamawand@gmail.com>
Date: Thu, 21 Mar 2024 02:22:23 +0100
Subject: [PATCH] implementing changeUsername component

---
 frontend/src/Components/ChangeUsername.tsx | 40 ++++++++++++++++------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Components/ChangeUsername.tsx b/frontend/src/Components/ChangeUsername.tsx
index 3c35e94..04abc26 100644
--- a/frontend/src/Components/ChangeUsername.tsx
+++ b/frontend/src/Components/ChangeUsername.tsx
@@ -1,23 +1,41 @@
 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 update the username
-  //     await api.updateUsername(newUsername);
-  //     // Optionally, add a success message or redirect the user
-  //   } catch (error) {
-  //     console.error("Error updating username:", error);
-  //     // Optionally, handle the error
-  //   }
-  // };
+  const handleSubmit = async (): Promise<void> => {
+    try {
+      // Call the API function to change the username
+      const response = await api.changeUserName(
+        { prevName: "currentName", newName: newUsername },
+        "token",
+      );
+      if (response.success) {
+        // Optionally, add a success message or redirect the user
+        console.log("Username changed successfully");
+      } else {
+        // Handle the error message
+        console.error("Failed to change username:", 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);
+    });
+  };
 
   return (
     <div>
@@ -27,6 +45,8 @@ function ChangeUsername(): JSX.Element {
         value={newUsername}
         onChange={handleChange}
       />
+      {errorMessage && <div>{errorMessage}</div>}
+      <button onClick={handleButtonClick}>Update Username</button>
     </div>
   );
 }