From 0b43df6b7581cb13883ca84ed261c09919f65098 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 25 Nov 2021 06:44:25 -0300
Subject: [PATCH] Extract common search logic

---
 src/{Title.tsx => Header.tsx} | 39 +++++------------------------
 src/Home.tsx                  | 24 +++---------------
 src/Main.tsx                  |  4 +--
 src/search/search.ts          | 47 +++++++++++++++++++++++++++++++++--
 4 files changed, 57 insertions(+), 57 deletions(-)
 rename src/{Title.tsx => Header.tsx} (70%)

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<string>("");
-  const [canSubmit, setCanSubmit] = useState<boolean>(false);
-  const navigate = useNavigate();
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const searchTerm = e.target.value.trim();
-    setCanSubmit(searchTerm.length > 0);
-    setSearchString(searchTerm);
-  };
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    if (!canSubmit) {
-      return;
-    }
-
-    if (searchRef.current) {
-      searchRef.current.value = "";
-    }
-    search(searchString, navigate);
-  };
-
-  const searchRef = useRef<HTMLInputElement>(null);
-  useKeyboardShortcut(["/"], () => {
-    searchRef.current?.focus();
-  });
-
+  const [searchRef, handleChange, handleSubmit] = useGenericSearch();
   const [isScanning, setScanning] = useState<boolean>(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<string>("");
-  const [canSubmit, setCanSubmit] = useState<boolean>(false);
-  const navigate = useNavigate();
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const searchTerm = e.target.value.trim();
-    setCanSubmit(searchTerm.length > 0);
-    setSearchString(searchTerm);
-  };
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    if (!canSubmit) {
-      return;
-    }
-
-    search(searchString, navigate);
-  };
+  const [searchRef, handleChange, handleSubmit] = useGenericSearch();
 
   const latestBlock = useLatestBlock(provider);
   const [isScanning, setScanning] = useState<boolean>(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
           />
           <button
diff --git a/src/Main.tsx b/src/Main.tsx
index 4a8cbf4..1fe30e5 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { Outlet } from "react-router-dom";
-import Title from "./Title";
+import Header from "./Header";
 import { AppConfig, AppConfigContext } from "./useAppConfig";
 import { SourcifySource } from "./url";
 
@@ -17,7 +17,7 @@ const Main: React.FC = () => {
 
   return (
     <AppConfigContext.Provider value={appConfig}>
-      <Title />
+      <Header />
       <Outlet />
     </AppConfigContext.Provider>
   );
diff --git a/src/search/search.ts b/src/search/search.ts
index 0453a44..25bda65 100644
--- a/src/search/search.ts
+++ b/src/search/search.ts
@@ -1,7 +1,15 @@
+import {
+  ChangeEventHandler,
+  FormEventHandler,
+  RefObject,
+  useRef,
+  useState,
+} from "react";
+import { NavigateFunction, useNavigate } from "react-router";
 import { JsonRpcProvider, TransactionResponse } from "@ethersproject/providers";
 import { isAddress } from "@ethersproject/address";
 import { isHexString } from "@ethersproject/bytes";
-import { NavigateFunction } from "react-router";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 import { PAGE_SIZE } from "../params";
 import { ProcessedTransaction, TransactionChunk } from "../types";
 
@@ -198,7 +206,7 @@ export class SearchController {
   }
 }
 
-export const search = (q: string, navigate: NavigateFunction) => {
+const doSearch = (q: string, navigate: NavigateFunction) => {
   if (isAddress(q)) {
     navigate(`/address/${q}`, { replace: true });
     return;
@@ -218,3 +226,38 @@ export const search = (q: string, navigate: NavigateFunction) => {
   // Assume it is an ENS name
   navigate(`/address/${q}`);
 };
+
+export const useGenericSearch = (): [
+  RefObject<HTMLInputElement>,
+  ChangeEventHandler<HTMLInputElement>,
+  FormEventHandler<HTMLFormElement>
+] => {
+  const [searchString, setSearchString] = useState<string>("");
+  const [canSubmit, setCanSubmit] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const searchTerm = e.target.value.trim();
+    setCanSubmit(searchTerm.length > 0);
+    setSearchString(searchTerm);
+  };
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    if (!canSubmit) {
+      return;
+    }
+
+    if (searchRef.current) {
+      searchRef.current.value = "";
+    }
+    doSearch(searchString, navigate);
+  };
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  useKeyboardShortcut(["/"], () => {
+    searchRef.current?.focus();
+  });
+
+  return [searchRef, handleChange, handleSubmit];
+};