Merge pull request #1 from DavidLMS/save-port-on-every-change

src/components/landing/DirectFollowerModal.tsx

@@ -20,6 +20,8 @@ import {
 import { Settings } from "lucide-react";
 import PortDetectionModal from "@/components/ui/PortDetectionModal";
 import PortDetectionButton from "@/components/ui/PortDetectionButton";
+import { useApi } from "@/contexts/ApiContext";
+import { useAutoSave } from "@/hooks/useAutoSave";
 
 interface DirectFollowerModalProps {
   open: boolean;
@@ -44,28 +46,40 @@ const DirectFollowerModal: React.FC<DirectFollowerModalProps> = ({
   isLoadingConfigs,
   onStart,
 }) => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const { debouncedSavePort, debouncedSaveConfig } = useAutoSave();
   const [showPortDetection, setShowPortDetection] = useState(false);
 
-  // Load saved follower port on component mount
+  // Load saved follower port and configuration on component mount
   useEffect(() => {
-    const loadSavedPort = async () => {
+    const loadSavedData = async () => {
       try {
-        const followerResponse = await fetch(
-          "http://localhost:8000/robot-port/follower"
+        // Load follower port
+        const followerResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-port/follower`
         );
         const followerData = await followerResponse.json();
         if (followerData.status === "success" && followerData.default_port) {
           setFollowerPort(followerData.default_port);
         }
+
+        // Load follower configuration
+        const followerConfigResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-config/follower?available_configs=${followerConfigs.join(',')}`
+        );
+        const followerConfigData = await followerConfigResponse.json();
+        if (followerConfigData.status === "success" && followerConfigData.default_config) {
+          setFollowerConfig(followerConfigData.default_config);
+        }
       } catch (error) {
-        console.error("Error loading saved follower port:", error);
+        console.error("Error loading saved data:", error);
       }
     };
 
-    if (open) {
-      loadSavedPort();
+    if (open && followerConfigs.length > 0) {
+      loadSavedData();
     }
-  }, [open, setFollowerPort]);
+  }, [open, setFollowerPort, setFollowerConfig, followerConfigs, baseUrl, fetchWithHeaders]);
 
   const handlePortDetection = () => {
     setShowPortDetection(true);
@@ -75,6 +89,20 @@ const DirectFollowerModal: React.FC<DirectFollowerModalProps> = ({
     setFollowerPort(port);
   };
 
+  // Enhanced port change handler that saves automatically
+  const handleFollowerPortChange = (value: string) => {
+    setFollowerPort(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSavePort("follower", value);
+  };
+
+  // Enhanced config change handler that saves automatically
+  const handleFollowerConfigChange = (value: string) => {
+    setFollowerConfig(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSaveConfig("follower", value);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[500px] p-8">
@@ -103,7 +131,7 @@ const DirectFollowerModal: React.FC<DirectFollowerModalProps> = ({
                 <Input
                   id="followerPort"
                   value={followerPort}
-                  onChange={(e) => setFollowerPort(e.target.value)}
+                  onChange={(e) => handleFollowerPortChange(e.target.value)}
                   placeholder="/dev/tty.usbmodem5A460816621"
                   className="bg-gray-800 border-gray-700 text-white flex-1"
                 />
@@ -121,7 +149,7 @@ const DirectFollowerModal: React.FC<DirectFollowerModalProps> = ({
               >
                 Follower Calibration Config
               </Label>
-              <Select value={followerConfig} onValueChange={setFollowerConfig}>
+              <Select value={followerConfig} onValueChange={handleFollowerConfigChange}>
                 <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                   <SelectValue
                     placeholder={

src/components/landing/RecordingModal.tsx

@@ -21,6 +21,7 @@ import PortDetectionModal from "@/components/ui/PortDetectionModal";
 import PortDetectionButton from "@/components/ui/PortDetectionButton";
 import QrCodeModal from "@/components/recording/QrCodeModal";
 import { useApi } from "@/contexts/ApiContext";
+import { useAutoSave } from "@/hooks/useAutoSave";
 interface RecordingModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -66,6 +67,7 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
   onStart,
 }) => {
   const { baseUrl, fetchWithHeaders } = useApi();
+  const { debouncedSavePort, debouncedSaveConfig } = useAutoSave();
   const [showPortDetection, setShowPortDetection] = useState(false);
   const [detectionRobotType, setDetectionRobotType] = useState<
     "leader" | "follower"
@@ -73,9 +75,46 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
   const [showQrCodeModal, setShowQrCodeModal] = useState(false);
   const [sessionId, setSessionId] = useState("");
 
-  // Load saved ports on component mount
+  const handlePortDetection = (robotType: "leader" | "follower") => {
+    setDetectionRobotType(robotType);
+    setShowPortDetection(true);
+  };
+  const handlePortDetected = (port: string) => {
+    if (detectionRobotType === "leader") {
+      setLeaderPort(port);
+    } else {
+      setFollowerPort(port);
+    }
+  };
+
+  // Enhanced port change handlers that save automatically
+  const handleLeaderPortChange = (value: string) => {
+    setLeaderPort(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSavePort("leader", value);
+  };
+
+  const handleFollowerPortChange = (value: string) => {
+    setFollowerPort(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSavePort("follower", value);
+  };
+
+  // Enhanced config change handlers that save automatically
+  const handleLeaderConfigChange = (value: string) => {
+    setLeaderConfig(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSaveConfig("leader", value);
+  };
+
+  const handleFollowerConfigChange = (value: string) => {
+    setFollowerConfig(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSaveConfig("follower", value);
+  };
+  // Load saved ports and configurations on component mount
   useEffect(() => {
-    const loadSavedPorts = async () => {
+    const loadSavedData = async () => {
       try {
         // Load leader port
         const leaderResponse = await fetchWithHeaders(
@@ -94,25 +133,34 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
         if (followerData.status === "success" && followerData.default_port) {
           setFollowerPort(followerData.default_port);
         }
+
+        // Load leader configuration
+        const leaderConfigResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-config/leader?available_configs=${leaderConfigs.join(',')}`
+        );
+        const leaderConfigData = await leaderConfigResponse.json();
+        if (leaderConfigData.status === "success" && leaderConfigData.default_config) {
+          setLeaderConfig(leaderConfigData.default_config);
+        }
+
+        // Load follower configuration
+        const followerConfigResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-config/follower?available_configs=${followerConfigs.join(',')}`
+        );
+        const followerConfigData = await followerConfigResponse.json();
+        if (followerConfigData.status === "success" && followerConfigData.default_config) {
+          setFollowerConfig(followerConfigData.default_config);
+        }
       } catch (error) {
-        console.error("Error loading saved ports:", error);
+        console.error("Error loading saved data:", error);
       }
     };
-    if (open) {
-      loadSavedPorts();
-    }
-  }, [open, setLeaderPort, setFollowerPort]);
-  const handlePortDetection = (robotType: "leader" | "follower") => {
-    setDetectionRobotType(robotType);
-    setShowPortDetection(true);
-  };
-  const handlePortDetected = (port: string) => {
-    if (detectionRobotType === "leader") {
-      setLeaderPort(port);
-    } else {
-      setFollowerPort(port);
+
+    if (open && leaderConfigs.length > 0 && followerConfigs.length > 0) {
+      loadSavedData();
     }
-  };
+  }, [open, setLeaderPort, setFollowerPort, setLeaderConfig, setFollowerConfig, leaderConfigs, followerConfigs, baseUrl, fetchWithHeaders]);
+
   const handleQrCodeClick = () => {
     // Generate a session ID for this recording session
     const newSessionId = `recording_${Date.now()}_${Math.random()
@@ -175,7 +223,7 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                       <Input
                         id="recordLeaderPort"
                         value={leaderPort}
-                        onChange={(e) => setLeaderPort(e.target.value)}
+                        onChange={(e) => handleLeaderPortChange(e.target.value)}
                         placeholder="/dev/tty.usbmodem5A460816421"
                         className="bg-gray-800 border-gray-700 text-white flex-1"
                       />
@@ -194,7 +242,7 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                     </Label>
                     <Select
                       value={leaderConfig}
-                      onValueChange={setLeaderConfig}
+                      onValueChange={handleLeaderConfigChange}
                     >
                       <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                         <SelectValue
@@ -229,7 +277,7 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                       <Input
                         id="recordFollowerPort"
                         value={followerPort}
-                        onChange={(e) => setFollowerPort(e.target.value)}
+                        onChange={(e) => handleFollowerPortChange(e.target.value)}
                         placeholder="/dev/tty.usbmodem5A460816621"
                         className="bg-gray-800 border-gray-700 text-white flex-1"
                       />
@@ -248,7 +296,7 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                     </Label>
                     <Select
                       value={followerConfig}
-                      onValueChange={setFollowerConfig}
+                      onValueChange={handleFollowerConfigChange}
                     >
                       <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                         <SelectValue

src/components/landing/TeleoperationModal.tsx

@@ -20,6 +20,7 @@ import { Settings } from "lucide-react";
 import PortDetectionModal from "@/components/ui/PortDetectionModal";
 import PortDetectionButton from "@/components/ui/PortDetectionButton";
 import { useApi } from "@/contexts/ApiContext";
+import { useAutoSave } from "@/hooks/useAutoSave";
 
 interface TeleoperationModalProps {
   open: boolean;
@@ -55,14 +56,15 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
   onStart,
 }) => {
   const { baseUrl, fetchWithHeaders } = useApi();
+  const { debouncedSavePort, debouncedSaveConfig } = useAutoSave();
   const [showPortDetection, setShowPortDetection] = useState(false);
   const [detectionRobotType, setDetectionRobotType] = useState<
     "leader" | "follower"
   >("leader");
 
-  // Load saved ports on component mount
+  // Load saved ports and configurations on component mount
   useEffect(() => {
-    const loadSavedPorts = async () => {
+    const loadSavedData = async () => {
       try {
         // Load leader port
         const leaderResponse = await fetchWithHeaders(
@@ -81,15 +83,33 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
         if (followerData.status === "success" && followerData.default_port) {
           setFollowerPort(followerData.default_port);
         }
+
+        // Load leader configuration
+        const leaderConfigResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-config/leader?available_configs=${leaderConfigs.join(',')}`
+        );
+        const leaderConfigData = await leaderConfigResponse.json();
+        if (leaderConfigData.status === "success" && leaderConfigData.default_config) {
+          setLeaderConfig(leaderConfigData.default_config);
+        }
+
+        // Load follower configuration
+        const followerConfigResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-config/follower?available_configs=${followerConfigs.join(',')}`
+        );
+        const followerConfigData = await followerConfigResponse.json();
+        if (followerConfigData.status === "success" && followerConfigData.default_config) {
+          setFollowerConfig(followerConfigData.default_config);
+        }
       } catch (error) {
-        console.error("Error loading saved ports:", error);
+        console.error("Error loading saved data:", error);
       }
     };
 
-    if (open) {
-      loadSavedPorts();
+    if (open && leaderConfigs.length > 0 && followerConfigs.length > 0) {
+      loadSavedData();
     }
-  }, [open, setLeaderPort, setFollowerPort]);
+  }, [open, setLeaderPort, setFollowerPort, setLeaderConfig, setFollowerConfig, leaderConfigs, followerConfigs, baseUrl, fetchWithHeaders]);
 
   const handlePortDetection = (robotType: "leader" | "follower") => {
     setDetectionRobotType(robotType);
@@ -103,6 +123,32 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
       setFollowerPort(port);
     }
   };
+
+  // Enhanced port change handlers that save automatically
+  const handleLeaderPortChange = (value: string) => {
+    setLeaderPort(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSavePort("leader", value);
+  };
+
+  const handleFollowerPortChange = (value: string) => {
+    setFollowerPort(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSavePort("follower", value);
+  };
+
+  // Enhanced config change handlers that save automatically
+  const handleLeaderConfigChange = (value: string) => {
+    setLeaderConfig(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSaveConfig("leader", value);
+  };
+
+  const handleFollowerConfigChange = (value: string) => {
+    setFollowerConfig(value);
+    // Auto-save with debouncing to avoid excessive API calls
+    debouncedSaveConfig("follower", value);
+  };
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8">
@@ -132,7 +178,7 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
                 <Input
                   id="leaderPort"
                   value={leaderPort}
-                  onChange={(e) => setLeaderPort(e.target.value)}
+                  onChange={(e) => handleLeaderPortChange(e.target.value)}
                   placeholder="/dev/tty.usbmodem5A460816421"
                   className="bg-gray-800 border-gray-700 text-white flex-1"
                 />
@@ -150,7 +196,7 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
               >
                 Leader Calibration Config
               </Label>
-              <Select value={leaderConfig} onValueChange={setLeaderConfig}>
+              <Select value={leaderConfig} onValueChange={handleLeaderConfigChange}>
                 <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                   <SelectValue
                     placeholder={
@@ -185,7 +231,7 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
                 <Input
                   id="followerPort"
                   value={followerPort}
-                  onChange={(e) => setFollowerPort(e.target.value)}
+                  onChange={(e) => handleFollowerPortChange(e.target.value)}
                   placeholder="/dev/tty.usbmodem5A460816621"
                   className="bg-gray-800 border-gray-700 text-white flex-1"
                 />
@@ -203,7 +249,7 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
               >
                 Follower Calibration Config
               </Label>
-              <Select value={followerConfig} onValueChange={setFollowerConfig}>
+              <Select value={followerConfig} onValueChange={handleFollowerConfigChange}>
                 <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                   <SelectValue
                     placeholder={

src/hooks/useAutoSave.ts

@@ -0,0 +1,78 @@
+import { useCallback, useRef } from 'react';
+import { useApi } from '@/contexts/ApiContext';
+
+export const useAutoSave = () => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const timeoutRefs = useRef<{ [key: string]: NodeJS.Timeout }>({});
+  const configTimeoutRefs = useRef<{ [key: string]: NodeJS.Timeout }>({});
+
+  const savePortAutomatically = useCallback(async (robotType: 'leader' | 'follower', port: string) => {
+    if (!port.trim()) return;
+    
+    try {
+      await fetchWithHeaders(`${baseUrl}/save-robot-port`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          robot_type: robotType,
+          port: port.trim(),
+        }),
+      });
+      console.log(`Auto-saved ${robotType} port: ${port}`);
+    } catch (error) {
+      console.error(`Error saving ${robotType} port:`, error);
+    }
+  }, [baseUrl, fetchWithHeaders]);
+
+  const saveConfigAutomatically = useCallback(async (robotType: 'leader' | 'follower', configName: string) => {
+    if (!configName.trim()) return;
+    
+    try {
+      await fetchWithHeaders(`${baseUrl}/save-robot-config`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          robot_type: robotType,
+          config_name: configName.trim(),
+        }),
+      });
+      console.log(`Auto-saved ${robotType} config: ${configName}`);
+    } catch (error) {
+      console.error(`Error saving ${robotType} config:`, error);
+    }
+  }, [baseUrl, fetchWithHeaders]);
+
+  const debouncedSavePort = useCallback((robotType: 'leader' | 'follower', port: string, delay: number = 1500) => {
+    // Clear existing timeout for this robotType
+    if (timeoutRefs.current[robotType]) {
+      clearTimeout(timeoutRefs.current[robotType]);
+    }
+
+    // Set new timeout
+    timeoutRefs.current[robotType] = setTimeout(() => {
+      savePortAutomatically(robotType, port);
+      delete timeoutRefs.current[robotType];
+    }, delay);
+  }, [savePortAutomatically]);
+
+  const debouncedSaveConfig = useCallback((robotType: 'leader' | 'follower', configName: string, delay: number = 1000) => {
+    const key = `${robotType}_config`;
+    
+    // Clear existing timeout for this robotType config
+    if (configTimeoutRefs.current[key]) {
+      clearTimeout(configTimeoutRefs.current[key]);
+    }
+
+    // Set new timeout
+    configTimeoutRefs.current[key] = setTimeout(() => {
+      saveConfigAutomatically(robotType, configName);
+      delete configTimeoutRefs.current[key];
+    }, delay);
+  }, [saveConfigAutomatically]);
+
+  return { debouncedSavePort, debouncedSaveConfig };
+};