fix title change error

Alforoan · Jun 30, 2024 · c4e0084 · c4e0084
1 parent 87345f1
commit c4e0084
Showing 1 changed file with 36 additions and 31 deletions.
diff --git a/client/src/components/EditBoardName.tsx b/client/src/components/EditBoardName.tsx
@@ -30,6 +30,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
     setIsEditing(false);
     setNewName(originalName); // Revert to the most recently saved board name in case of cancel
     updateTitleText();
+		setError(null);
   }, [originalName]);
 
   useEffect(() => {
@@ -54,9 +55,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       return;
     }
 
-    setIsLoading(true);
-    setError(null);
-    updateTitleText();
+
     try {
       const token = localStorage.getItem("jwt");
       const response = await axios.put(
@@ -79,6 +78,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       if (axios.isAxiosError(err)) {
         if (err.response?.status === 400) {
           setError("Board name already exists, please try another.");
+					return;
         } else {
           setError("Failed to update board name. Please try again later.");
         }
@@ -87,6 +87,9 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       }
       setIsLoading(false);
     }
+		setIsLoading(true);
+    setError(null);
+    updateTitleText();
   };
 
   return (
@@ -99,35 +102,37 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
           Edit
         </button>
       ) : (
-        <>
-          <input
-            type="text"
-            value={newName}
-            onChange={handleInputChange}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                handleSubmit();
-              }
-            }}
-            size={newName.length - 1}
-            className="text-3xl font-bold font-primary border rounded px-2"
-            maxLength={30}
-          />
-          <button
-            onClick={handleSubmit}
-            disabled={isLoading}
-            className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
-          >
-            Save
-          </button>
-          <button
-            onClick={handleCancel}
-            className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
-          >
-            Cancel
-          </button>
+        <main className="flex-col">
+          <div className="flex items-center">
+            <input
+              type="text"
+              value={newName}
+              onChange={handleInputChange}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleSubmit();
+                }
+              }}
+              size={newName.length - 1}
+              className="text-3xl font-bold font-primary border rounded px-2"
+              maxLength={30}
+            />
+            <button
+              onClick={handleSubmit}
+              disabled={isLoading}
+              className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
+            >
+              Save
+            </button>
+            <button
+              onClick={handleCancel}
+              className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
+            >
+              Cancel
+            </button>
+          </div>
           {error && <p className="text-red-500 mt-2">{error}</p>}
-        </>
+        </main>
       )}
     </div>
   );