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

Merged
みてるぞ merged 2 commits from feature/028 into main 2 weeks ago
  1. +2
    -1
      frontend/src/components/PostFormTagsArea.tsx
  2. +7
    -0
      frontend/src/components/TagLink.tsx
  3. +3
    -2
      frontend/src/components/TagSearch.tsx
  4. +2
    -2
      frontend/src/components/TagSearchBox.tsx
  5. +2
    -1
      frontend/src/types.ts

+ 2
- 1
frontend/src/components/PostFormTagsArea.tsx View File

@@ -60,7 +60,8 @@ export default (({ tags, setTags }: Props) => {
const { start, end, token } = getTokenAt (v, pos) const { start, end, token } = getTokenAt (v, pos)
setBounds ({ start, end }) setBounds ({ start, end })
const res = await axios.get (`${ API_BASE_URL }/tags/autocomplete`, { params: { q: token } }) 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) setSuggestionsVsbl (suggestions.length > 0)
} }




+ 7
- 0
frontend/src/components/TagLink.tsx View File

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


+ 3
- 2
frontend/src/components/TagSearch.tsx View File

@@ -1,4 +1,5 @@
import axios from 'axios' import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom' 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 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) if (suggestions.length > 0)
setSuggestionsVsbl (true) setSuggestionsVsbl (true)
} }


+ 2
- 2
frontend/src/components/TagSearchBox.tsx View File

@@ -1,3 +1,4 @@
import TagLink from '@/components/TagLink'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'


import type { FC } from 'react' 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', 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')} i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
onMouseDown={() => onSelect (tag)}> 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>))} </li>))}
</ul>) </ul>)
}) satisfies FC<Props> }) satisfies FC<Props>

+ 2
- 1
frontend/src/types.ts View File

@@ -49,7 +49,8 @@ export type Tag = {
category: Category category: Category
postCount: number postCount: number
hasWiki: boolean hasWiki: boolean
children?: Tag[] }
children?: Tag[]
matchedAlias?: string | null }


export type User = { export type User = {
id: number id: number


Loading…
Cancel
Save