feat: control input

Author: gadomski

src/App.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./app.css";
 import Header from "./components/header";
 import { Map } from "./components/map";
@@ -9,7 +9,26 @@ import { Panel } from "./components/panel";
 import { Toaster } from "./components/ui/toaster";
 
 function App() {
-  const [href, setHref] = useState("");
+  const [href, setHref] = useState(
+    new URLSearchParams(location.search).get("href") ?? ""
+  );
+
+  useEffect(() => {
+    if (new URLSearchParams(location.search).get("href") != href) {
+      history.pushState(null, "", "?href=" + href);
+    }
+  }, [href]);
+
+  useEffect(() => {
+    function handlePopState() {
+      setHref(new URLSearchParams(location.search).get("href") ?? "");
+    }
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, []);
 
   return (
     <LayersProvider>
@@ -18,7 +37,7 @@ function App() {
       </Box>
       <Box zIndex={1}>
         <Overlay>
-          <Header setHref={setHref}></Header>
+          <Header href={href} setHref={setHref}></Header>
           <Panel href={href}></Panel>
         </Overlay>
       </Box>

src/components/header.tsx

@@ -6,7 +6,7 @@ import {
   Menu,
   Portal,
 } from "@chakra-ui/react";
-import { type Dispatch, type SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { LuSearch } from "react-icons/lu";
 
 const EXAMPLES = [
@@ -22,14 +22,36 @@ const EXAMPLES = [
 ];
 
 export default function Header({
+  href,
   setHref,
 }: {
+  href: string;
   setHref: Dispatch<SetStateAction<string>>;
 }) {
+  const [value, setValue] = useState(href);
+
+  useEffect(() => {
+    setValue(href);
+  }, [href]);
+
   return (
     <HStack py={4} pointerEvents={"auto"}>
-      <InputGroup w="full" startElement={<LuSearch></LuSearch>}>
-        <Input flex={1} variant={"subtle"} rounded={4}></Input>
+      <InputGroup
+        w="full"
+        startElement={<LuSearch></LuSearch>}
+        as={"form"}
+        onSubmit={(e) => {
+          e.preventDefault();
+          setHref(value);
+        }}
+      >
+        <Input
+          flex={1}
+          variant={"subtle"}
+          rounded={4}
+          value={value}
+          onChange={(e) => setValue(e.currentTarget.value)}
+        ></Input>
       </InputGroup>
       <Menu.Root onSelect={(details) => setHref(details.value)}>
         <Menu.Trigger asChild>

src/components/json.tsx

@@ -23,7 +23,7 @@ export function RawJsonDialogButton({
     <Dialog.Root scrollBehavior={"inside"} size={"xl"}>
       <Dialog.Trigger>
         <Tooltip content="Show raw JSON in a dialog">
-          <IconButton {...rest}>
+          <IconButton {...rest} as={"div"}>
             <LuSearchCode></LuSearchCode>
           </IconButton>
         </Tooltip>