#399

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
-	  resetSnapshot:    PostImportRow['resetSnapshot'] },
+	  resetRequested:   boolean },
   ): Promise<{ saved: boolean
 	       row:   PostImportRow | null }> => {
-    if (session == null)
-      return { saved: false, row: null }
-
-    if (editingRow == null)
+    const currentSession = sessionRef.current
+    if (currentSession == null)
       return { saved: false, row: null }
 
     const baseRow =
 	resetRequested
-	? { ...editingRow,
-	    url: resetSnapshot.url,
-	    attributes: { ...resetSnapshot.attributes },
-	    provenance: { ...resetSnapshot.provenance },
-	    tagSources: { ...resetSnapshot.tagSources },
+	? { ...row,
+	    url: row.resetSnapshot.url,
+	    attributes: { ...row.resetSnapshot.attributes },
+	    provenance: { ...row.resetSnapshot.provenance },
+	    tagSources: { ...row.resetSnapshot.tagSources },
 	    fieldWarnings: Object.fromEntries (
-		Object.entries (resetSnapshot.fieldWarnings)
+		Object.entries (row.resetSnapshot.fieldWarnings)
 		    .map (([key, values]) => [key, [...values]])),
-	    baseWarnings: [...resetSnapshot.baseWarnings],
-	    metadataUrl: resetSnapshot.metadataUrl }
-	: editingRow
+	    baseWarnings: [...row.resetSnapshot.baseWarnings],
+	    metadataUrl: row.resetSnapshot.metadataUrl }
+	: row
     const urlChanged = draft.url !== baseRow.url
     const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
 
-    const nextRows = session.rows.map (row =>
-		row.sourceRow === editingRow.sourceRow
+    const nextRows = currentSession.rows.map (row =>
+		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 ({
-	    draft,
-	    resetRequested,
-	    resetSnapshot: row.resetSnapshot })
+	saveDraft (row, { draft, resetRequested })
 
     await dialogue.form ({
 	title: '投稿を編輯',
@@ -179,15 +173,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 		row={row}
 		controls={controls}
 		onSave={saveRowDraft}/>) })
-    setSearchParams ({ })
   }
 
-  useEffect (() => {
-    if (editingRow == null)
-      return
-
-    void openEditingDialogue (editingRow)
-  }, [editingRow])
+  const editRow = async (row: PostImportRow) => {
+    setEditingRow (row)
+    try
+    {
+      await openEditingDialogue (row)
+    }
+    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 })
-	  setSearchParams ({ edit: String (firstInvalid.sourceRow) })
+	  const nextSession = { ...session, rows: mergedRows }
+	  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={() => {
-			  setSearchParams ({ edit: String (row.sourceRow) })
-			}}/>
+			onEdit={() => void editRow (row)}/>
 		  </div>))}
 	    </div>
 	  </div>