104 行
2.9 KiB
TypeScript
104 行
2.9 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
import { useLocale } from '@/lib/useLocale'
|
|
import { useUITranslation } from '@/lib/useUITranslation'
|
|
import PrefetchLink from '@/components/PrefetchLink'
|
|
import FormField from '@/components/common/FormField'
|
|
import PageTitle from '@/components/common/PageTitle'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import PageHead from '@/components/common/PageHead'
|
|
import { apiGet } from '@/lib/api'
|
|
import { dateString, inputClass } from '@/lib/utils'
|
|
|
|
import type { FormEvent , FC } from 'react'
|
|
|
|
import type { WikiPage } from '@/types'
|
|
|
|
|
|
const WikiSearchPage: FC = () => {
|
|
const { message, label } = useUITranslation ('shared')
|
|
const locale = useLocale ()
|
|
const [title, setTitle] = useState ('')
|
|
const [text, setText] = useState ('')
|
|
const [results, setResults] = useState<WikiPage[]> ([])
|
|
|
|
const search = async () => {
|
|
setResults (await apiGet ('/wiki', { locale, params: { title } }))
|
|
}
|
|
|
|
const handleSearch = (ev: FormEvent) => {
|
|
ev.preventDefault ()
|
|
search ()
|
|
}
|
|
|
|
useEffect (() => {
|
|
void (async () => {
|
|
setResults (await apiGet ('/wiki', { locale, params: { title: '' } }))
|
|
}) ()
|
|
}, [locale])
|
|
|
|
return (
|
|
<MainArea>
|
|
<PageHead title={message ('navigation:wiki')}/>
|
|
|
|
<div className="max-w-xl">
|
|
<PageTitle>{label ('navigation:wiki')}</PageTitle>
|
|
<form onSubmit={handleSearch} className="space-y-2">
|
|
{/* タイトル */}
|
|
<FormField label={label ('labels.title')}>
|
|
{({ invalid }) => (
|
|
<input type="text"
|
|
value={title}
|
|
onChange={e => setTitle (e.target.value)}
|
|
className={inputClass (invalid)}/>)}
|
|
</FormField>
|
|
|
|
{/* 内容 */}
|
|
<FormField label={label ('labels.content')}>
|
|
{({ invalid }) => (
|
|
<input type="text"
|
|
value={text}
|
|
onChange={e => setText (e.target.value)}
|
|
className={inputClass (invalid)}/>)}
|
|
</FormField>
|
|
|
|
{/* 検索 */}
|
|
<div className="py-3">
|
|
<button type="submit"
|
|
className="bg-blue-500 text-white px-4 py-2 rounded">
|
|
{label ('common:search')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<table className="table-auto w-full border-collapse">
|
|
<thead className="border-b-2 border-black dark:border-white">
|
|
<tr>
|
|
<th className="p-2 text-left">{label ('labels.title')}</th>
|
|
<th className="p-2 text-left">{label ('labels.lastUpdated')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{results.map (page => (
|
|
<tr key={`${ page.resourceType }:${ page.id }`}
|
|
className="even:bg-gray-100 dark:even:bg-gray-700">
|
|
<td className="p-2">
|
|
<PrefetchLink to={`/wiki/${ encodeURIComponent (page.title) }`}>
|
|
{page.title}
|
|
</PrefetchLink>
|
|
{page.deprecatedAt != null && label ('labels.deprecatedSuffix')}
|
|
</td>
|
|
<td className="p-2">
|
|
{dateString (page.updatedAt)}
|
|
</td>
|
|
</tr>))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</MainArea>)
|
|
}
|
|
|
|
export default WikiSearchPage
|