feat: ensure manual & programmatic url works

src/components/molecules/UrlForm.tsx

@@ -1,7 +1,6 @@
-import { useState, useCallback, useEffect, } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-import type { SyntheticEvent, } from 'react';
+import type { SyntheticEvent } from 'react';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-
 import { NavBarForm, NavBarInput } from "../atoms/form";
 import { UrlFormButton } from "../atoms/buttons/buttons";
 import { useSocketStore } from '../../context/socket';
@@ -18,44 +17,41 @@ export const UrlForm = ({
     handleRefresh,
     setCurrentAddress,
 }: Props) => {
-    // states:
+    // Internal address state, initially set to currentAddress. We need this else the input field will not update with recordingUrl 
     const [address, setAddress] = useState<string>(currentAddress);
-    // context:
     const { socket } = useSocketStore();
 
-    const areSameAddresses = address === currentAddress;
-
     const onChange = useCallback((event: SyntheticEvent): void => {
         setAddress((event.target as HTMLInputElement).value);
-    }, [address]);
+    }, []);
 
     const onSubmit = (event: SyntheticEvent): void => {
         event.preventDefault();
         let url = address;
 
-        // add protocol if missing
+        // If no manual change, use the currentAddress prop
-        if (!/^(?:f|ht)tps?\:\/\//.test(address)) {
+        if (address === currentAddress) {
-            url = "https://" + address;
+            url = currentAddress;
-            setAddress(url);
         }
 
-        if (areSameAddresses) {
+        // Add protocol if missing
-            if (socket) {
+        if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
-                handleRefresh(socket);
+            url = "https://" + url;
-            }
+            setAddress(url);  // Update the input field to reflect protocol addition
-        } else {
+        }
-            try {
+
-                // try the validity of url
+        try {
-                new URL(url);
+            // Validate the URL
-                setCurrentAddress(url);
+            new URL(url);
-            } catch (e) {
+            setCurrentAddress(url); 
-                alert(`ERROR: ${url} is not a valid url!`);
+        } catch (e) {
-            }
+            alert(`ERROR: ${url} is not a valid url!`);
         }
     };
 
+    // Sync internal state with currentAddress prop when it changes
     useEffect(() => {
-        setAddress(currentAddress)
+        setAddress(currentAddress);
     }, [currentAddress]);
 
     return (