#44 完了

frontend/src/components/TagDetailSidebar.tsx

@@ -4,10 +4,11 @@ import { Link, useParams } from 'react-router-dom'
 import { API_BASE_URL } from '@/config'
 import TagSearch from './TagSearch'
 import SidebarComponent from './layout/SidebarComponent'
+import { CATEGORIES } from '@/consts'
 
-import type { Post, Tag } from '@/types'
+import type { Category, Post, Tag } from '@/types'
 
-type TagByCategory = { [key: string]: Tag[] }
+type TagByCategory = { [key: Category]: Tag[] }
 
 type Props = { post: Post | null }
 
@@ -15,7 +16,7 @@ type Props = { post: Post | null }
 export default ({ post }: Props) => {
   const [tags, setTags] = useState<TagByCategory> ({ })
 
-  const categoryNames: { [key: string]: string } = {
+  const categoryNames: { [key: Category]: string } = {
       general:    '一般',
       deerjikist: 'ニジラー',
       nico:       'ニコニコタグ' }
@@ -43,7 +44,7 @@ export default ({ post }: Props) => {
   return (
       <SidebarComponent>
         <TagSearch />
-        {['general', 'deerjikist', 'nico'].map (cat => cat in tags && (
+        {CATEGORIES.map ((cat: Category) => cat in tags && (
             <>
               <h2>{categoryNames[cat]}</h2>
               <ul>

frontend/src/components/TagSearch.tsx

@@ -8,8 +8,8 @@ import type { Tag } from '@/types'
 
 
 const TagSearch: React.FC = () => {
-  const navigate = useNavigate ()
   const location = useLocation ()
+  const navigate = useNavigate ()
 
   const [search, setSearch] = useState ('')
   const [suggestions, setSuggestions] = useState<Tag[]> ([])

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>