#399

frontend/src/pages/posts/PostImportResultPage.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, useParams } from 'react-router-dom'
 
@@ -6,12 +6,14 @@ import FieldError from '@/components/common/FieldError'
 import PageTitle from '@/components/common/PageTitle'
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
+import PostImportRowForm from '@/components/posts/import/PostImportRowForm'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
 import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
+import useDialogue from '@/lib/dialogues/useDialogue'
 import { canEditContent } from '@/lib/users'
 import { clearPostImportSourceDraft,
 	 initialisePreviewRows,
@@ -25,6 +27,7 @@ import Forbidden from '@/pages/Forbidden'
 
 import type { FC } from 'react'
 
+import type { PostImportRowDraft } from '@/components/posts/import/PostImportRowForm'
 import type { PostImportResultRow, PostImportRow } from '@/lib/postImportSession'
 import type { PostImportSession } from '@/lib/postImportSession'
 import type { User } from '@/types'
@@ -34,15 +37,66 @@ type Props = { user: User | null }
 const rowMessages = (row: PostImportRow): string[] =>
     Object.values (row.importErrors ?? { }).flat ()
 
+const buildNextEditedRow = (
+    editingRow:  PostImportRow,
+    draft:       PostImportRowDraft,
+    urlChanged:  boolean,
+): PostImportRow => {
+    const nextProvenance = { ...editingRow.provenance }
+    const nextAttributes = { ...editingRow.attributes }
+    const nextTagSources = {
+	automatic: editingRow.tagSources?.automatic ?? '',
+	manual: editingRow.tagSources?.manual ?? '' }
+    const draftFields = [
+	['title', draft.title],
+	['thumbnailBase', draft.thumbnailBase],
+	['originalCreatedFrom', draft.originalCreatedFrom],
+	['originalCreatedBefore', draft.originalCreatedBefore],
+	['duration', draft.duration],
+	['parentPostIds', draft.parentPostIds]] as const
+    draftFields.forEach (([field, value]) => {
+	nextAttributes[field] = value
+	nextProvenance[field] =
+	    value !== String (editingRow.attributes[field] ?? '')
+	    ? 'manual'
+	    : (editingRow.provenance[field] ?? 'automatic')
+    })
+    nextAttributes.tags = draft.tags
+    if (draft.tags !== String (editingRow.attributes.tags ?? ''))
+      {
+	nextProvenance.tags = 'manual'
+	nextTagSources.manual = draft.tags
+      }
+    else
+      {
+	nextProvenance.tags = editingRow.provenance.tags ?? 'automatic'
+	nextTagSources.manual = editingRow.tagSources?.manual ?? ''
+      }
+
+    return {
+	...editingRow,
+	url: draft.url,
+	attributes: nextAttributes,
+	provenance: {
+	    ...nextProvenance,
+	    url: urlChanged ? 'manual' : (editingRow.provenance.url ?? 'manual') },
+	tagSources: nextTagSources,
+	importStatus: editingRow.importStatus === 'created' ? 'created' : 'pending',
+	importErrors: undefined }
+}
+
 
 const PostImportResultPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
+  const dialogue = useDialogue ()
   const navigate = useNavigate ()
   const { sessionId } = useParams ()
 
   const [session, setSession] = useState<PostImportSession | null> (null)
   const [missing, setMissing] = useState (false)
   const [loadingRow, setLoadingRow] = useState<number | null> (null)
+  const [, setEditingRow] = useState<PostImportRow | null> (null)
+  const sessionRef = useRef<PostImportSession | null> (null)
 
   useEffect (() => {
     if (sessionId == null)
@@ -62,10 +116,111 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 	toast ({ title: '取込状態を保存できませんでした', description: message }))
   }, [session, sessionId])
 
+  useEffect (() => {
+    sessionRef.current = session
+  }, [session])
+
   const counts = useMemo (
       () => resultSummaryCounts (session?.rows ?? []),
       [session])
 
