広場投稿追加画面の刷新 (#399) (#413)

Reviewed-on: http://git.miteruzo.com/miteruzo/btrc-hub/pulls/413
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useNavigate } from 'react-router-dom'
+
+import FieldError from '@/components/common/FieldError'
+import Form from '@/components/common/Form'
+import FormField from '@/components/common/FormField'
+import PageTitle from '@/components/common/PageTitle'
+import TextArea from '@/components/common/TextArea'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import {
+    buildPostNewReviewPath,
+    isPostNewReviewPathWithinLimit,
+} from '@/lib/postNewQueryState'
+import {
+    countImportSourceLines,
+    extractImportSourceUrls,
+    validateImportSource,
+} from '@/lib/postImportSourceValidation'
+import {
+    loadPostImportSourceDraft,
+    savePostImportSourceDraft,
+} from '@/lib/postImportStorage'
+import { canEditContent } from '@/lib/users'
+import Forbidden from '@/pages/Forbidden'
+
+import type { FC } from 'react'
+
+import type { User } from '@/types'
+
+type Props = { user: User | null }
+
+const MAX_ROWS = 100
+const SOURCE_ERROR_ID = 'post-import-source-error'
+const SOURCE_ISSUES_ID = 'post-import-source-issues'
+
+
+const PostImportSourcePage: FC<Props> = ({ user }) => {
+  const editable = canEditContent (user)
+  const navigate = useNavigate ()
+  const [source, setSource] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [sourceIssues, setSourceIssues] = useState<ReturnType<typeof validateImportSource>> ([])
+  const [sourceError, setSourceError] = useState<string | null> (null)
+  const saveTimer = useRef<number | null> (null)
+  const editedRef = useRef (false)
+
+  const lineCount = countImportSourceLines (source)
+  const sourceUrls = extractImportSourceUrls (source)
+  const withinPathLimit = isPostNewReviewPathWithinLimit (sourceUrls)
+  const messages = sourceError != null ? [sourceError] : []
+  const sourceDescribedBy =
+      [sourceError != null ? SOURCE_ERROR_ID : null,
+       sourceIssues.length > 0 ? SOURCE_ISSUES_ID : null]
+      .filter (value => value != null)
+      .join (' ')
+
+  useEffect (() => {
+    const draft = loadPostImportSourceDraft (message =>
+	toast ({ title: '保存済み入力を復元できませんでした', description: message }))
+
+    if (!(editedRef.current))
+      {
+	setSource (current =>
+	    current === ''
+	    ? draft.source
+	    : current)
+      }
+  }, [])
+
+  useEffect (() => {
+    if (saveTimer.current != null)
+      window.clearTimeout (saveTimer.current)
+
+    saveTimer.current = window.setTimeout (() => {
+      savePostImportSourceDraft (source, message =>
+	  toast ({ title: '入力内容を保存できませんでした', description: message }))
+    }, 300)
+
+    return () => {
+      if (saveTimer.current != null)
+	window.clearTimeout (saveTimer.current)
+    }
+  }, [source])
+
+  const preview = async () => {
+    if (lineCount === 0)
+      {
+	setSourceIssues ([])
+	setSourceError ('URL を入力してください．')
+	return
+      }
+
+    const issues = validateImportSource (source)
+    if (issues.length > 0)
+      {
+	setSourceIssues (issues)
+	setSourceError (null)
+	return
+      }
+    if (!(withinPathLimit))
+      return
+
+    setLoading (true)
+    setSourceIssues ([])
+    setSourceError (null)
+    try
+    {
+      navigate (buildPostNewReviewPath (sourceUrls))
+    }
+    finally
+    {
+      setLoading (false)
+    }
+  }
+
+  if (!(editable))
+	return <Forbidden/>
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<Form className="max-w-4xl">
+	  <PageTitle>広場に投稿を追加</PageTitle>
+	  <FormField label="URL リスト（1 行 1 URL）">
+	    {() => (
+		<TextArea
+		    value={source}
+		    rows={14}
+		    invalid={messages.length > 0 || sourceIssues.length > 0}
+		    aria-describedby={sourceDescribedBy || undefined}
+		    className="h-80 font-mono text-sm"
+		    onBlur={() => {
+		      savePostImportSourceDraft (source, message =>
+			  toast ({
+			      title: '入力内容を保存できませんでした',
+			      description: message }))
+		    }}
+		    onChange={ev => {
+		      editedRef.current = true
+		      setSource (ev.target.value)
+		      setSourceError (null)
+		      setSourceIssues ([])
+		    }}/>)}
+	  </FormField>
+	  <div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
+	    <FieldError messages={messages}/>
+	  </div>
+	  <ul
+	      id={SOURCE_ISSUES_ID}
+	      className="space-y-2 text-sm text-red-700 dark:text-red-300">
+	    {sourceIssues.map (issue => (
+		<li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
+		  <div>{issue.sourceRow} 行目: {issue.message}</div>
+		  <div className="break-all font-mono text-xs">{issue.url}</div>
+		</li>))}
+	  </ul>
+
+	  <div className="relative z-10 flex items-center justify-between gap-3">
+	    <div className="text-sm text-neutral-600 dark:text-neutral-300">
+	      入力行数 {lineCount} / {MAX_ROWS}
+	    </div>
+	    <Button
+		type="button"
+		className="pointer-events-auto shrink-0"
+		onClick={preview}
+		disabled={loading || !(withinPathLimit)}>
+	      次へ
+	    </Button>
+	  </div>
+	</Form>
+      </MainArea>)
+}
+
+export default PostImportSourcePage