#399

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
@@ -32,18 +32,23 @@ const MAX_ROWS = 100
 const SOURCE_ERROR_ID = 'post-import-source-error'
 const SOURCE_ISSUES_ID = 'post-import-source-issues'
 
+const urlIssuesFromRows = (rows: PostImportRow[]) =>
+    rows.flatMap (row =>
+	(row.validationErrors.url ?? []).map (message => ({
+	    sourceRow: row.sourceRow,
+	    message,
+	    url: row.url })))
+
 
 const PostImportSourcePage: FC<Props> = ({ user }) => {
     const editable = canEditContent (user)
     const navigate = useNavigate ()
-    const draft = useMemo (() => loadPostImportSourceDraft (message =>
-	toast ({ title: '保存済み入力を復元できませんでした', description: message })), [])
-
-    const [source, setSource] = useState (draft.source)
+    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 messages = sourceError ? [sourceError] : []
@@ -56,6 +61,13 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
     useEffect (() => {
 	cleanupExpiredPostImportSessions (message =>
 	    toast ({ title: '保存済みデータを整理できませんでした', description: message }))
+
+	const draft = loadPostImportSourceDraft (message =>
+	    toast ({ title: '保存済み入力を復元できませんでした', description: message }))
+	if (!(editedRef.current))
+	  {
+	    setSource (current => current === '' ? draft.source : current)
+	  }
     }, [])
 
     useEffect (() => {
@@ -94,6 +106,12 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 	{
 	    const data = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/preview', {
 		source })
+	    const urlIssues = urlIssuesFromRows (data.rows)
+	    if (urlIssues.length > 0)
+	      {
+		setSourceIssues (urlIssues)
+		return
+	      }
 	    const sessionId = createPostImportSessionId ()
 	    const saved = savePostImportSession (sessionId, {
 		source,
@@ -154,6 +172,7 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 				      description: message }))
 			  }}
 			  onChange={ev => {
+			      editedRef.current = true
 			      setSource (ev.target.value)
 			      setSourceError (null)
 			      setSourceIssues ([])