みてるぞ
e44887cf15
画面上でのテストは完了． 移行にす早さが求められるので，準備ができたらマージする． Reviewed-on: #430 Co-authored-by: miteruzo <miteruzo@naver.com>
107 行
3.1 KiB
TypeScript
107 行
3.1 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { Helmet } from 'react-helmet-async'
|
|
import { useLocation, useParams } from 'react-router-dom'
|
|
|
|
import PrefetchLink from '@/components/PrefetchLink'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import { SITE_TITLE } from '@/config'
|
|
import { getHelpArticle,
|
|
getHelpEditionContent,
|
|
helpEditionDate,
|
|
parseHelpEdition } from '@/lib/help'
|
|
import { dateString } from '@/lib/utils'
|
|
import { helpKeys } from '@/lib/queryKeys'
|
|
import NotFound from '@/pages/NotFound'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
|
|
const HelpDetailPage: FC = () => {
|
|
const { identifier = '' } = useParams ()
|
|
const location = useLocation ()
|
|
|
|
// Locale 対応が入るまでは ja 固定
|
|
const language = 'ja'
|
|
|
|
const { data: article, isLoading: articleLoading } = useQuery ({
|
|
queryKey: helpKeys.article (identifier),
|
|
queryFn: () => getHelpArticle (identifier),
|
|
staleTime: Infinity })
|
|
|
|
const query = new URLSearchParams (location.search)
|
|
const requestedEdition = query.get ('edition')
|
|
|
|
const languageMeta = article?.languages[language]
|
|
|
|
const edition = requestedEdition ?? languageMeta?.currentEdition
|
|
const editionInfo = parseHelpEdition (edition ?? '')
|
|
const editionDate = helpEditionDate (edition ?? '')
|
|
|
|
const editions = languageMeta?.publishedEditions ?? []
|
|
|
|
const index = edition ? editions.indexOf (edition) : -1
|
|
const pred = index > 0 ? editions[index - 1] : undefined
|
|
const succ =
|
|
index >= 0 && index < editions.length - 1
|
|
? editions[index + 1]
|
|
: undefined
|
|
|
|
const { data: current, isSuccess, isError } = useQuery ({
|
|
enabled: edition != null && editionInfo != null && editions.includes (edition),
|
|
queryKey: helpKeys.edition (identifier, language, edition ?? ''),
|
|
queryFn: () => getHelpEditionContent (identifier, language, edition ?? ''),
|
|
staleTime: Infinity })
|
|
|
|
if (!articleLoading
|
|
&& (article == null
|
|
|| languageMeta == null
|
|
|| edition == null
|
|
|| editionInfo == null
|
|
|| !(editions.includes (edition))))
|
|
return <NotFound/>
|
|
|
|
if (isError || (isSuccess && current == null))
|
|
return <NotFound/>
|
|
|
|
const Content = current?.content
|
|
|
|
return (
|
|
<MainArea>
|
|
<Helmet>
|
|
<title>{current?.title || identifier} ヘルプ | {SITE_TITLE}</title>
|
|
</Helmet>
|
|
|
|
{requestedEdition && (
|
|
<div className="text-sm flex gap-3 items-center justify-center
|
|
border border-gray-700 rounded px-2 py-1 mb-4">
|
|
{pred
|
|
? (
|
|
<PrefetchLink
|
|
to={`/help/${ encodeURIComponent (identifier) }?edition=${ pred }`}>
|
|
< 古
|
|
</PrefetchLink>)
|
|
: '(最古)'}
|
|
|
|
<span>
|
|
{editionDate != null && dateString (editionDate, 'hour')}
|
|
{editionInfo?.revision != null && ` .${ editionInfo.revision }`}
|
|
</span>
|
|
|
|
{succ
|
|
? (
|
|
<PrefetchLink
|
|
to={`/help/${ encodeURIComponent (identifier) }?edition=${ succ }`}>
|
|
新 >
|
|
</PrefetchLink>)
|
|
: '(最新)'}
|
|
</div>)}
|
|
|
|
<article className="prose dark:prose-invert mx-auto p-4">
|
|
{Content ? <Content/> : <div>Loading...</div>}
|
|
</article>
|
|
</MainArea>)
|
|
}
|
|
|
|
|
|
export default HelpDetailPage
|