#399

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -2,9 +2,10 @@ import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
+import CommonDialogue from '@/components/dialogues/CommonDialogue'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import PostImportRowDialog from '@/components/posts/import/PostImportRowDialog'
+import PostImportRowForm from '@/components/posts/import/PostImportRowForm'
 import PostImportRowSummary from '@/components/posts/import/PostImportRowSummary'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
@@ -23,6 +24,7 @@ import Forbidden from '@/pages/Forbidden'
 
 import type { FC } from 'react'
 
+import type { PostImportRowDraft } from '@/components/posts/import/PostImportRowForm'
 import type { PostImportResultRow,
 	      PostImportRow,
 	      PostImportSession } from '@/lib/postImportSession'
@@ -30,16 +32,6 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
-type Draft = {
-    url:                   string
-    title:                 string
-    thumbnailBase:         string
-    originalCreatedFrom:   string
-    originalCreatedBefore: string
-    duration:              string
-    tags:                  string
-    parentPostIds:         string }
-
 
 const PostImportReviewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
@@ -51,7 +43,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
   const [loading, setLoading] = useState (false)
   const [missing, setMissing] = useState (false)
   const [savingRow, setSavingRow] = useState<number | null> (null)
-  const [dialogMessageRow, setDialogMessageRow] = useState<PostImportRow | null> (null)
+  const [dialogueMessageRow, setDialogueMessageRow] = useState<PostImportRow | null> (null)
 
   useEffect (() => {
     if (sessionId == null)
@@ -105,12 +97,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
   useEffect (() => {
     if (editingRow == null)
       {
-	setDialogMessageRow (null)
+	setDialogueMessageRow (null)
 	return
       }
-    if (dialogMessageRow?.sourceRow !== editingRow.sourceRow)
-      setDialogMessageRow (null)
-  }, [editingRow, dialogMessageRow])
+    if (dialogueMessageRow?.sourceRow !== editingRow.sourceRow)
+      setDialogueMessageRow (null)
+  }, [editingRow, dialogueMessageRow])
 
   const updateSessionRows = (nextRows: PostImportRow[]) =>
       setSession (current =>
@@ -118,7 +110,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 
   const saveDraft = async (
       { draft, resetRequested, resetSnapshot }: {
-	  draft:            Draft
+	  draft:            PostImportRowDraft
 	  resetRequested:   boolean
 	  resetSnapshot:    PostImportRow['resetSnapshot'] },
   ): Promise<boolean> => {
@@ -166,11 +158,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
       const target = validatedRows.find (row => row.sourceRow === editingRow.sourceRow)
       if (target != null && Object.keys (target.validationErrors).length > 0)
 	{
-	  setDialogMessageRow (target)
+	  setDialogueMessageRow (target)
 	  return false
 	}
       updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
-      setDialogMessageRow (null)
+      setDialogueMessageRow (null)
       setSearchParams ({ })
       return true
     }
@@ -209,7 +201,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
       if (firstInvalid != null)
 	{
 	  setSession ({ ...session, rows: mergedRows })
-	  setDialogMessageRow (firstInvalid)
+	  setDialogueMessageRow (firstInvalid)
 	  setSearchParams ({ edit: String (firstInvalid.sourceRow) })
 	  return
 	}
@@ -250,7 +242,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 				  rows: nextRows,
 				  repairMode: 'failed' as const }
 	  setSession (repairSession)
-	  setDialogMessageRow (firstRecoverable)
+	  setDialogueMessageRow (firstRecoverable)
 	  const saved = savePostImportSession (sessionId, repairSession, message =>
 	      toast ({ title: '取込状態を保存できませんでした', description: message }))
 	  if (saved)
@@ -323,16 +315,25 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	    onBack={() => navigate ('/posts/import')}
 	    onSubmit={submit}/>
 
-	<PostImportRowDialog
-	    open={editingRow != null}
-	    row={editingRow}
-	    messageRow={dialogMessageRow}
-	    saving={savingRow != null}
-	    onOpenChange={open => {
-	      if (!open)
-		setSearchParams ({ })
-	    }}
-	    onSave={saveDraft}/>
+	{editingRow != null && (
+	    <CommonDialogue
+		open={true}
+		onOpenChange={open => {
+		  if (!open)
+		    setSearchParams ({ })
+		}}
+		title="投稿を編輯"
+		description={`投稿 ${ editingRow.sourceRow } の内容を確認し、必要な項目を編輯してください．`}
+		className="flex max-h-[calc(100dvh-1rem)] max-w-3xl flex-col overflow-hidden p-0"
+		bodyClassName="contents">
+	      <PostImportRowForm
+		  key={editingRow.sourceRow}
+		  row={editingRow}
+		  messageRow={dialogueMessageRow}
+		  saving={savingRow != null}
+		  onCancel={() => setSearchParams ({ })}
+		  onSave={saveDraft}/>
+	    </CommonDialogue>)}
       </>)
 }
 
@@ -375,7 +376,7 @@ const PostImportFooter = (
 
 const buildNextEditedRow = (
     editingRow:  PostImportRow,
-    draft:       Draft,
+    draft:       PostImportRowDraft,
     urlChanged:  boolean,
 ): PostImportRow => {
     const nextProvenance = { ...editingRow.provenance }