+  const updateSessionRows = (nextRows: PostImportRow[]) =>
+      setSession (current =>
+	  current != null ? { ...current, rows: nextRows } : current)
+
+  const saveDraft = async (
+      row: PostImportRow,
+      { draft, resetRequested }: {
+	  draft:            PostImportRowDraft
+	  resetRequested:   boolean },
+  ): Promise<{ saved: boolean
+	       row:   PostImportRow | null }> => {
+    const currentSession = sessionRef.current
+    if (currentSession == null)
+      return { saved: false, row: null }
+
+    const baseRow =
+	resetRequested
+	? { ...row,
+	    url: row.resetSnapshot.url,
+	    attributes: { ...row.resetSnapshot.attributes },
+	    provenance: { ...row.resetSnapshot.provenance },
+	    tagSources: { ...row.resetSnapshot.tagSources },
+	    fieldWarnings: Object.fromEntries (
+		Object.entries (row.resetSnapshot.fieldWarnings)
+		    .map (([key, values]) => [key, [...values]])),
+	    baseWarnings: [...row.resetSnapshot.baseWarnings],
+	    metadataUrl: row.resetSnapshot.metadataUrl }
+	: row
+    const urlChanged = draft.url !== baseRow.url
+    const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
+
+    const nextRows = currentSession.rows.map (row =>
+		row.sourceRow === baseRow.sourceRow
+		? nextRow
+		: row)
+    try
+    {
+      const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
+	  rows:
+	      nextRows
+	      .filter (row => row.importStatus !== 'created')
+	      .map (row => ({ sourceRow: row.sourceRow,
+			      url: row.url,
+			      attributes: row.attributes,
+			      provenance: row.provenance,
+			      tagSources: row.tagSources,
+			      metadataUrl: row.metadataUrl })),
+	  changed_row: urlChanged ? baseRow.sourceRow : -1 })
+      const validatedRows = initialisePreviewRows (validated.rows)
+      const target = validatedRows.find (_1 => _1.sourceRow === baseRow.sourceRow)
+      if (target != null && Object.keys (target.validationErrors).length > 0)
+	return { saved: false, row: target }
+      updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
+      return { saved: true, row: null }
+    }
+    catch
+    {
+      toast ({ title: '行の再検証に失敗しました' })
+      return { saved: false, row: null }
+    }
+  }
+
+  const openEditingDialogue = async (row: PostImportRow) => {
+    const saveRowDraft = (
+	{ draft, resetRequested }: {
+	    draft:          PostImportRowDraft
+	    resetRequested: boolean },
+    ) =>
+	saveDraft (row, { draft, resetRequested })
+
+    await dialogue.form ({
+	title: '投稿を編輯',
+	description: `投稿 ${ row.sourceRow } の内容を確認し、必要な項目を編輯してください．`,
+	cancelText: '取消',
+	size: 'large',
+	body: controls => (
+	    <PostImportRowForm
+		row={row}
+		controls={controls}
+		onSave={saveRowDraft}/>) })
+  }
+
+  const editRow = async (row: PostImportRow) => {
+    setEditingRow (row)
+    try
+    {
+      await openEditingDialogue (row)
+    }
+    finally
+    {
+      setEditingRow (current =>
+          current?.sourceRow === row.sourceRow
+          ? null
+          : current)
+    }
+  }
+
   const retry = async (sourceRow: number) => {
     if (session == null || sessionId == null)
       return
@@ -93,6 +248,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
           ...session,
           rows: validatedRows,
           repairMode: 'failed' as const }
+      sessionRef.current = nextSession
       setSession (nextSession)
       const target = validatedRows.find (_1 => _1.sourceRow === sourceRow)
       if (target == null)
@@ -102,7 +258,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
           const saved = savePostImportSession (sessionId, nextSession, message =>
               toast ({ title: '取込状態を保存できませんでした', description: message }))
           if (saved)
-            navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
+            void editRow (target)
           return
         }
 
