feat: 別名タグをサジェストに展開（#28） (#244)

#28 件数 0 件除外をついでに対応（フロントのみ；バックエンドは後で対応）

#28

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: https://git.miteruzo.com/miteruzo/btrc-hub/pulls/244

frontend/src/components/PostFormTagsArea.tsx

@@ -60,7 +60,8 @@ export default (({ tags, setTags }: Props) => {
     const { start, end, token } = getTokenAt (v, pos)
     setBounds ({ start, end })
     const res = await axios.get (`${ API_BASE_URL }/tags/autocomplete`, { params: { q: token } })
-    setSuggestions (toCamel (res.data as any, { deep: true }) as Tag[])
+    const data = toCamel (res.data as any, { deep: true }) as Tag[]
+    setSuggestions (data.filter (t => t.postCount > 0))
     setSuggestionsVsbl (suggestions.length > 0)
   }
 

frontend/src/components/TagLink.tsx

@@ -91,6 +91,13 @@ export default (({ tag,
 		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
 	      ↳
 	    </span>)}
+	{tag.matchedAlias != null && (
+	    <>
+	      <span className={spanClass} {...props}>
+		{tag.matchedAlias}
+	      </span>
+	      <> → </>
+	    </>)}
 	{linkFlg
 	 ? (
 	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}

frontend/src/components/TagSearch.tsx

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import toCamel from 'camelcase-keys'
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
@@ -31,8 +32,8 @@ export default (() => {
       }
 
     const res = await axios.get (`${ API_BASE_URL }/tags/autocomplete`, { params: { q } })
-    const data = res.data as Tag[]
-    setSuggestions (data)
+    const data = toCamel (res.data, { deep: true }) as Tag[]
+    setSuggestions (data.filter (t => t.postCount > 0))
     if (suggestions.length > 0)
       setSuggestionsVsbl (true)
   }

frontend/src/components/TagSearchBox.tsx

@@ -1,3 +1,4 @@
+import TagLink from '@/components/TagLink'
 import { cn } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -22,8 +23,7 @@ export default (({ suggestions, activeIndex, onSelect }: Props) => {
 		className={cn ('px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700', 
 			       i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
 		onMouseDown={() => onSelect (tag)}>
-	      {tag.name}
-	      {<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
+	      <TagLink tag={tag} linkFlg={false} withWiki={false}/>
 	    </li>))}
       </ul>)
 }) satisfies FC<Props>

frontend/src/types.ts

@@ -44,12 +44,13 @@ export type SubMenuItem =
 	visible?: boolean }
 
 export type Tag = {
-    id:         number
-    name:       string
-    category:   Category
-    postCount:  number
-    hasWiki:    boolean
-    children?:  Tag[] }
+    id:             number
+    name:           string
+    category:       Category
+    postCount:      number
+    hasWiki:        boolean
+    children?:      Tag[]
+    matchedAlias?:  string | null }
 
 export type User = {
     id:               number