58 行
1.7 KiB
TypeScript
58 行
1.7 KiB
TypeScript
import type { FC } from 'react'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useLocation, useParams } from 'react-router-dom'
|
|
|
|
import { useLocale } from '@/lib/useLocale'
|
|
import { useUITranslation } from '@/lib/useUITranslation'
|
|
import PageTitle from '@/components/common/PageTitle'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import PageHead from '@/components/common/PageHead'
|
|
import { apiGet } from '@/lib/api'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
import type { WikiPageDiff } from '@/types'
|
|
|
|
|
|
const WikiDiffPage: FC = () => {
|
|
const { message, label } = useUITranslation ('wiki')
|
|
const locale = useLocale ()
|
|
const { id } = useParams ()
|
|
|
|
const location = useLocation ()
|
|
|
|
const [diff, setDiff] = useState<WikiPageDiff | null> (null)
|
|
|
|
const query = new URLSearchParams (location.search)
|
|
const from = query.get ('from')
|
|
const to = query.get ('to')
|
|
const displayTitle = diff
|
|
? `${ diff.title }${ diff.deprecatedAt != null
|
|
? message ('shared:labels.deprecatedSuffix').text : '' }`
|
|
: ''
|
|
|
|
useEffect (() => {
|
|
void (async () => {
|
|
setDiff (await apiGet<WikiPageDiff> (`/wiki/${ id }/diff`, { locale, params: { from, to } }))
|
|
}) ()
|
|
}, [from, id, to, locale])
|
|
|
|
return (
|
|
<MainArea>
|
|
<PageHead title={message ('diffTitle', { title: displayTitle })}/>
|
|
<PageTitle>{displayTitle}</PageTitle>
|
|
<div className="prose mx-auto p-4">
|
|
{diff
|
|
? (
|
|
diff.diff.map (d => (
|
|
<p className={cn (d.type === 'added' && 'bg-green-200 dark:bg-green-800',
|
|
d.type === 'removed' && 'bg-red-200 dark:bg-red-800')}>
|
|
{d.content}
|
|
</p>)))
|
|
: label ('common:loading')}
|
|
</div>
|
|
</MainArea>)
|
|
}
|
|
|
|
export default WikiDiffPage
|