diff --git a/src/components/molecules/UrlForm.tsx b/src/components/molecules/UrlForm.tsx index f790bcfa..9853d64a 100644 --- a/src/components/molecules/UrlForm.tsx +++ b/src/components/molecules/UrlForm.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import type { SyntheticEvent } from 'react'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; import { NavBarForm, NavBarInput } from "../atoms/form"; @@ -6,8 +6,6 @@ import { UrlFormButton } from "../atoms/buttons/buttons"; import { useSocketStore } from '../../context/socket'; import { Socket } from "socket.io-client"; -// TODO: Bring back REFRESH - type Props = { currentAddress: string; handleRefresh: (socket: Socket) => void; @@ -19,7 +17,6 @@ export const UrlForm = ({ handleRefresh, setCurrentAddress, }: Props) => { - // Internal address state, initially set to currentAddress. We need this else the input field will not update with recordingUrl const [address, setAddress] = useState(currentAddress); const { socket } = useSocketStore(); @@ -27,15 +24,7 @@ export const UrlForm = ({ setAddress((event.target as HTMLInputElement).value); }, []); - const onSubmit = (event: SyntheticEvent): void => { - event.preventDefault(); - let url = address; - - // If no manual change, use the currentAddress prop - if (address === currentAddress) { - url = currentAddress; - } - + const submitForm = useCallback((url: string): void => { // Add protocol if missing if (!/^(?:f|ht)tps?\:\/\//.test(url)) { url = "https://" + url; @@ -49,12 +38,20 @@ export const UrlForm = ({ } catch (e) { alert(`ERROR: ${url} is not a valid url!`); } + }, [setCurrentAddress]); + + const onSubmit = (event: SyntheticEvent): void => { + event.preventDefault(); + submitForm(address); }; - // Sync internal state with currentAddress prop when it changes + // Sync internal state with currentAddress prop when it changes and auto-submit useEffect(() => { setAddress(currentAddress); - }, [currentAddress]); + if (currentAddress !== '') { + submitForm(currentAddress); + } + }, [currentAddress, submitForm]); return ( @@ -68,4 +65,4 @@ export const UrlForm = ({ ); -}; +}; \ No newline at end of file