#424

frontend/src/pages/help/HelpDiffPage.tsx

@@ -0,0 +1,81 @@
+import { useQuery } from '@tanstack/react-query'
+import { Helmet } from 'react-helmet-async'
+import { useParams, useSearchParams } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { getHelpDiff } from '@/lib/help'
+import { helpKeys } from '@/lib/queryKeys'
+import { cn } from '@/lib/utils'
+import NotFound from '@/pages/NotFound'
+
+import type { FC } from 'react'
+
+const markers = { added: '+ ', removed: '- ', unchanged: '  ' }
+
+
+const HelpDiffPage: FC = () => {
+  const { identifier = '' } = useParams ()
+  const [searchParams] = useSearchParams ()
+  const from = searchParams.get ('from') ?? ''
+  const to = searchParams.get ('to') ?? ''
+  const validParams = Boolean (identifier && from && to)
+      && searchParams.getAll ('from').length === 1
+      && searchParams.getAll ('to').length === 1
+  const { data: diff, isLoading, isError } = useQuery ({
+      enabled: validParams,
+      queryKey: helpKeys.diff (identifier, 'ja', from, to),
+      queryFn: () => getHelpDiff (identifier, 'ja', from, to),
+      staleTime: Infinity })
+
+  if (!(validParams) || isError || (!(isLoading) && diff == null))
+    return <NotFound/>
+
+  const title = `${ diff?.to.title ?? identifier } (${ from } → ${ to })`
+  const path = `/help/${ encodeURIComponent (identifier) }`
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`ヘルプ 差分: ${ title } | ${ SITE_TITLE }`}</title>
+	</Helmet>
+	<PageTitle>{title}</PageTitle>
+
+	{diff
+	 ? (
+	    <>
+	      <div className="flex flex-wrap items-center gap-3">
+		<PrefetchLink to={`${ path }?edition=${ encodeURIComponent (from) }`}>
+		  {diff.from.title} ({from})
+		</PrefetchLink>
+		<span>→</span>
+		<PrefetchLink to={`${ path }?edition=${ encodeURIComponent (to) }`}>
+		  {diff.to.title} ({to})
+		</PrefetchLink>
+	      </div>
+	      <pre className="mt-4 overflow-x-auto whitespace-pre">
+		<code>
+		  {diff.lines.map ((line, index) => {
+		    const colour = cn (
+			'block text-gray-900 dark:text-gray-100',
+			line.type === 'added' && 'bg-green-200 dark:bg-green-800',
+			line.type === 'added' && 'text-green-950 dark:text-green-50',
+			line.type === 'removed' && 'bg-red-200 dark:bg-red-800',
+			line.type === 'removed' && 'text-red-950 dark:text-red-50')
+
+		    return (
+			<span key={index} className={colour}>
+			  {markers[line.type]}{line.content.replace (/\r?\n$/, '')}
+			</span>)
+		  })}
+		</code>
+	      </pre>
+	    </>)
+	 : <div>Loading...</div>}
+      </MainArea>)
+}
+
+
+export default HelpDiffPage