@@ -138,6 +294,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
           ...nextSession,
           rows: nextRows,
           repairMode: recoverableTarget == null ? 'all' as const : 'failed' as const }
+      sessionRef.current = resultSession
       setSession (resultSession)
       if (recoverableTarget != null
           && Object.keys (recoverableTarget.validationErrors).length > 0)
@@ -145,12 +302,13 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
           const saved = savePostImportSession (sessionId, resultSession, message =>
               toast ({ title: '取込状態を保存できませんでした', description: message }))
           if (saved)
-            navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
+            void editRow (recoverableTarget)
           return
         }
     }
     catch
     {
+      sessionRef.current = session
       setSession (session)
       toast ({ title: '再試行に失敗しました' })
     }
@@ -165,12 +323,15 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
       return
 
     const nextSession = { ...session, repairMode: 'failed' as const }
+    sessionRef.current = nextSession
     setSession (nextSession)
     const saved = savePostImportSession (sessionId, nextSession, message =>
 	toast ({ title: '取込状態を保存できませんでした', description: message }))
     if (!(saved))
       return
-    navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
+    const row = nextSession.rows.find (_1 => _1.sourceRow === sourceRow)
+    if (row != null)
+      void editRow (row)
   }
 
   if (!(editable))

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
@@ -38,11 +38,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
   const dialogue = useDialogue ()
   const navigate = useNavigate ()
   const { sessionId } = useParams ()
-  const [searchParams, setSearchParams] = useSearchParams ()
 
   const [session, setSession] = useState<PostImportSession | null> (null)
   const [loading, setLoading] = useState (false)
   const [missing, setMissing] = useState (false)
+  const [editingRow, setEditingRow] = useState<PostImportRow | null> (null)
+  const sessionRef = useRef<PostImportSession | null> (null)
 
   useEffect (() => {
     if (sessionId == null)
@@ -62,12 +63,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	toast ({ title: '取込状態を保存できませんでした', description: message }))
   }, [session, sessionId])
 
+  useEffect (() => {
+    sessionRef.current = session
+  }, [session])
+
   const rows = session?.rows ?? []
-  const editingSourceRow = Number (searchParams.get ('edit') ?? '')
-  const editingRow =
-      Number.isFinite (editingSourceRow)
-      ? rows.find (_1 => _1.sourceRow === editingSourceRow) ?? null
-      : null
   const counts = useMemo (() => reviewSummaryCounts (rows), [rows])
   const processable = useMemo (
       () => processableImportRows (rows),
@@ -98,36 +98,34 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	  current != null ? { ...current, rows: nextRows } : current)
 
   const saveDraft = async (
-      { draft, resetRequested, resetSnapshot }: {
+      row: PostImportRow,
+      { draft, resetRequested }: {
 	  draft:            PostImportRowDraft
-	  resetRequested:   boolean
+	  resetRequested:   boolean },
-	  resetSnapshot:    PostImportRow['resetSnapshot'] },
   ): Promise<{ saved: boolean
 	       row:   PostImportRow | null }> => {
-    if (session == null)
+    const currentSession = sessionRef.current
-      return { saved: false, row: null }
+    if (currentSession == null)
-
-    if (editingRow == null)
       return { saved: false, row: null }
 
     const baseRow =
 	resetRequested
-	? { ...editingRow,
+	? { ...row,
-	    url: resetSnapshot.url,
+	    url: row.resetSnapshot.url,
-	    attributes: { ...resetSnapshot.attributes },
+	    attributes: { ...row.resetSnapshot.attributes },
-	    provenance: { ...resetSnapshot.provenance },
+	    provenance: { ...row.resetSnapshot.provenance },
-	    tagSources: { ...resetSnapshot.tagSources },
+	    tagSources: { ...row.resetSnapshot.tagSources },
 	    fieldWarnings: Object.fromEntries (
-		Object.entries (resetSnapshot.fieldWarnings)
+		Object.entries (row.resetSnapshot.fieldWarnings)
 		    .map (([key, values]) => [key, [...values]])),
-	    baseWarnings: [...resetSnapshot.baseWarnings],
+	    baseWarnings: [...row.resetSnapshot.baseWarnings],
-	    metadataUrl: resetSnapshot.metadataUrl }
+	    metadataUrl: row.resetSnapshot.metadataUrl }
-	: editingRow
+	: row
     const urlChanged = draft.url !== baseRow.url
     const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
 
-    const nextRows = session.rows.map (row =>
+    const nextRows = currentSession.rows.map (row =>
-		row.sourceRow === editingRow.sourceRow
+		row.sourceRow === baseRow.sourceRow
 		? nextRow
 		: row)
     try
@@ -142,13 +140,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 			      provenance: row.provenance,
 			      tagSources: row.tagSources,
 			      metadataUrl: row.metadataUrl })),
