#399

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
@@ -13,11 +13,12 @@ import { apiPost, isApiError } from '@/lib/api'
 import { canEditContent } from '@/lib/users'
 import { inputClass } from '@/lib/utils'
 import { countImportSourceLines,
-	 countImportSourceValidLines,
+	 cleanupExpiredPostImportSessions,
 	 createPostImportSessionId,
 	 loadPostImportSourceDraft,
 	 savePostImportSession,
 	 savePostImportSourceDraft,
+	 validateImportSource,
 	 type PostImportRow } from '@/lib/postImportSession'
 import Forbidden from '@/pages/Forbidden'
 
@@ -33,38 +34,58 @@ const MAX_ROWS = 100
 const PostImportSourcePage: FC<Props> = ({ user }) => {
     const editable = canEditContent (user)
     const navigate = useNavigate ()
-    const draft = useMemo (() => loadPostImportSourceDraft (), [])
+    const draft = useMemo (() => loadPostImportSourceDraft (message =>
+	toast ({ title: '保存済み入力を復元できませんでした', description: message })), [])
 
     const [source, setSource] = useState (draft.source)
-    const [existing, setExisting] = useState<'skip' | 'error'> (draft.existing)
     const [loading, setLoading] = useState (false)
     const [error, setError] = useState<string | null> (null)
+    const [touched, setTouched] = useState (false)
+    const saveTimer = useRef<number | null> (null)
 
     const lineCount = countImportSourceLines (source)
-    const validLineCount = countImportSourceValidLines (source)
+    const issues = useMemo (() => validateImportSource (source), [source])
     const messages = [
-	...(lineCount === 0 ? ['URL を入力してください．'] : []),
-	...(lineCount > MAX_ROWS ? [`最大 ${ MAX_ROWS } 件までです．`] : []),
+	...(((touched) && lineCount === 0) ? ['URL を入力してください．'] : []),
 	...(error ? [error] : [])]
 
     useEffect (() => {
-	savePostImportSourceDraft (source, existing)
-    }, [existing, source])
+	cleanupExpiredPostImportSessions (message =>
+	    toast ({ title: '保存済みデータを整理できませんでした', description: message }))
+    }, [])
+
+    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 () => {
+	setTouched (true)
+	if (lineCount === 0 || issues.length > 0)
+	  return
+
 	setLoading (true)
 	setError (null)
 	try
 	{
 	    const data = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/preview', {
-		source,
-		existing })
+		source })
 	    const sessionId = createPostImportSessionId ()
-	    savePostImportSession (sessionId, {
+	    const saved = savePostImportSession (sessionId, {
 		source,
-		existing,
 		rows: data.rows,
-		repairMode: 'all' })
+		repairMode: 'all' }, message =>
+		toast ({ title: '取込状態を保存できませんでした', description: message }))
+	    if (!(saved))
+	      return
 	    navigate (`/posts/import/${ sessionId }/review`)
 	}
 	catch (requestError)
@@ -99,48 +120,50 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 	    <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
 			    dark:bg-neutral-900 md:p-6">
 	      <div className="space-y-4">
-		<div className="space-y-2">
-		  <h2 className="text-lg font-semibold">URL リストを入力</h2>
-		  <p className="text-sm text-neutral-600 dark:text-neutral-300">
-		    一行につき一つの URL を入力してください．
-		  </p>
-		</div>
-
 		<FormField label="URL リスト">
 		  {() => (
 		      <textarea
 			  value={source}
 			  rows={14}
 			  className={inputClass (
-			      messages.length > 0,
+			      messages.length > 0 || issues.length > 0,
 			      'font-mono text-sm',
 			  )}
-			  onChange={ev => setSource (ev.target.value)}/>)}
+			  onBlur={() => {
+			      setTouched (true)
+			      savePostImportSourceDraft (source, message =>
+				  toast ({
+				      title: '入力内容を保存できませんでした',
+				      description: message }))
+			  }}
+			  onChange={ev => {
+			      setSource (ev.target.value)
+			      setError (null)
+			  }}/>)}
 		</FormField>
 		<FieldError messages={messages}/>
+		<div className="space-y-2">
+		  {issues.map (issue => (
+		      <div
+			  key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}
+			  className="rounded-md border border-red-300 bg-red-50 p-3 text-sm
+				     text-red-700 dark:border-red-900 dark:bg-red-950
+				     dark:text-red-200">
+			<div>{issue.sourceRow} 行目: {issue.message}</div>
+			<div className="mt-1 break-all font-mono text-xs">{issue.url}</div>
+		      </div>))}
+		</div>
 
 		<div className="flex flex-wrap items-center justify-between gap-3 text-sm
 				text-neutral-600 dark:text-neutral-300">
-		  <div>有効行数: {validLineCount}</div>
-		  <div>最大 {MAX_ROWS} 件</div>
+		  <div>入力件数 {lineCount} / {MAX_ROWS}</div>
 		</div>
 
-		<label className="block space-y-1">
-		  <span className="text-sm font-medium">既存投稿</span>
-		  <select
-		      value={existing}
-		      onChange={ev => setExisting (ev.target.value as typeof existing)}
-		      className={inputClass (false, 'w-full md:w-auto')}>
-		    <option value="skip">スキップ</option>
-		    <option value="error">エラー</option>
-		  </select>
-		</label>
-
 		<div className="flex justify-end">
 		  <Button
 		      type="button"
 		      onClick={preview}
-		      disabled={loading || lineCount === 0 || lineCount > MAX_ROWS}>
+		      disabled={loading || lineCount === 0 || issues.length > 0}>
 		    投稿情報を取得
 		  </Button>
 		</div>