From 14e606ddb43c6707097ebf33606dea7323fdfbe4 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Mon, 17 Jan 2022 11:25:10 +0800
Subject: [PATCH] Add search page * add search box go to search page

---
 components/info-bar/SearchBox.tsx | 51 ++++++++++++++++++++++++++++---
 pages/search.tsx                  | 22 +++++++++++++
 2 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 pages/search.tsx

diff --git a/components/info-bar/SearchBox.tsx b/components/info-bar/SearchBox.tsx
index aaa4326..c6872d7 100644
--- a/components/info-bar/SearchBox.tsx
+++ b/components/info-bar/SearchBox.tsx
@@ -1,18 +1,56 @@
-import { FC } from 'react';
+import {
+  ChangeEventHandler,
+  FC,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import cn from 'classnames';
 import { FiSearch } from 'react-icons/fi';
+import { useRouter } from 'next/router';
 
 const SearchBox: FC = () => {
+  // Add keyboad event to foucs input element.
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('');
+
+  const router = useRouter();
+
+  const handleSlash = useCallback((e: KeyboardEvent) => {
+    if (e.key !== '/' || e.code !== 'Slash') return;
+    inputRef.current?.focus();
+  }, []);
+
+  const handleInput: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+
+  const handleSearch: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      if (e.key !== 'Enter') return;
+      router.push({ pathname: 'search', query: { q: value } });
+    },
+    [router, value]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleSlash);
+    return () => window.removeEventListener('keyup', handleSlash);
+  }, [handleSlash]);
+
   return (
     <>
-      <div className="relative">
+      <div className="relative text-gray-700">
         <FiSearch
           className={cn(
-            'absolute z-10 w-[22px] h-[22px] text-gray-700',
+            'absolute z-10 w-[22px] h-[22px]',
             'left-4 top-[50%] transform-gpu translate-y-[-50%]'
           )}
         />
         <input
+          ref={inputRef}
           type="text"
           placeholder="Search"
           className={cn(
@@ -21,12 +59,15 @@ const SearchBox: FC = () => {
             'focus:px-5 focus:shadow-md focus:placeholder:font-normal',
             'duration-300 transition-all focus:z-20'
           )}
+          value={value}
+          onChange={handleInput}
+          onKeyUp={handleSearch}
         />
         <div
           className={cn(
             'absolute z-10 border flex px-1 rounded',
-            'text-gray-700 font-semibold',
-            'right-4 top-[50%] transform-gpu translate-y-[-50%]'
+            'right-4 top-[50%] font-semibold',
+            'transform-gpu translate-y-[-50%]'
           )}
         >
           <code>/</code>
diff --git a/pages/search.tsx b/pages/search.tsx
new file mode 100644
index 0000000..e9a747d
--- /dev/null
+++ b/pages/search.tsx
@@ -0,0 +1,22 @@
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+import dynamic from 'next/dynamic';
+
+const MainLayout = dynamic(() => import('layouts/MainLayout'));
+
+const Search = () => {
+  const router = useRouter();
+  const { q } = router.query;
+
+  return (
+    <>
+      <code>{q}</code>
+    </>
+  );
+};
+
+Search.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Search;