#44 完了

frontend/src/components/TopNav.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Link, useLocation, useParams } from 'react-router-dom'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import SettingsDialogue from './SettingsDialogue'
 import { Button } from './ui/button'
 import clsx from 'clsx'
@@ -19,10 +19,15 @@ const enum Menu { None,
 
 const TopNav: React.FC = ({ user, setUser }: Props) => {
   const location = useLocation ()
+  const navigate = useNavigate ()
 
-  const [settingsVisible, setSettingsVisible] = useState (false)
+  const [settingsVsbl, setSettingsVsbl] = useState (false)
   const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
   const [wikiId, setWikiId] = useState (WikiIdBus.get ())
+  const [wikiSearch, setWikiSearch] = useState ('')
+  const [activeIndex, setActiveIndex] = useState (-1)
+  const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
   const MyLink = ({ to, title, menu, base }: { to:    string
                                                title: string
@@ -35,7 +40,32 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
         {title}
       </Link>)
 
-  useEffect (() => WikiIdBus.subscribe (setWikiId), [])
+  const whenWikiSearchChanged = e => {
+    setWikiSearch (e.target.value)
+
+    const q: string = e.target.value.split (' ').at (-1)
+    if (!(q))
+      {
+        setSuggestions ([])
+        return
+      }
+    // void (axios.get(`${ API_BASE_URL }/`))
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && wikiSearch.length && (!(suggestionsVsbl) || activeIndex < 0))
+      {
+        navigate (`/wiki/${ encodeURIComponent (wikiSearch) }`)
+        setSuggestionsVsbl (false)
+      }
+  }
+
+  const handleTagSelect = (tag: Tag) => {
+  }
+
+  useEffect (() => {
+    WikiIdBus.subscribe (setWikiId)
+  }, [])
 
   useEffect (() => {
     if (location.pathname.startsWith ('/posts'))
@@ -61,9 +91,9 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
             <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
           </div>
           <div className="ml-auto pr-4">
-            <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
-            <SettingsDialogue visible={settingsVisible}
-                              onVisibleChange={setSettingsVisible}
+            <Button onClick={() => setSettingsVsbl (true)}>{user?.name || '名もなきニジラー'}</Button>
+            <SettingsDialogue visible={settingsVsbl}
+                              onVisibleChange={setSettingsVsbl}
                               user={user}
                               setUser={setUser} />
           </div>
@@ -84,8 +114,14 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
           case Menu.Wiki:
             return (
                 <div className={className}>
-                  <input className={inputBox}
-                         placeholder="Wiki 検索" />
+                  <input type="text"
+                         className={inputBox}
+                         placeholder="Wiki 検索"
+                         value={wikiSearch}
+                         onChange={whenWikiSearchChanged}
+                         onFocus={() => setSuggestionsVsbl (true)}
+                         onBlur={() => setSuggestionsVsbl (false)}
+                         onKeyDown={handleKeyDown} />
                   <Link to="/wiki" className={subClass}>検索</Link>
                   <Link to="/wiki/new" className={subClass}>新規</Link>
                   <Link to="/wiki/changes" className={subClass}>全体履歴</Link>