feat: url form for browser nav

src/components/molecules/UrlForm.tsx

@@ -0,0 +1,73 @@
+import {useState, useCallback, useEffect,} 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';
+import {Socket} from "socket.io-client";
+
+type Props = {
+    currentAddress: string;
+    handleRefresh: (socket: Socket) => void;
+    setCurrentAddress: (address: string) => void;
+};
+
+export const UrlForm = ({
+    currentAddress,
+    handleRefresh,
+    setCurrentAddress,
+}: Props) => {
+    // states:
+    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 (!/^(?:f|ht)tps?\:\/\//.test(address)) {
+            url = "https://" + address;
+            setAddress(url);
+        }
+
+        if (areSameAddresses) {
+            if (socket) {
+                handleRefresh(socket);
+            }
+        } else {
+            try {
+                // try the validity of url
+                new URL(url);
+                setCurrentAddress(url);
+            } catch (e) {
+                alert(`ERROR: ${url} is not a valid url!`);
+            }
+        }
+    };
+
+    useEffect(() => {
+        setAddress(currentAddress)
+    }, [currentAddress]);
+
+    return (
+        <NavBarForm onSubmit={onSubmit}>
+            <NavBarInput
+                type="text"
+                value={address}
+                onChange={onChange}
+            />
+            <UrlFormButton type="submit">
+                <KeyboardArrowRightIcon/>
+            </UrlFormButton>
+        </NavBarForm>
+    );
+};