miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 61 Pull リクエスト 1 リリース Wiki アクティビティ

#399

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-16 21:45:02 +09:00
親 cde0a2deae
コミット 66c738cbff
26個のファイルの変更，1083行の追加，951行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/pages/posts/PostImportReviewPage.tsx
+251 -107
ファイルの表示
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useNavigate, useParams } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
@@ -11,10 +11,12 @@ 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 { loadPostImportSession,
import { clearPostImportSession,
clearPostImportSourceDraft,
loadPostImportSession,
buildNextEditedRow,
canEditReviewRow,
canRetryResultRow,
creatableImportRows,
hasExactSourceRows,
initialisePreviewRows,
@@ -24,8 +26,11 @@ import { loadPostImportSession,
processableImportRows,
replaceImportRow,
resultRepairMode,
resultRowMessages,
reviewSummaryCounts,
retryImportRow,
savePostImportSession } from '@/lib/postImportSession'
import { canEditContent } from '@/lib/users'
import Forbidden from '@/pages/Forbidden'
import type { FC } from 'react'
@@ -49,31 +54,23 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const dialogue = useDialogue ()
const navigate = useNavigate ()
const { sessionId } = useParams ()
const [session, setSession] = useState<PostImportSession | null> (null)
const [loading, setLoading] = useState (false)
const [missing, setMissing] = useState (false)
const [loadingRow, setLoadingRow] = useState<number | null> (null)
const [editingRow, setEditingRow] = useState<PostImportRow | null> (null)
const sessionRef = useRef<PostImportSession | null> (null)
useEffect (() => {
if (sessionId == null)
return
const loaded = loadPostImportSession (sessionId, message =>
const loaded = loadPostImportSession (message =>
toast ({ title: '取込状態を復元できませんでした', description: message }))
if (loaded == null)
{
navigate ('/posts/new', { replace: true })
return
}
setSession (loaded)
setMissing (loaded == null)
}, [sessionId])
useEffect (() => {
if (sessionId == null || session == null)
return
savePostImportSession (sessionId, session, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
}, [session, sessionId])
}, [navigate])
useEffect (() => {
sessionRef.current = session
@@ -96,6 +93,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
return aRepair - bRepair || a.sourceRow - b.sourceRow
}))
: rows
const busy = loading || loadingRow != null
const persistSession = (nextSession: PostImportSession) => {
sessionRef.current = nextSession
setSession (nextSession)
savePostImportSession (nextSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
}
const finishImport = () => {
clearPostImportSession (message =>
toast ({ title: '取込状態を削除できませんでした', description: message }))
clearPostImportSourceDraft (message =>
toast ({ title: '入力内容を削除できませんでした', description: message }))
navigate ('/posts')
}
useEffect (() => {
if (editingRow == null || session?.repairMode !== 'failed')
@@ -108,8 +121,8 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const saveDraft = async (
row: PostImportRow,
{ draft, resetRequested }: {
draft: PostImportRowDraft
resetRequested: boolean },
draft: PostImportRowDraft
resetRequested: boolean },
): Promise<{ saved: boolean
row: PostImportRow | null }> => {
const currentSession = sessionRef.current
@@ -133,55 +146,52 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
: row
const urlChanged = draft.url !== baseRow.url
const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
const nextRows = currentSession.rows.map (row =>
row.sourceRow === baseRow.sourceRow
const nextRows = currentSession.rows.map (currentRow =>
currentRow.sourceRow === baseRow.sourceRow
? nextRow
: row)
: currentRow)
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 })),
.filter (currentRow => currentRow.importStatus !== 'created')
.map (currentRow => ({
sourceRow: currentRow.sourceRow,
url: currentRow.url,
attributes: currentRow.attributes,
provenance: currentRow.provenance,
tagSources: currentRow.tagSources,
metadataUrl: currentRow.metadataUrl })),
changed_row: urlChanged ? baseRow.sourceRow : -1 })
const validatedRows = initialisePreviewRows (validated.rows)
const target = validatedRows.find (
validatedRow => validatedRow.sourceRow === baseRow.sourceRow)
validatedRow => validatedRow.sourceRow === baseRow.sourceRow)
const latestSession = sessionRef.current
if (latestSession == null)
return { saved: false, row: null }
return { saved: false, row: null }
if (target == null)
{
const restoredRows = replaceImportRow (latestSession.rows, row)
const restoredSession = {
{
const restoredRows = replaceImportRow (latestSession.rows, row)
persistSession ({
...latestSession,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) }
sessionRef.current = restoredSession
setSession (restoredSession)
toast ({ title: '行の再検証結果が不完全でした' })
return { saved: false, row: null }
}
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '行の再検証結果が不完全でした' })
return { saved: false, row: null }
}
const editedRows = replaceImportRow (latestSession.rows, nextRow)
const rows = mergeValidatedImportRow (editedRows, target)
const mergedRows = mergeValidatedImportRow (editedRows, target)
const nextSession = {
...latestSession,
rows,
repairMode: resultRepairMode (rows) }
sessionRef.current = nextSession
setSession (nextSession)
rows: mergedRows,
repairMode: resultRepairMode (mergedRows) }
persistSession (nextSession)
const mergedTarget =
rows.find (mergedRow => mergedRow.sourceRow === baseRow.sourceRow)
?? target
mergedRows.find (mergedRow => mergedRow.sourceRow === baseRow.sourceRow)
?? target
if (Object.keys (mergedTarget.validationErrors).length > 0)
return { saved: false, row: mergedTarget }
return { saved: false, row: mergedTarget }
return { saved: true, row: null }
}
catch
@@ -220,49 +230,197 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
finally
{
setEditingRow (current =>
current?.sourceRow === row.sourceRow
? null
: current)
current?.sourceRow === row.sourceRow
? null
: current)
}
}
const retry = async (sourceRow: number) => {
if (busy)
return
const initialSession = sessionRef.current
if (initialSession == null)
return
setLoadingRow (sourceRow)
const originalRow = initialSession.rows.find (row => row.sourceRow === sourceRow)
if (originalRow == null)
{
setLoadingRow (null)
return
}
try
{
const pendingRows = retryImportRow (initialSession.rows, sourceRow)
const pendingSession = { ...initialSession, rows: pendingRows }
persistSession (pendingSession)
const requestedRows = pendingRows.filter (row => row.importStatus !== 'created')
const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
rows: requestedRows.map (row => ({
sourceRow: row.sourceRow,
url: row.url,
attributes: row.attributes,
provenance: row.provenance,
tagSources: row.tagSources,
metadataUrl: row.metadataUrl })),
changed_row: -1 })
const validatedRows = initialisePreviewRows (validated.rows)
if (!(hasExactSourceRows (requestedRows.map (row => row.sourceRow), validatedRows)))
{
const latest = sessionRef.current ?? pendingSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
persistSession ({
...latest,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '再検証結果が不完全でした' })
return
}
const validatedTarget = validatedRows.find (row => row.sourceRow === sourceRow)
if (validatedTarget == null)
{
const latest = sessionRef.current ?? pendingSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
persistSession ({
...latest,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '再検証結果が不完全でした' })
return
}
const latestAfterValidate = sessionRef.current ?? pendingSession
const mergedValidatedRows = mergeValidatedImportRow (
latestAfterValidate.rows,
validatedTarget)
const nextSession = {
...latestAfterValidate,
rows: mergedValidatedRows,
repairMode: resultRepairMode (mergedValidatedRows) }
persistSession (nextSession)
const target = mergedValidatedRows.find (row => row.sourceRow === sourceRow)
if (target == null)
{
const restoredRows = replaceImportRow (latestAfterValidate.rows, originalRow)
persistSession ({
...latestAfterValidate,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '再検証結果が不完全でした' })
return
}
if (Object.keys (target.validationErrors ?? { }).length > 0)
{
void editRow (target)
return
}
const result = await apiPost<{
created: number
skipped: number
failed: number
rows: PostImportResultRow[] }> ('/posts/import', {
rows: [{
sourceRow: target.sourceRow,
url: target.url,
attributes: target.attributes,
provenance: target.provenance,
tagSources: target.tagSources,
metadataUrl: target.metadataUrl }] })
if (!(hasExactSourceRows ([sourceRow], result.rows)))
{
const latest = sessionRef.current ?? nextSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
persistSession ({
...latest,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '登録結果が不完全でした' })
return
}
const latestAfterImport = sessionRef.current ?? nextSession
const mergedRows = mergeImportResults (latestAfterImport.rows, result.rows)
const recoverableRows = result.rows.filter (row =>
row.status === 'failed'
&& row.recoverable
&& Object.keys (row.errors ?? { }).length > 0)
const nextRows = mergedRows.map ((row): PostImportRow => {
const recoverable = recoverableRows.find (
failedRow => failedRow.sourceRow === row.sourceRow)
if (recoverable == null)
return row
return {
...row,
importStatus: 'pending',
recoverable: true,
validationErrors: recoverable.errors ?? { },
importErrors: undefined }
})
const resultSession = {
...latestAfterImport,
rows: nextRows,
repairMode: resultRepairMode (nextRows) }
persistSession (resultSession)
if (nextRows.every (row =>
row.importStatus === 'created' || row.importStatus === 'skipped'))
{
finishImport ()
return
}
}
catch
{
const latest = sessionRef.current ?? initialSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
persistSession ({
...latest,
rows: restoredRows,
repairMode: resultRepairMode (restoredRows) })
toast ({ title: '再試行に失敗しました' })
}
finally
{
setLoadingRow (null)
}
}
const submit = async () => {
const currentSession = sessionRef.current
if (sessionId == null || currentSession == null || processable.length === 0)
if (currentSession == null || processable.length === 0 || busy)
return
setLoading (true)
try
{
const validatableRows =
currentSession.rows.filter (row => row.importStatus !== 'created')
currentSession.rows.filter (row => row.importStatus !== 'created')
const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
rows:
validatableRows.map (row => ({ sourceRow: row.sourceRow,
url: row.url,
attributes: row.attributes,
provenance: row.provenance,
tagSources: row.tagSources,
metadataUrl: row.metadataUrl })),
validatableRows.map (row => ({
sourceRow: row.sourceRow,
url: row.url,
attributes: row.attributes,
provenance: row.provenance,
tagSources: row.tagSources,
metadataUrl: row.metadataUrl })),
changed_row: -1 })
const validatedRows = initialisePreviewRows (validated.rows)
const expectedSourceRows = validatableRows.map (row => row.sourceRow)
if (!(hasExactSourceRows (expectedSourceRows, validatedRows)))
{
toast ({ title: '再検証結果が不完全でした' })
return
}
{
toast ({ title: '再検証結果が不完全でした' })
return
}
const latestAfterValidate = sessionRef.current ?? currentSession
const mergedRows = mergeValidatedImportRows (latestAfterValidate.rows, validatedRows)
const firstInvalid = mergedRows.find (row => Object.keys (row.validationErrors).length > 0)
if (firstInvalid != null)
{
const nextSession = {
persistSession ({
...latestAfterValidate,
rows: mergedRows,
repairMode: resultRepairMode (mergedRows) }
sessionRef.current = nextSession
setSession (nextSession)
repairMode: resultRepairMode (mergedRows) })
void editRow (firstInvalid)
return
}
@@ -270,12 +428,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
...latestAfterValidate,
rows: mergedRows,
repairMode: resultRepairMode (mergedRows) }
sessionRef.current = validatedSession
setSession (validatedSession)
const savedValidated = savePostImportSession (sessionId, validatedSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (!(savedValidated))
return
persistSession (validatedSession)
const result = await apiPost<{
created: number
@@ -302,7 +455,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
&& row.recoverable
&& Object.keys (row.errors ?? { }).length > 0)
const nextRows = mergedResults.map ((row): PostImportRow => {
const recoverable = recoverableRows.find (rr => rr.sourceRow === row.sourceRow)
const recoverable = recoverableRows.find (failedRow => failedRow.sourceRow === row.sourceRow)
if (recoverable == null)
return row
return {
@@ -316,13 +469,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
...latestAfterImport,
rows: nextRows,
repairMode: resultRepairMode (nextRows) }
sessionRef.current = nextSession
setSession (nextSession)
const saved = savePostImportSession (sessionId, nextSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (!(saved))
return
navigate (`/posts/import/${ sessionId }/result`)
persistSession (nextSession)
if (nextRows.every (row =>
row.importStatus === 'created' || row.importStatus === 'skipped'))
{
finishImport ()
}
}
catch
{
@@ -337,19 +489,8 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
if (!(editable))
return <Forbidden/>
if (missing || sessionId == null || session == null)
{
return (
<MainArea>
<div className="mx-auto max-w-4xl space-y-4 p-4">
<PageTitle>投稿インポート</PageTitle>
<div className="text-red-700 dark:text-red-300">取込状態が見つかりません．</div>
<Button type="button" onClick={() => navigate ('/posts/import')}>
URL リスト入力へ戻る
</Button>
</div>
</MainArea>)
}
if (session == null)
return null
return (
<>
@@ -366,19 +507,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
<div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
<PostImportRowSummary
row={row}
editDisabled={loading}
onEdit={() => void editRow (row)}/>
editDisabled={busy}
retryDisabled={busy}
onEdit={() => void editRow (row)}
onRetry={canRetryResultRow (row) ? () => void retry (row.sourceRow) : undefined}
rowMessages={resultRowMessages (row)}/>
</div>))}
</div>
</div>
</MainArea>
<PostImportFooter
loading={loading}
loading={busy}
processableCount={processable.length}
creatableCount={creatable.length}
skipPlannedCount={counts.skipPlanned}
onBack={() => navigate ('/posts/import')}
onBack={() => navigate ('/posts/new')}
onSubmit={submit}/>
</>)
}
@@ -389,12 +533,12 @@ const PostImportFooter = (
creatableCount,
skipPlannedCount,
onBack,
onSubmit }: { loading: boolean
processableCount: number
creatableCount: number
skipPlannedCount: number
onBack: () => void
onSubmit: () => void },
onSubmit }: { loading: boolean
processableCount: number
creatableCount: number
skipPlannedCount: number
onBack: () => void
onSubmit: () => void },
) => (
<div
className="shrink-0 border-t bg-white/95 p-4 backdrop-blur