#399

frontend/src/components/posts/import/PostImportRowForm.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
 import FieldWarning from '@/components/common/FieldWarning'
 import FormField from '@/components/common/FormField'
 import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
-import { Button } from '@/components/ui/button'
 import { useDialogue } from '@/lib/dialogues/useDialogue'
 import { inputClass } from '@/lib/utils'
 
-import type { Dispatch, FC, SetStateAction } from 'react'
+import type { FC } from 'react'
 
 import type { PostImportRow } from '@/lib/postImportSession'
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
 
 type Draft = {
   url:                   string
@@ -24,11 +24,12 @@ type Draft = {
   parentPostIds:         string }
 
 type Props = {
-  row:             PostImportRow
-  messageRow?:     PostImportRow | null
-  saving:          boolean
-  onDraftChange:   Dispatch<SetStateAction<Draft | null>>
-  onResetRequestedChange: Dispatch<SetStateAction<boolean>> }
+  row:          PostImportRow
+  controls:     DialogueFormControls
+  onSave:       (args: { draft:          Draft
+			 resetRequested: boolean }) => Promise<{
+			     saved: boolean
+			     row:   PostImportRow | null }> }
 
 const buildDraft = (row: PostImportRow): Draft => ({
     url: row.url,
@@ -66,22 +67,21 @@ const sameDraft = (left:  Draft, right: Draft): boolean =>
 
 const PostImportRowForm: FC<Props> = (
     { row,
-      messageRow,
-      saving,
-      onDraftChange,
-      onResetRequestedChange },
+      controls,
+      onSave },
 ) => {
   const dialogue = useDialogue ()
   const [draft, setDraft] = useState<Draft> (() => buildDraft (row))
+  const [messageRow, setMessageRow] = useState<PostImportRow | null> (null)
+  const [saving, setSaving] = useState (false)
   const [resetRequested, setResetRequested] = useState (false)
 
   useEffect (() => {
     const nextDraft = buildDraft (row)
     setDraft (nextDraft)
+    setMessageRow (null)
     setResetRequested (false)
-    onDraftChange (nextDraft)
-    onResetRequestedChange (false)
-  }, [onDraftChange, onResetRequestedChange, row])
+  }, [row])
 
   const displayRow = messageRow ?? row
   const resetDraft = buildResetDraft (row)
@@ -91,16 +91,14 @@ const PostImportRowForm: FC<Props> = (
       key:   Key,
       value: Draft[Key],
   ) => {
-    setDraft (current => {
-	const next = { ...current, [key]: value }
-	onDraftChange (next)
-	return next
-    })
+    if (messageRow != null)
+      setMessageRow (null)
+    setDraft (current => ({ ...current, [key]: value }))
   }
 
-  const reset = async () => {
+  const reset = useCallback (async (): Promise<boolean> => {
     if (resetDisabled)
-      return
+      return false
 
     const confirmed = await dialogue.confirm ({
 	title: '変更をリセットしますか?',
@@ -109,22 +107,48 @@ const PostImportRowForm: FC<Props> = (
 	cancelText: '取消',
 	variant: 'danger' })
     if (!(confirmed))
-      return
+      return false
 
     setDraft (resetDraft)
     setResetRequested (true)
-    onDraftChange (resetDraft)
-    onResetRequestedChange (true)
-  }
+    setMessageRow (null)
+    return false
+  }, [dialogue, resetDisabled, resetDraft])
+
+  const save = useCallback (async (): Promise<boolean> => {
+    setSaving (true)
+    try
+      {
+	const result = await onSave ({ draft, resetRequested })
+	if (result.saved)
+	  return true
+
+	if (result.row != null)
+	  setMessageRow (result.row)
+	return false
+      }
+    finally
+      {
+	setSaving (false)
+      }
+  }, [draft, onSave, resetRequested])
+
+  useEffect (() => {
+    controls.setActions ([{
+	label: '変更をリセット',
+	variant: 'danger',
+	disabled: resetDisabled,
+	onSelect: reset },
+	{
+	  label: '編輯内容を保存',
+	  disabled: saving,
+	  onSelect: save }])
+  }, [controls, resetDisabled, reset, save, saving])
 
   return (
       <>
-	<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6">
+	<div className="px-6 pb-6">
 	  <div className="space-y-4">
-	    <p className="text-sm text-muted-foreground">
-	      投稿 {row.sourceRow} の内容を確認し、必要な項目を編輯してください．
-	    </p>
-
 	    <div className="grid gap-6 md:grid-cols-[7rem_minmax(0,1fr)]">
 	      <div className="space-y-3">
 		<ThumbnailPreview
@@ -196,16 +220,6 @@ const PostImportRowForm: FC<Props> = (
 		<FieldWarning messages={displayRow.baseWarnings}/>
 		<FieldError messages={displayRow.validationErrors.base}/>
 		<FieldError messages={displayRow.importErrors?.base}/>
-
-		<div className="pt-2">
-		  <Button
-		      type="button"
-		      variant="destructive"
-		      onClick={() => reset ()}
-		      disabled={resetDisabled}>
-		    変更をリセット
-		  </Button>
-		</div>
 	      </div>
 	    </div>
 	  </div>
@@ -259,4 +273,3 @@ const PostImportAreaField = (
 export default PostImportRowForm
 export { buildDraft }
 export type { Draft as PostImportRowDraft }
-export type { Draft as PostImportRowDraft }