fix: open new tool after its added

frontend/src/modals/AddToolModal.tsx

@@ -13,11 +13,13 @@ export default function AddToolModal({
   modalState,
   setModalState,
   getUserTools,
+  onToolAdded,
 }: {
   message: string;
   modalState: ActiveState;
   setModalState: (state: ActiveState) => void;
   getUserTools: () => void;
+  onToolAdded: (toolId: string) => void;
 }) {
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
@@ -59,9 +61,20 @@ export default function AddToolModal({
         })
         .then((res) => {
           if (res.status === 200) {
-            getUserTools();
-            setModalState('INACTIVE');
+            return res.json();
+          } else {
+            throw new Error(
+              `Failed to create tool, status code: ${res.status}`,
+            );
           }
+        })
+        .then((data) => {
+          getUserTools();
+          setModalState('INACTIVE');
+          onToolAdded(data.id);
+        })
+        .catch((error) => {
+          console.error('Failed to create tool:', error);
         });
     } else {
       setModalState('INACTIVE');

frontend/src/settings/Tools.tsx

@@ -58,9 +58,27 @@ export default function Tools() {
     getUserTools();
   };
 
+  const handleToolAdded = (toolId: string) => {
+    userService
+      .getUserTools()
+      .then((res) => res.json())
+      .then((data) => {
+        const newTool = data.tools.find(
+          (tool: UserToolType) => tool.id === toolId,
+        );
+        if (newTool) {
+          setSelectedTool(newTool);
+        } else {
+          console.error('Newly added tool not found');
+        }
+      })
+      .catch((error) => console.error('Error fetching tools:', error));
+  };
+
   React.useEffect(() => {
     getUserTools();
   }, []);
+
   return (
     <div>
       {selectedTool ? (
@@ -185,6 +203,7 @@ export default function Tools() {
             modalState={addToolModalState}
             setModalState={setAddToolModalState}
             getUserTools={getUserTools}
+            onToolAdded={handleToolAdded}
           />
         </div>
       )}