diff --git a/src/Title.tsx b/src/Header.tsx similarity index 70% rename from src/Title.tsx rename to src/Header.tsx index f23a92e..251e584 100644 --- a/src/Title.tsx +++ b/src/Header.tsx @@ -1,45 +1,18 @@ -import React, { useState, useRef, useContext } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import React, { useState, useContext } from "react"; +import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode"; -import useKeyboardShortcut from "use-keyboard-shortcut"; import PriceBox from "./PriceBox"; import SourcifyMenu from "./SourcifyMenu"; import { RuntimeContext } from "./useRuntime"; -import { search } from "./search/search"; +import { useGenericSearch } from "./search/search"; import Otter from "./otter.jpg"; const CameraScanner = React.lazy(() => import("./search/CameraScanner")); -const Title: React.FC = () => { +const Header: React.FC = () => { const { provider } = useContext(RuntimeContext); - const [searchString, setSearchString] = useState(""); - const [canSubmit, setCanSubmit] = useState(false); - const navigate = useNavigate(); - - const handleChange: React.ChangeEventHandler = (e) => { - const searchTerm = e.target.value.trim(); - setCanSubmit(searchTerm.length > 0); - setSearchString(searchTerm); - }; - - const handleSubmit: React.FormEventHandler = (e) => { - e.preventDefault(); - if (!canSubmit) { - return; - } - - if (searchRef.current) { - searchRef.current.value = ""; - } - search(searchString, navigate); - }; - - const searchRef = useRef(null); - useKeyboardShortcut(["/"], () => { - searchRef.current?.focus(); - }); - + const [searchRef, handleChange, handleSubmit] = useGenericSearch(); const [isScanning, setScanning] = useState(false); return ( @@ -97,4 +70,4 @@ const Title: React.FC = () => { ); }; -export default Title; +export default Header; diff --git a/src/Home.tsx b/src/Home.tsx index cdb47c9..d1d8b49 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,5 +1,5 @@ import React, { useState, useContext } from "react"; -import { NavLink, useNavigate } from "react-router-dom"; +import { NavLink } from "react-router-dom"; import { commify } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; @@ -9,30 +9,13 @@ import Timestamp from "./components/Timestamp"; import { RuntimeContext } from "./useRuntime"; import { useLatestBlock } from "./useLatestBlock"; import { blockURL } from "./url"; -import { search } from "./search/search"; +import { useGenericSearch } from "./search/search"; const CameraScanner = React.lazy(() => import("./search/CameraScanner")); const Home: React.FC = () => { const { provider } = useContext(RuntimeContext); - const [searchString, setSearchString] = useState(""); - const [canSubmit, setCanSubmit] = useState(false); - const navigate = useNavigate(); - - const handleChange: React.ChangeEventHandler = (e) => { - const searchTerm = e.target.value.trim(); - setCanSubmit(searchTerm.length > 0); - setSearchString(searchTerm); - }; - - const handleSubmit: React.FormEventHandler = (e) => { - e.preventDefault(); - if (!canSubmit) { - return; - } - - search(searchString, navigate); - }; + const [searchRef, handleChange, handleSubmit] = useGenericSearch(); const latestBlock = useLatestBlock(provider); const [isScanning, setScanning] = useState(false); @@ -58,6 +41,7 @@ const Home: React.FC = () => { size={50} placeholder="Search by address / txn hash / block number / ENS name" onChange={handleChange} + ref={searchRef} autoFocus />