Fix some Javascript warnings (esphome#872)

* Remove unused vars

* Fix import/no-anonymous-default-export in useClickOutside hook

* Remove onSearchStateChange on Algolia InstantSearch

* Move search client creation outside of component

---------

Co-authored-by: Sherman Koa <koa@fb.com>

src/components/search/index.js

@@ -5,12 +5,6 @@ import SearchBox from "./search-box";
 import SearchResult from "./search-result";
 import useClickOutside from "./use-click-outside";
 
-const theme = {
-  foreground: "#050505",
-  background: "white",
-  faded: "#888",
-};
-
 export default function SearchButton({ indices }) {
   const [showSearch, setShowSearch] = useState(false);
 
@@ -37,14 +31,14 @@ export default function SearchButton({ indices }) {
   );
 }
 
+const searchClient = algoliasearch(
+  process.env.GATSBY_ALGOLIA_APP_ID,
+  process.env.GATSBY_ALGOLIA_SEARCH
+);
+
 function Search({ indices }) {
   const rootRef = createRef();
-  const [query, setQuery] = useState("");
   const [hasFocus, setFocus] = useState(true);
-  const searchClient = algoliasearch(
-    process.env.GATSBY_ALGOLIA_APP_ID,
-    process.env.GATSBY_ALGOLIA_SEARCH
-  );
 
   useClickOutside(rootRef, () => setFocus(false));
 
@@ -53,9 +47,6 @@ function Search({ indices }) {
       <InstantSearch
         searchClient={searchClient}
         indexName={indices[0].name}
-        onSearchStateChange={({ query }) => {
-          setQuery(query);
-        }}
       >
         <SearchBox onFocus={() => setFocus(true)} hasFocus={hasFocus} />
         <SearchResult show={hasFocus} indices={indices} />

src/components/search/search-result.js

@@ -5,7 +5,6 @@ import {
   Highlight,
   Hits,
   Index,
-  Snippet,
   PoweredBy,
 } from "react-instantsearch-dom";
 

src/components/search/use-click-outside.js

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 const events = [`mousedown`, `touchstart`];
 
-export default (ref, onClickOutside) => {
+const useClickOutside = (ref, onClickOutside) => {
   const isOutside = (element) => !ref.current || !ref.current.contains(element);
 
   const onClick = (event) => {
@@ -21,3 +21,6 @@ export default (ref, onClickOutside) => {
     };
   });
 };
+
+
+export default useClickOutside;