move state updates to effects

Author: Ritika Mishra

src/app/npg-lite/page.tsx

@@ -786,7 +786,6 @@ const NPG_Ble = () => {
 
     const toggleChannel = (channelIndex: number) => {
         setSelectedChannels((prevSelected) => {
-            setManuallySelected(true);
             const updatedChannels = prevSelected.includes(channelIndex)
                 ? prevSelected.filter((ch) => ch !== channelIndex)
                 : [...prevSelected, channelIndex];
@@ -799,6 +798,8 @@ const NPG_Ble = () => {
 
             return sortedChannels;
         });
+
+        setManuallySelected(true);
     };
 
 

src/components/Connection.tsx

@@ -280,8 +280,8 @@ const Connection: React.FC<ConnectionProps> = ({
 
 
     const toggleChannel = (channelIndex: number) => {
+        // Mark as manually selected and update selectedChannels
         setSelectedChannels((prevSelected) => {
-            setManuallySelected(true);
             const updatedChannels = prevSelected.includes(channelIndex)
                 ? prevSelected.filter((ch) => ch !== channelIndex)
                 : [...prevSelected, channelIndex];
@@ -292,24 +292,29 @@ const Connection: React.FC<ConnectionProps> = ({
                 sortedChannels.push(1);
             }
 
-            // Retrieve saved devices from localStorage
-            const savedPorts = JSON.parse(localStorage.getItem('savedDevices') || '[]');
-            const portInfo = portRef.current?.getInfo();
-
-            if (portInfo) {
-                const deviceIndex = savedPorts.findIndex(
-                    (saved: SavedDevice) => saved.deviceName === devicenameref.current
-                );
+            // Retrieve saved devices from localStorage and persist selection
+            try {
+                const savedPorts = JSON.parse(localStorage.getItem('savedDevices') || '[]');
+                const portInfo = portRef.current?.getInfo();
 
-                if (deviceIndex !== -1) {
-                    savedPorts[deviceIndex].selectedChannels = sortedChannels;
-                    localStorage.setItem('savedDevices', JSON.stringify(savedPorts));
+                if (portInfo) {
+                    const deviceIndex = savedPorts.findIndex(
+                        (saved: SavedDevice) => saved.deviceName === devicenameref.current
+                    );
 
+                    if (deviceIndex !== -1) {
+                        savedPorts[deviceIndex].selectedChannels = sortedChannels;
+                        localStorage.setItem('savedDevices', JSON.stringify(savedPorts));
+                    }
                 }
+            } catch (e) {
+                console.warn('Failed to persist selected channels:', e);
             }
 
             return sortedChannels;
         });
+
+        setManuallySelected(true);
     };
 
     // Handle right arrow click (reset count and disable button if needed)