-	  changed_row: urlChanged ? editingRow.sourceRow : -1 })
+	  changed_row: urlChanged ? baseRow.sourceRow : -1 })
       const validatedRows = initialisePreviewRows (validated.rows)
-      const target = validatedRows.find (row => row.sourceRow === editingRow.sourceRow)
+      const target = validatedRows.find (row => row.sourceRow === baseRow.sourceRow)
       if (target != null && Object.keys (target.validationErrors).length > 0)
 	return { saved: false, row: target }
       updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
-      setSearchParams ({ })
       return { saved: true, row: null }
     }
     catch
@@ -164,10 +161,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	    draft:          PostImportRowDraft
 	    resetRequested: boolean },
     ) =>
-	saveDraft ({
+	saveDraft (row, { draft, resetRequested })
-	    draft,
-	    resetRequested,
-	    resetSnapshot: row.resetSnapshot })
 
     await dialogue.form ({
 	title: '投稿を編輯',
@@ -179,15 +173,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 		row={row}
 		controls={controls}
 		onSave={saveRowDraft}/>) })
-    setSearchParams ({ })
   }
 
-  useEffect (() => {
+  const editRow = async (row: PostImportRow) => {
-    if (editingRow == null)
+    setEditingRow (row)
-      return
+    try
-
+    {
-    void openEditingDialogue (editingRow)
+      await openEditingDialogue (row)
-  }, [editingRow])
+    }
+    finally
+    {
+      setEditingRow (current =>
+          current?.sourceRow === row.sourceRow
+          ? null
+          : current)
+    }
+  }
 
   const submit = async () => {
     if (sessionId == null || session == null || processable.length === 0)
@@ -212,8 +213,10 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
       const firstInvalid = mergedRows.find (row => Object.keys (row.validationErrors).length > 0)
       if (firstInvalid != null)
 	{
-	  setSession ({ ...session, rows: mergedRows })
+	  const nextSession = { ...session, rows: mergedRows }
-	  setSearchParams ({ edit: String (firstInvalid.sourceRow) })
+	  sessionRef.current = nextSession
+	  setSession (nextSession)
+	  void editRow (firstInvalid)
 	  return
 	}
 
@@ -252,11 +255,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	  const repairSession = { ...session,
 				  rows: nextRows,
 				  repairMode: 'failed' as const }
+	  sessionRef.current = repairSession
 	  setSession (repairSession)
 	  const saved = savePostImportSession (sessionId, repairSession, message =>
 	      toast ({ title: '取込状態を保存できませんでした', description: message }))
 	  if (saved)
-	    setSearchParams ({ edit: String (firstRecoverable.sourceRow) })
+	    void editRow (firstRecoverable)
 	  return
 	}
       const nextSession = { ...session, rows: nextRows, repairMode: 'all' as const }
@@ -309,9 +313,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 		  <div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
 		    <PostImportRowSummary
 			row={row}
-			onEdit={() => {
+			onEdit={() => void editRow (row)}/>
-			  setSearchParams ({ edit: String (row.sourceRow) })
-			}}/>
 		  </div>))}
 	    </div>
 	  </div>