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

広場投稿追加画面の刷新 (#399) #413

マージ済み
みてるぞ が 103 個のコミットを feature/399 から main へマージ 2026-07-19 00:03:11 +09:00
会話 0 コミット 103 変更されたファイル 99
+657 -2524
7個のファイルの変更，657行の追加，2524行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
コミット e0debed94e の変更だけを表示してゐます - すべてのコミットを表示
frontend/src/lib/postImportSourceValidation.ts
+34 -23
ファイルの表示
@@ -12,23 +12,14 @@ const bytesize = (value: string): number =>
new TextEncoder ().encode (value).length
const normaliseImportUrl = (value: string): string | null => {
const parseImportUrl = (value: string): URL | null => {
const trimmed = value.trim ()
if (!(trimmed))
return null
try
{
const url = new URL (trimmed)
if (!(url.protocol === 'http:' || url.protocol === 'https:'))
return null
if (!(url.host))
return null
url.hostname = url.hostname.toLowerCase ()
if (url.pathname.endsWith ('/'))
url.pathname = url.pathname.replace (/\/+$/, '')
return url.toString ()
return new URL (trimmed)
}
catch
{
@@ -37,12 +28,23 @@ const normaliseImportUrl = (value: string): string | null => {
}
export const countImportSourceLines = (source: string): number =>
const normaliseImportUrl = (url: URL): string => {
url.hostname = url.hostname.toLowerCase ()
if (url.pathname.endsWith ('/'))
url.pathname = url.pathname.replace (/\/+$/, '')
return url.toString ()
}
export const extractImportSourceUrls = (source: string): string[] =>
source
.split (/\r\n|\n|\r/)
.map (line => line.trim ())
.filter (line => line !== '')
.length
export const countImportSourceLines = (source: string): number =>
extractImportSourceUrls (source).length
export const validateImportSource = (
@@ -61,7 +63,6 @@ export const validateImportSource = (
++count
const sourceRow = index + 1
const displayUrl = truncateUrl (value)
const normalised = normaliseImportUrl (value)
if (count > MAX_ROWS)
{
issues.push ({
@@ -70,14 +71,6 @@ export const validateImportSource = (
url: displayUrl })
return
}
if (!(value.startsWith ('http://') || value.startsWith ('https://')))
{
issues.push ({
sourceRow,
message: 'HTTP または HTTPS の URL ではありません．',
url: displayUrl })
return
}
if (bytesize (value) > MAX_URL_BYTES)
{
issues.push ({
@@ -86,7 +79,8 @@ export const validateImportSource = (
url: displayUrl })
return
}
if (normalised == null)
const parsed = parseImportUrl (value)
if (parsed == null)
{
issues.push ({
sourceRow,
@@ -94,6 +88,23 @@ export const validateImportSource = (
url: displayUrl })
return
}
if (!(parsed.protocol === 'http:' || parsed.protocol === 'https:'))
{
issues.push ({
sourceRow,
message: 'HTTP または HTTPS の URL ではありません．',
url: displayUrl })
return
}
if (!(parsed.host))
{
issues.push ({
sourceRow,
message: 'URL の形式が不正です．',
url: displayUrl })
return
}
const normalised = normaliseImportUrl (parsed)
const duplicateRow = seen.get (normalised)
if (duplicateRow != null)
{
frontend/src/lib/postImportStorage.ts
+1 -695
ファイルの表示
@@ -1,107 +1,6 @@
import type { PostImportOrigin,
PostImportDisplayTag,
PostImportExistingPost,
PostImportResetSnapshot,
PostImportRow,
PostImportSession,
PostImportStatus,
PostImportSkipReason,
StorageErrorHandler } from '@/lib/postImportTypes'
import type { StorageErrorHandler } from '@/lib/postImportTypes'
const SESSION_VERSION = 3
const SESSION_PREFIX = 'post-import-session:'
const SOURCE_DRAFT_KEY = 'post-import-source-draft'
const SESSION_MAX_AGE_MS = 24 * 60 * 60 * 1000
const MAX_SESSION_JSON_BYTES = 262_144
const MAX_SESSION_ROWS = 100
const MAX_SOURCE_BYTES = 262_144
const SESSION_ID_PATTERN =
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
const ATTRIBUTE_KEYS = [
'title',
'thumbnailBase',
'originalCreatedFrom',
'originalCreatedBefore',
'duration',
'videoMs',
'tags',
'parentPostIds'] as const
const PROVENANCE_KEYS = [...ATTRIBUTE_KEYS, 'url'] as const
const TAG_SOURCE_KEYS = ['automatic', 'manual'] as const
const WARNING_KEYS = [...ATTRIBUTE_KEYS, 'url'] as const
const ROW_KEYS = [
'sourceRow',
'url',
'attributes',
'fieldWarnings',
'baseWarnings',
'validationErrors',
'importErrors',
'provenance',
'tagSources',
'status',
'skipReason',
'existingPostId',
'existingPost',
'metadataUrl',
'displayTags',
'resetSnapshot',
'createdPostId',
'importStatus',
'recoverable'] as const
const SESSION_KEYS = [
'version',
'expiresAt',
'source',
'rows',
'repairMode'] as const
const textEncoder = new TextEncoder ()
const isPlainObject = (value: unknown): value is Record<string, unknown> =>
typeof value === 'object' && value != null && !(Array.isArray (value))
const byteLength = (value: string): number =>
textEncoder.encode (value).byteLength
export const validatePostImportSessionId = (value: unknown): string | null => {
if (typeof value !== 'string')
return null
if (value.length > 36 || !(SESSION_ID_PATTERN.test (value)))
return null
return value.toLowerCase ()
}
const generateUuidV4FromRandomValues = (): string => {
const bytes = new Uint8Array (16)
crypto.getRandomValues (bytes)
bytes[6] = (bytes[6] & 0x0f) | 0x40
bytes[8] = (bytes[8] & 0x3f) | 0x80
const hex = Array.from (
bytes,
byte => byte.toString (16).padStart (2, '0'))
return [
hex.slice (0, 4).join (''),
hex.slice (4, 6).join (''),
hex.slice (6, 8).join (''),
hex.slice (8, 10).join (''),
hex.slice (10, 16).join ('')].join ('-')
}
export const generatePostImportSessionId = (): string => {
if (typeof crypto.randomUUID === 'function')
return crypto.randomUUID ()
return generateUuidV4FromRandomValues ()
}
const sessionKey = (sessionId: string): string => `${ SESSION_PREFIX }${ sessionId }`
const readStorage = (
@@ -162,531 +61,6 @@ const removeStorage = (
}
const ensureStringListRecord = (value: unknown): Record<string, string[]> | null => {
if (!(isPlainObject (value)))
return null
const result: Record<string, string[]> = { }
for (const [key, entry] of Object.entries (value))
{
if (!(Array.isArray (entry)) || !(entry.every (item => typeof item === 'string')))
return null
result[key] = entry
}
return result
}
const isValidStatus = (
value: unknown,
): value is PostImportRow['status'] =>
value === 'pending'
|| value === 'ready'
|| value === 'warning'
|| value === 'error'
const isValidImportStatus = (
value: unknown,
): value is PostImportStatus =>
value === 'pending'
|| value === 'created'
|| value === 'skipped'
|| value === 'failed'
const isValidOrigin = (
value: unknown,
): value is PostImportOrigin =>
value === 'automatic' || value === 'manual'
const isValidSkipReason = (
value: unknown,
): value is PostImportSkipReason =>
value === 'existing' || value === 'manual'
const isPositiveInteger = (value: unknown): value is number =>
Number.isSafeInteger (value) && Number (value) > 0
const isNonEmptyMessageRecord = (value: Record<string, string[]>): boolean =>
Object.values (value).some (messages => messages.length > 0)
const hasOnlyKeys = (
value: Record<string, unknown>,
allowedKeys: readonly string[],
): boolean =>
Object.keys (value).every (key => allowedKeys.includes (key))
const sanitiseDisplayTag = (value: unknown): PostImportDisplayTag | null => {
if (!(isPlainObject (value)))
return null
if (!(hasOnlyKeys (value, ['name', 'category', 'sectionLiterals'])))
return null
if (typeof value.name !== 'string' || value.name === '')
return null
if (typeof value.category !== 'string')
return null
if (!(['deerjikist',
'meme',
'character',
'general',
'material',
'meta',
'nico'] as const).includes (value.category as never))
return null
if (value.sectionLiterals != null
&& (!(Array.isArray (value.sectionLiterals))
|| !(value.sectionLiterals.every (entry => typeof entry === 'string'))))
return null
return {
name: value.name,
category: value.category,
sectionLiterals:
value.sectionLiterals == null
? undefined
: [...value.sectionLiterals] }
}
const sanitiseDisplayTags = (value: unknown): PostImportDisplayTag[] | null => {
if (value == null)
return []
if (!(Array.isArray (value)))
return null
const tags = value.map (sanitiseDisplayTag)
return tags.some (tag => tag == null) ? null : (tags as PostImportDisplayTag[])
}
const sanitiseResetSnapshot = (value: unknown): PostImportResetSnapshot | null => {
if (!(isPlainObject (value)))
return null
if (!(hasOnlyKeys (value, ['url',
'attributes',
'displayTags',
'provenance',
'tagSources',
'fieldWarnings',
'baseWarnings',
'metadataUrl'])))
return null
if (typeof value.url !== 'string')
return null
if (!(isPlainObject (value.attributes)))
return null
if (!(hasOnlyKeys (value.attributes, ATTRIBUTE_KEYS)))
return null
if (!(Object.values (value.attributes).every (entry =>
typeof entry === 'string' || typeof entry === 'number')))
return null
if (!(isPlainObject (value.provenance)))
return null
if (!(hasOnlyKeys (value.provenance, PROVENANCE_KEYS)))
return null
if (!(Object.values (value.provenance).every (origin => isValidOrigin (origin))))
return null
if (!(isPlainObject (value.tagSources)))
return null
if (!(hasOnlyKeys (value.tagSources, TAG_SOURCE_KEYS)))
return null
if (!(Object.values (value.tagSources).every (entry => typeof entry === 'string')))
return null
const fieldWarnings = ensureStringListRecord (value.fieldWarnings)
if (fieldWarnings == null)
return null
if (!(hasOnlyKeys (fieldWarnings, WARNING_KEYS)))
return null
if (!(Array.isArray (value.baseWarnings))
|| !(value.baseWarnings.every (warning => typeof warning === 'string')))
return null
if (value.metadataUrl != null && typeof value.metadataUrl !== 'string')
return null
const displayTags = sanitiseDisplayTags (value.displayTags)
if (displayTags == null)
return null
return {
url: value.url,
attributes: value.attributes as Record<string, string | number>,
displayTags,
provenance: value.provenance as Record<string, PostImportOrigin>,
tagSources: value.tagSources as Record<PostImportOrigin, string>,
fieldWarnings,
baseWarnings: value.baseWarnings,
metadataUrl: value.metadataUrl as string | undefined }
}
const sanitiseExistingPost = (value: unknown): PostImportExistingPost | undefined => {
if (value == null)
return undefined
if (!(isPlainObject (value)))
return undefined
if (!(isPositiveInteger (value.id)))
return undefined
if (typeof value.title !== 'string' || typeof value.url !== 'string')
return undefined
if (value.thumbnail !== undefined
&& value.thumbnail !== null
&& typeof value.thumbnail !== 'string')
return undefined
if (value.thumbnailBase !== undefined
&& value.thumbnailBase !== null
&& typeof value.thumbnailBase !== 'string')
return undefined
if (value.thumbnailUrl !== undefined
&& value.thumbnailUrl !== null
&& typeof value.thumbnailUrl !== 'string')
return undefined
return {
id: Number (value.id),
title: value.title,
url: value.url,
thumbnail:
value.thumbnail === null
? null
: typeof value.thumbnail === 'string'
? value.thumbnail
: value.thumbnailUrl === null
? null
: typeof value.thumbnailUrl === 'string'
? value.thumbnailUrl
: undefined,
thumbnailBase:
value.thumbnailBase === null
? null
: typeof value.thumbnailBase === 'string'
? value.thumbnailBase
: undefined }
}
const canonicalisePersistedRow = (
row: PostImportRow,
): PostImportRow | null => {
const sanitised = sanitiseRow (serialisePostImportRow (row))
return sanitised == null ? null : recalculateThumbnailWarning (sanitised)
}
const recalculateThumbnailWarning = (row: PostImportRow): PostImportRow => {
const others = (row.fieldWarnings.thumbnailBase ?? []).filter (
key => key !== 'サムネールなし')
const thumbnailBasePresent =
typeof row.attributes.thumbnailBase === 'string'
&& row.attributes.thumbnailBase.trim () !== ''
return {
...row,
fieldWarnings: {
...row.fieldWarnings,
thumbnailBase:
thumbnailBasePresent
? others
: [...new Set ([...others, 'サムネールなし'])] } }
}
const serialiseExistingPost = (value: PostImportExistingPost | undefined) =>
value == null
? undefined
: {
id: value.id,
title: value.title,
url: value.url,
thumbnail: value.thumbnail,
thumbnailBase: value.thumbnailBase }
const serialiseResetSnapshot = (value: PostImportResetSnapshot) => ({
url: value.url,
attributes: Object.fromEntries (
Object.entries (value.attributes).map (([key, entry]) => [key, entry])),
displayTags: value.displayTags.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null ? undefined : [...tag.sectionLiterals] })),
provenance: Object.fromEntries (
Object.entries (value.provenance).map (([key, entry]) => [key, entry])),
tagSources: {
automatic: value.tagSources.automatic,
manual: value.tagSources.manual },
fieldWarnings: Object.fromEntries (
Object.entries (value.fieldWarnings).map (([key, entry]) => [key, [...entry]])),
baseWarnings: [...value.baseWarnings],
metadataUrl: value.metadataUrl })
export const serialisePostImportRow = (row: PostImportRow) => {
const thumbnailBaseWarnings = (() => {
const others = (row.fieldWarnings.thumbnailBase ?? []).filter (
message => message !== 'サムネールなし')
const thumbnailBasePresent =
typeof row.attributes.thumbnailBase === 'string'
&& row.attributes.thumbnailBase.trim () !== ''
return thumbnailBasePresent
? others
: [...new Set ([...others, 'サムネールなし'])]
}) ()
return {
sourceRow: row.sourceRow,
url: row.url,
attributes: Object.fromEntries (
Object.entries (row.attributes).map (([key, entry]) => [key, entry])),
fieldWarnings: Object.fromEntries (
Object.entries ({
...row.fieldWarnings,
thumbnailBase: thumbnailBaseWarnings }).map (([key, entry]) => [key, [...entry]])),
baseWarnings: [...row.baseWarnings],
validationErrors: Object.fromEntries (
Object.entries (row.validationErrors).map (([key, entry]) => [key, [...entry]])),
importErrors:
row.importErrors == null
? undefined
: Object.fromEntries (
Object.entries (row.importErrors).map (([key, entry]) => [key, [...entry]])),
provenance: Object.fromEntries (
Object.entries (row.provenance).map (([key, entry]) => [key, entry])),
displayTags:
row.displayTags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null ? undefined : [...tag.sectionLiterals] })) ?? [],
tagSources:
row.tagSources == null
? undefined
: {
automatic: row.tagSources.automatic,
manual: row.tagSources.manual },
status: row.status,
skipReason: row.skipReason,
existingPostId: row.existingPostId,
existingPost: serialiseExistingPost (row.existingPost),
metadataUrl: row.metadataUrl,
resetSnapshot: serialiseResetSnapshot (row.resetSnapshot),
createdPostId: row.createdPostId,
importStatus: row.importStatus,
recoverable: row.recoverable }
}
export const serialisePostImportRows = (rows: PostImportRow[]) =>
rows.map (row => serialisePostImportRow (row))
export const serialisedPostImportRowsEqual = (
left: PostImportRow[],
right: PostImportRow[],
): boolean => {
const canonicalLeft = left.map (canonicalisePersistedRow)
const canonicalRight = right.map (canonicalisePersistedRow)
if (canonicalLeft.some (row => row == null) || canonicalRight.some (row => row == null))
return false
return JSON.stringify (serialisePostImportRows (canonicalLeft as PostImportRow[]))
=== JSON.stringify (serialisePostImportRows (canonicalRight as PostImportRow[]))
}
const sanitiseRow = (value: unknown): PostImportRow | null => {
if (!(isPlainObject (value)))
return null
if (!(hasOnlyKeys (value, ROW_KEYS)))
return null
if (!(Number.isInteger (value.sourceRow)) || Number (value.sourceRow) <= 0)
return null
if (typeof value.url !== 'string')
return null
if (byteLength (value.url) > 20_480)
return null
if (!(isPlainObject (value.attributes)))
return null
if (!(isPlainObject (value.provenance)))
return null
if (!(isValidStatus (value.status)))
return null
if (value.importStatus != null && !(isValidImportStatus (value.importStatus)))
return null
if (value.skipReason != null && !(isValidSkipReason (value.skipReason)))
return null
if (value.recoverable != null && value.recoverable !== true)
return null
if (value.skipReason === 'existing' && !(isPositiveInteger (value.existingPostId)))
return null
if (value.importStatus === 'created' && !(isPositiveInteger (value.createdPostId)))
return null
if (value.importStatus !== 'created' && value.createdPostId != null)
return null
if (value.recoverable === true
&& value.importStatus !== 'failed'
&& value.importStatus !== 'pending')
return null
if ((value.importStatus === 'created' || value.importStatus === 'skipped')
&& value.recoverable != null)
return null
const validationErrors = ensureStringListRecord (value.validationErrors)
const fieldWarnings = ensureStringListRecord (value.fieldWarnings)
const resetSnapshot = sanitiseResetSnapshot (value.resetSnapshot)
if (validationErrors == null || fieldWarnings == null)
return null
if (resetSnapshot == null)
return null
const importErrors =
value.importErrors == null
? undefined
: ensureStringListRecord (value.importErrors)
if (importErrors === null)
return null
if (!(Array.isArray (value.baseWarnings))
|| !(value.baseWarnings.every (warning => typeof warning === 'string')))
return null
const provenanceEntries = Object.entries (value.provenance)
if (!(hasOnlyKeys (value.attributes, ATTRIBUTE_KEYS)))
return null
if (!(Object.values (value.attributes).every (entry =>
typeof entry === 'string' || typeof entry === 'number')))
return null
if (!(hasOnlyKeys (value.provenance, PROVENANCE_KEYS)))
return null
if (!(provenanceEntries.every (([, origin]) => isValidOrigin (origin))))
return null
if (value.tagSources != null)
{
if (!(isPlainObject (value.tagSources)))
return null
if (!(hasOnlyKeys (value.tagSources, TAG_SOURCE_KEYS)))
return null
if (!(Object.values (value.tagSources).every (entry => typeof entry === 'string')))
return null
}
const displayTags = sanitiseDisplayTags (value.displayTags)
if (displayTags == null)
return null
const existingPost = sanitiseExistingPost (value.existingPost)
const existingPostId =
isPositiveInteger (value.existingPostId) ? Number (value.existingPostId) : undefined
if (existingPost != null && existingPostId == null)
return null
if (existingPost != null && existingPost.id !== existingPostId)
return null
return {
sourceRow: Number (value.sourceRow),
url: value.url,
attributes: value.attributes as Record<string, string | number>,
fieldWarnings: isNonEmptyMessageRecord (fieldWarnings) ? fieldWarnings : { },
baseWarnings: value.baseWarnings,
validationErrors: isNonEmptyMessageRecord (validationErrors) ? validationErrors : { },
importErrors:
importErrors != null && isNonEmptyMessageRecord (importErrors)
? importErrors
: undefined,
provenance: value.provenance as Record<string, PostImportOrigin>,
displayTags,
tagSources: value.tagSources as Record<PostImportOrigin, string> | undefined,
status: value.status,
skipReason: value.skipReason ?? undefined,
existingPostId,
existingPost,
metadataUrl: typeof value.metadataUrl === 'string' ? value.metadataUrl : undefined,
resetSnapshot,
createdPostId:
isPositiveInteger (value.createdPostId) ? Number (value.createdPostId) : undefined,
importStatus: value.importStatus ?? undefined,
recoverable: value.recoverable === true ? true : undefined }
}
const sanitiseSession = (value: unknown): PostImportSession | null => {
if (!(isPlainObject (value)))
return null
if (!(hasOnlyKeys (value, SESSION_KEYS)))
return null
if (value.version !== SESSION_VERSION || !(Array.isArray (value.rows)))
return null
if (value.rows.length === 0 || value.rows.length > MAX_SESSION_ROWS)
return null
if (typeof value.expiresAt !== 'string' || isExpiredSession (value.expiresAt))
return null
if (typeof value.source !== 'string' || byteLength (value.source) > MAX_SOURCE_BYTES)
return null
const rows = value.rows.map (sanitiseRow)
if (rows.some (row => row == null))
return null
if ((new Set (rows.map (row => row?.sourceRow))).size !== rows.length)
return null
return {
version: SESSION_VERSION,
expiresAt: value.expiresAt,
source: value.source,
rows: (rows as PostImportRow[]).map (row => recalculateThumbnailWarning (row)),
repairMode: value.repairMode === 'failed' ? 'failed' : 'all' }
}
const isExpiredSession = (expiresAt: string): boolean => {
const value = Date.parse (expiresAt)
return Number.isNaN (value) || value <= Date.now ()
}
export const cleanupExpiredPostImportSessions = (
onError?: StorageErrorHandler,
) => {
if (typeof window === 'undefined')
return
try
{
for (let i = 0; i < sessionStorage.length; ++i)
{
const key = sessionStorage.key (i)
if (key == null || !(key.startsWith (SESSION_PREFIX)))
continue
const sessionId = validatePostImportSessionId (key.slice (SESSION_PREFIX.length))
if (sessionId == null)
{
sessionStorage.removeItem (key)
--i
continue
}
const raw = sessionStorage.getItem (key)
if (raw == null)
continue
if (byteLength (raw) > MAX_SESSION_JSON_BYTES)
{
sessionStorage.removeItem (key)
--i
continue
}
try
{
if (sanitiseSession (JSON.parse (raw)) == null)
{
sessionStorage.removeItem (key)
--i
}
}
catch
{
sessionStorage.removeItem (key)
--i
}
}
}
catch
{
onError?.('保存済みデータを整理できませんでした．')
}
}
export const loadPostImportSourceDraft = (
onError?: StorageErrorHandler,
): { source: string } => {
@@ -718,71 +92,3 @@ export const clearPostImportSourceDraft = (
) => {
removeStorage (SOURCE_DRAFT_KEY, onError)
}
export const savePostImportSession = (
sessionId: string,
session: Omit<PostImportSession, 'version' | 'expiresAt'>,
onError?: StorageErrorHandler,
): boolean => {
const validatedId = validatePostImportSessionId (sessionId)
if (validatedId == null)
return false
return writeStorage (
sessionKey (validatedId),
JSON.stringify ({
source: session.source,
rows: serialisePostImportRows (session.rows),
repairMode: session.repairMode,
version: SESSION_VERSION,
expiresAt: new Date (Date.now () + SESSION_MAX_AGE_MS).toISOString () }),
onError)
}
export const loadPostImportSession = (
sessionId: string,
onError?: StorageErrorHandler,
): PostImportSession | null => {
const validatedId = validatePostImportSessionId (sessionId)
if (validatedId == null)
return null
const raw = readStorage (sessionKey (validatedId), onError)
if (raw == null)
return null
if (byteLength (raw) > MAX_SESSION_JSON_BYTES)
{
removeStorage (sessionKey (validatedId), onError)
return null
}
try
{
const session = sanitiseSession (JSON.parse (raw))
if (session == null)
{
removeStorage (sessionKey (validatedId), onError)
return null
}
return session
}
catch
{
removeStorage (sessionKey (validatedId), onError)
return null
}
}
export const clearPostImportSession = (
sessionId: string,
onError?: StorageErrorHandler,
) => {
const validatedId = validatePostImportSessionId (sessionId)
if (validatedId == null)
return
removeStorage (sessionKey (validatedId), onError)
}
frontend/src/lib/postImportTypes.ts
-7
ファイルの表示
@@ -79,13 +79,6 @@ export type PostImportResultRow =
errors?: Record<string, string[]>
recoverable?: boolean }
export type PostImportSession = {
version: number
expiresAt: string
source: string
rows: PostImportRow[]
repairMode: PostImportRepairMode }
export type PostImportSourceIssue = {
sourceRow: number
message: string
frontend/src/lib/postNewQueryState.ts
+31 -1088
ファイルの表示
ファイル差分が大きすぎるため省略します 差分を読込み
frontend/src/lib/useUnsavedChangesGuard.tsx
+92 -8
ファイルの表示
@@ -1,6 +1,15 @@
import { createContext, useCallback, useContext, useMemo, useState } from 'react'
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
import { useBlocker, useLocation } from 'react-router-dom'
import { useDialogue } from '@/components/dialogues/DialogueProvider'
import { useDialogue } from '@/lib/dialogues/useDialogue'
import type { FC, PropsWithChildren } from 'react'
@@ -8,12 +17,17 @@ type UnsavedChangesSource = {
dirty: boolean
discard: () => void | Promise<void> }
type UseUnsavedChangesGuardOptions = {
dirty: boolean
onDiscard?: () => void | Promise<void> }
type UnsavedChangesGuardContextValue = {
hasUnsavedChanges: boolean
registerUnsavedChangesSource: (
source: UnsavedChangesSource | null,
) => void
confirmDiscardNavigation: () => Promise<boolean> }
confirmDiscardNavigation: () => Promise<boolean>
allowNextNavigation: () => void }
const UnsavedChangesGuardContext =
createContext<UnsavedChangesGuardContextValue | null> (null)
@@ -21,7 +35,9 @@ const UnsavedChangesGuardContext =
export const UnsavedChangesGuardProvider: FC<PropsWithChildren> = ({ children }) => {
const dialogue = useDialogue ()
const location = useLocation ()
const [source, setSource] = useState<UnsavedChangesSource | null> (null)
const bypassNextNavigationRef = useRef (false)
const registerUnsavedChangesSource = useCallback ((
nextSource: UnsavedChangesSource | null,
@@ -29,28 +45,81 @@ export const UnsavedChangesGuardProvider: FC<PropsWithChildren> = ({ children })
setSource (nextSource)
}, [])
const allowNextNavigation = useCallback (() => {
bypassNextNavigationRef.current = true
}, [])
const confirmDiscardNavigation = useCallback (async (): Promise<boolean> => {
if (!(source?.dirty))
return true
const confirmed = await dialogue.confirm ({
title: '未保存の変更があります',
description: 'このまま移動すると、保存していない変更は失われます。',
cancelText: 'このページに残る',
title: '変更が破棄してページ移動しますか?',
confirmText: '変更を破棄して移動',
variant: 'danger' })
if (!(confirmed))
return false
bypassNextNavigationRef.current = true
await source.discard ()
return true
}, [dialogue, source])
const blocker = useBlocker (() =>
source?.dirty === true && !(bypassNextNavigationRef.current))
useEffect (() => {
if (blocker.state !== 'blocked')
return
let cancelled = false
void (async () => {
const confirmed = await confirmDiscardNavigation ()
if (cancelled)
return
if (confirmed)
blocker.proceed ()
else
blocker.reset ()
}) ()
return () => {
cancelled = true
}
}, [blocker, confirmDiscardNavigation])
useEffect (() => {
bypassNextNavigationRef.current = false
}, [location.hash, location.pathname, location.search])
useEffect (() => {
if (!(source?.dirty))
return
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
event.preventDefault ()
event.returnValue = ''
}
window.addEventListener ('beforeunload', handleBeforeUnload)
return () => {
window.removeEventListener ('beforeunload', handleBeforeUnload)
}
}, [source?.dirty])
const value = useMemo<UnsavedChangesGuardContextValue> (() => ({
hasUnsavedChanges: source?.dirty === true,
registerUnsavedChangesSource,
confirmDiscardNavigation,
}), [confirmDiscardNavigation, registerUnsavedChangesSource, source?.dirty])
allowNextNavigation,
}), [
allowNextNavigation,
confirmDiscardNavigation,
registerUnsavedChangesSource,
source?.dirty,
])
return (
<UnsavedChangesGuardContext.Provider value={value}>
@@ -59,11 +128,26 @@ export const UnsavedChangesGuardProvider: FC<PropsWithChildren> = ({ children })
}
export const useUnsavedChangesGuard = (): UnsavedChangesGuardContextValue => {
export const useUnsavedChangesGuard = (
options?: UseUnsavedChangesGuardOptions,
): UnsavedChangesGuardContextValue => {
const context = useContext (UnsavedChangesGuardContext)
if (context == null)
throw new Error ('UnsavedChangesGuardProvider が必要です．')
useEffect (() => {
if (options == null)
return
context.registerUnsavedChangesSource ({
dirty: options.dirty,
discard: options.onDiscard ?? (() => undefined) })
return () => {
context.registerUnsavedChangesSource (null)
}
}, [context, options?.dirty, options?.onDiscard])
return context
}
frontend/src/pages/posts/PostImportReviewPage.tsx
+271 -346
ファイルの表示
@@ -1,5 +1,5 @@
import { AnimatePresence, motion } from 'framer-motion'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { ChevronRight } from 'lucide-react'
import { useLocation, useNavigate } from 'react-router-dom'
@@ -15,22 +15,16 @@ import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPost, isApiError } from '@/lib/api'
import useDialogue from '@/lib/dialogues/useDialogue'
import {
appendPostNewSessionId,
parsePostNewState,
parsePostNewSessionId,
serialisePostNewState,
} from '@/lib/postNewQueryState'
import { parsePostNewReviewUrls } from '@/lib/postNewQueryState'
import { validateImportSource } from '@/lib/postImportSourceValidation'
import {
applyThumbnailWarning,
buildNextEditedRow,
canEditReviewRow,
canRetryResultRow,
clearPostImportSession,
clearPostImportSourceDraft,
generatePostImportSessionId,
hasThumbnailBaseValue,
compactMessageRecord,
hasErrorMessages,
hasThumbnailBaseValue,
isCompletedReviewRow,
isExistingSkipRow,
isManualSkipRow,
@@ -42,24 +36,23 @@ import {
resultRowMessages,
reviewSummaryCounts,
retryImportRow,
loadPostImportSession,
compactMessageRecord,
serialisedPostImportRowsEqual,
savePostImportSession,
} from '@/lib/postImportSession'
} from '@/lib/postImportRows'
import { clearPostImportSourceDraft } from '@/lib/postImportStorage'
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
import { cn } from '@/lib/utils'
import { canEditContent } from '@/lib/users'
import Forbidden from '@/pages/Forbidden'
import type { FC } from 'react'
import type { PostImportRowDraft } from '@/components/posts/import/PostImportRowForm'
import type {
PostImportDisplayTag,
PostImportEditableDraft,
PostImportResetSnapshot,
PostImportResultRow,
PostImportRow,
PostImportSession,
} from '@/lib/postImportSession'
} from '@/lib/postImportTypes'
import type { User } from '@/types'
type Props = { user: User | null }
@@ -74,7 +67,7 @@ type PostMetadataResponse = {
duration?: string
videoMs?: number
tags?: string
displayTags?: PostImportRow['displayTags']
displayTags?: PostImportDisplayTag[]
fieldWarnings?: Record<string, string[]>
baseWarnings?: string[]
validationErrors?: Record<string, string[]>
@@ -106,18 +99,101 @@ type ExistingSkippedRowsProps = {
id: string
rows: PostImportRow[] }
const isRepairRow = (row: PostImportRow): boolean =>
row.recoverable === true
&& (row.importStatus === 'failed'
|| (row.importStatus === 'pending'
&& hasErrorMessages (row.validationErrors)))
const DUPLICATE_URL_MESSAGE = 'URL が重複しています．'
const BULK_PROCESSING_FAILED_MESSAGE = '登録中にエラーが発生しました．'
const emptyAttributes = () => ({
title: '',
thumbnailBase: '',
originalCreatedFrom: '',
originalCreatedBefore: '',
duration: '',
videoMs: '',
tags: '',
parentPostIds: '' })
const emptyProvenance = () => ({
url: 'manual',
title: 'automatic',
thumbnailBase: 'automatic',
originalCreatedFrom: 'automatic',
originalCreatedBefore: 'automatic',
duration: 'automatic',
videoMs: 'automatic',
tags: 'automatic',
parentPostIds: 'automatic' }) as const
const emptyTagSources = () => ({
automatic: '',
manual: '' })
const cloneDisplayTags = (
tags: PostImportDisplayTag[] | undefined,
): PostImportDisplayTag[] =>
tags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })) ?? []
const cloneMessageRecord = (
record: Record<string, string[]>,
): Record<string, string[]> =>
Object.fromEntries (
Object.entries (record).map (([key, messages]) => [key, [...messages]]))
const buildEmptyResetSnapshot = (url: string): PostImportResetSnapshot => ({
url,
attributes: emptyAttributes (),
displayTags: [],
provenance: emptyProvenance (),
tagSources: emptyTagSources (),
fieldWarnings: { },
baseWarnings: [] })
const buildInitialRows = (urls: string[]): PostImportRow[] => {
const source = urls.join ('\n')
const issues = validateImportSource (source)
const issuesByRow = issues.reduce<Record<number, string[]>> ((result, issue) => {
result[issue.sourceRow] = [...(result[issue.sourceRow] ?? []), issue.message]
return result
}, { })
return applyDuplicateUrlErrors (
urls.map ((url, index) => {
const sourceRow = index + 1
const rowIssues = issuesByRow[sourceRow] ?? []
return {
sourceRow,
url,
attributes: emptyAttributes (),
fieldWarnings: { },
baseWarnings: [],
validationErrors:
rowIssues.length > 0
? { url: [...rowIssues] }
: { },
provenance: emptyProvenance (),
tagSources: emptyTagSources (),
status: rowIssues.length > 0 ? 'error' : 'pending',
displayTags: [],
resetSnapshot: buildEmptyResetSnapshot (url) }
}))
}
const rowMetadataPending = (row: PostImportRow): boolean =>
row.status === 'pending'
const rowOperationBusy = (
row: PostImportRow,
submitting: boolean,
@@ -137,6 +213,7 @@ const rowSkipBusy = (
|| busyRowIds.has (row.sourceRow)
|| (rowMetadataPending (row) && !(isManualSkipRow (row)))
const shouldFetchMetadata = (row: PostImportRow): boolean =>
row.status === 'pending'
&& row.skipReason !== 'manual'
@@ -145,6 +222,7 @@ const shouldFetchMetadata = (row: PostImportRow): boolean =>
&& !(isNonRecoverableFailedRow (row))
&& row.metadataUrl == null
const shouldHydrateExistingPost = (row: PostImportRow): boolean =>
row.skipReason === 'existing'
&& row.existingPostId != null
@@ -152,9 +230,11 @@ const shouldHydrateExistingPost = (row: PostImportRow): boolean =>
&& row.importStatus !== 'created'
&& row.importStatus !== 'skipped'
const shouldFetchReviewRow = (row: PostImportRow): boolean =>
shouldFetchMetadata (row) || shouldHydrateExistingPost (row)
const applyDuplicateUrlErrors = (
rows: PostImportRow[],
): PostImportRow[] => {
@@ -201,14 +281,6 @@ const applyDuplicateUrlErrors = (
}
const buildSession = (rows: PostImportRow[]): PostImportSession => ({
version: 3,
expiresAt: '',
source: rows.map (row => row.url).join ('\n'),
rows,
repairMode: resultRepairMode (rows) })
const buildDryRunFormData = (row: PostImportRow): FormData => {
const formData = new FormData ()
formData.append ('url', row.url)
@@ -238,6 +310,7 @@ const mergeDryRunRow = (
const hasWarnings =
Object.values (fieldWarnings).some (messages => messages.length > 0)
|| (result.baseWarnings?.length ?? 0) > 0
return applyThumbnailWarning ({
...currentRow,
url: result.url,
@@ -250,23 +323,14 @@ const mergeDryRunRow = (
duration: result.duration ?? '',
videoMs: result.videoMs ?? '',
tags: result.tags ?? '',
parentPostIds: String (result.parentPostIds ?? currentRow.attributes.parentPostIds ?? '') },
displayTags:
result.displayTags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })) ?? [],
parentPostIds: String (
result.parentPostIds ?? currentRow.attributes.parentPostIds ?? '') },
displayTags: cloneDisplayTags (result.displayTags),
fieldWarnings,
baseWarnings: result.baseWarnings ?? [],
validationErrors: { },
importErrors: undefined,
status:
hasWarnings
? 'warning'
: 'ready',
status: hasWarnings ? 'warning' : 'ready',
skipReason:
result.existingPostId != null || result.existingPost?.id != null
? 'existing'
@@ -294,24 +358,8 @@ const buildPreviewResetSnapshot = (
videoMs: preview.videoMs ?? '',
tags: preview.tags ?? '',
parentPostIds: String (preview.parentPostIds ?? '') },
displayTags:
preview.displayTags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })) ?? [],
provenance: {
url: 'manual',
title: 'automatic',
thumbnailBase: 'automatic',
originalCreatedFrom: 'automatic',
originalCreatedBefore: 'automatic',
duration: 'automatic',
videoMs: 'automatic',
tags: 'automatic',
parentPostIds: 'automatic' },
displayTags: cloneDisplayTags (preview.displayTags),
provenance: emptyProvenance (),
tagSources: {
automatic: preview.tags ?? '',
manual: '' },
@@ -358,8 +406,7 @@ const indexedBulkResults = (
errors: {
...(errors ?? { }),
base: [...new Set ([...(errors?.base ?? []),
BULK_PROCESSING_FAILED_MESSAGE])],
},
BULK_PROCESSING_FAILED_MESSAGE])] },
recoverable: false }
}
return {
@@ -380,6 +427,7 @@ const indexedBulkResults = (
recoverable: result?.recoverable }
})
const mergePreviewRow = (
currentRow: PostImportRow,
preview: PostMetadataResponse,
@@ -397,14 +445,7 @@ const mergePreviewRow = (
...currentRow,
attributes: { ...currentRow.attributes },
provenance: { ...currentRow.provenance },
displayTags:
currentRow.displayTags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })) ?? [],
displayTags: cloneDisplayTags (currentRow.displayTags),
tagSources: {
automatic: currentRow.tagSources?.automatic ?? '',
manual: currentRow.tagSources?.manual ?? '' },
@@ -443,14 +484,7 @@ const mergePreviewRow = (
if (currentRow.provenance.tags !== 'manual')
{
nextRow.attributes.tags = preview.tags ?? ''
nextRow.displayTags =
preview.displayTags?.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })) ?? []
nextRow.displayTags = cloneDisplayTags (preview.displayTags)
}
nextRow.tagSources.automatic = preview.tags ?? ''
if (currentRow.provenance.parentPostIds !== 'manual')
@@ -547,6 +581,26 @@ const ExistingSkippedRows: FC<ExistingSkippedRowsProps> = ({ id, rows }) => {
}
const editableRowDirty = (row: PostImportRow): boolean =>
row.skipReason === 'manual'
|| row.url !== row.resetSnapshot.url
|| String (row.attributes.title ?? '')
!== String (row.resetSnapshot.attributes.title ?? '')
|| String (row.attributes.thumbnailBase ?? '')
!== String (row.resetSnapshot.attributes.thumbnailBase ?? '')
|| String (row.attributes.originalCreatedFrom ?? '')
!== String (row.resetSnapshot.attributes.originalCreatedFrom ?? '')
|| String (row.attributes.originalCreatedBefore ?? '')
!== String (row.resetSnapshot.attributes.originalCreatedBefore ?? '')
|| String (row.attributes.duration ?? '')
!== String (row.resetSnapshot.attributes.duration ?? '')
|| String (row.attributes.tags ?? '')
!== String (row.resetSnapshot.attributes.tags ?? '')
|| String (row.attributes.parentPostIds ?? '')
!== String (row.resetSnapshot.attributes.parentPostIds ?? '')
|| row.thumbnailFile != null
const PostImportReviewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const dialogue = useDialogue ()
@@ -561,146 +615,101 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
? { duration: .08, ease: 'linear' as const }
: { duration: .2, ease: 'easeOut' as const }
const [session, setSession] = useState<PostImportSession | null> (null)
const [rows, setRows] = useState<PostImportRow[] | null> (null)
const [metadataLoading, setMetadataLoading] = useState (false)
const [submitting, setSubmitting] = useState (false)
const [busyRowIds, setBusyRowIds] = useState<Set<number>> (new Set ())
const [editingRow, setEditingRow] = useState<PostImportRow | null> (null)
const [showExistingRows, setShowExistingRows] = useState (false)
const sessionRef = useRef<PostImportSession | null> (null)
const sessionIdRef = useRef<string | null> (null)
const persistedSearchRef = useRef<string | null> (null)
const persistSequenceRef = useRef (0)
const previewSequenceRef = useRef (0)
const rowsRef = useRef<PostImportRow[]> ([])
const metadataSequenceRef = useRef (0)
const discardChanges = useCallback (() => undefined, [])
const showStorageError = (message: string) =>
toast ({ description: message })
const dirty = useMemo (
() => rows?.some (row => editableRowDirty (row)) ?? false,
[rows],
)
const { allowNextNavigation } = useUnsavedChangesGuard ({
dirty,
onDiscard: discardChanges,
})
const commitSessionState = (
nextSession: PostImportSession,
): {
session: PostImportSession
sessionRoundTripSucceeded: boolean } => {
const sessionId =
sessionIdRef.current ?? generatePostImportSessionId ()
sessionIdRef.current = sessionId
const persistedSession = buildSession (nextSession.rows)
const saved = savePostImportSession (sessionId, persistedSession, showStorageError)
const loadedSession =
saved
? loadPostImportSession (sessionId, showStorageError)
: null
sessionRef.current = persistedSession
setSession (persistedSession)
return {
session: persistedSession,
sessionRoundTripSucceeded:
saved
&& serialisedPostImportRowsEqual (
loadedSession?.rows ?? [],
persistedSession.rows) }
}
const commitRows = useCallback ((nextRows: PostImportRow[]) => {
rowsRef.current = nextRows
setRows (nextRows)
return nextRows
}, [])
const syncSessionUrl = async (
nextSession: PostImportSession,
): Promise<PostImportSession | null> => {
const sessionId =
sessionIdRef.current ?? generatePostImportSessionId ()
sessionIdRef.current = sessionId
const sequence = ++persistSequenceRef.current
const serialised = await serialisePostNewState (nextSession.rows)
if (serialised == null)
return null
if (persistSequenceRef.current !== sequence)
return null
const updateRows = useCallback ((
updater: (currentRows: PostImportRow[]) => PostImportRow[],
) => {
const nextRows = applyDuplicateUrlErrors (updater (rowsRef.current))
return commitRows (nextRows)
}, [commitRows])
const { session: persistedSession,
sessionRoundTripSucceeded } = commitSessionState (nextSession)
const canNavigate =
serialised.complete
|| sessionRoundTripSucceeded
if (!(canNavigate))
{
showStorageError ('ブラウザへ保存できませんでした．')
return null
}
const path = appendPostNewSessionId (serialised.path, sessionId)
persistedSearchRef.current = (new URL (path, window.location.origin)).search
navigate (path, { replace: true })
return persistedSession
}
const currentRowBySource = (
const currentRowBySource = useCallback ((
sourceRow: number,
fallback?: PostImportSession,
): PostImportRow | null =>
(sessionRef.current?.rows ?? fallback?.rows ?? []).find (
row => row.sourceRow === sourceRow) ?? null
rowsRef.current.find (row => row.sourceRow === sourceRow) ?? null,
[])
const finishImport = () => {
const sessionId = sessionIdRef.current
if (sessionId != null)
clearPostImportSession (sessionId)
const finishImport = useCallback (() => {
allowNextNavigation ()
clearPostImportSourceDraft (message =>
toast ({ title: '入力内容を削除できませんでした', description: message }))
navigate ('/posts')
}
}, [allowNextNavigation, navigate])
useEffect (() => {
const urls = parsePostNewReviewUrls (location.search)
const initialRows = buildInitialRows (urls)
commitRows (initialRows)
let active = true
const previewSequence = ++previewSequenceRef.current
metadataSequenceRef.current = previewSequence
const sequence = ++metadataSequenceRef.current
const controllers = new Set<AbortController> ()
if (sessionRef.current != null
&& persistedSearchRef.current === location.search
&& !(sessionRef.current.rows.some (row => shouldFetchReviewRow (row))))
return () => {
previewSequenceRef.current = previewSequence
}
const refreshRows = async (baseSession: PostImportSession) => {
const blocksSubmit = baseSession.rows.some (row => shouldFetchMetadata (row))
if (active && blocksSubmit)
setMetadataLoading (true)
try
{
let nextIndex = 0
const targetSourceRows = initialRows
.filter (row => shouldFetchReviewRow (row))
.map (row => row.sourceRow)
setMetadataLoading (targetSourceRows.length > 0)
const mergeCurrentRow = (
sourceRow: number,
updater: (row: PostImportRow) => PostImportRow,
) => {
const latestRows = sessionRef.current?.rows ?? baseSession.rows
const nextRows = applyDuplicateUrlErrors (latestRows.map (row =>
updateRows (currentRows =>
currentRows.map (row =>
row.sourceRow === sourceRow
? updater (row)
: row))
commitSessionState (buildSession (nextRows))
}
const worker = async () => {
while (active)
{
const index = nextIndex
const sourceRow = targetSourceRows[nextIndex]
++nextIndex
if (index >= baseSession.rows.length)
if (sourceRow == null)
return
const baseRow = baseSession.rows[index]
const currentRow = currentRowBySource (baseRow.sourceRow, baseSession)
const currentRow = currentRowBySource (sourceRow)
if (currentRow == null || !(shouldFetchReviewRow (currentRow)))
continue
const controller = new AbortController ()
controllers.add (controller)
try
{
const preview = await apiGet<PostMetadataResponse> ('/posts/metadata', {
params: { url: currentRow.url },
signal: controller.signal })
if (!(active) || previewSequenceRef.current !== previewSequence)
if (!(active) || metadataSequenceRef.current !== sequence)
return
mergeCurrentRow (currentRow.sourceRow, row =>
mergeCurrentRow (sourceRow, row =>
row.importStatus === 'created'
|| row.importStatus === 'skipped'
|| isNonRecoverableFailedRow (row)
@@ -714,18 +723,20 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
{
if (controller.signal.aborted)
return
if (!(active) || previewSequenceRef.current !== previewSequence)
if (!(active) || metadataSequenceRef.current !== sequence)
return
if (!(isApiError<{
errors?: Record<string, string[]>
baseErrors?: string[]
}> (requestError)))
{
mergeCurrentRow (currentRow.sourceRow, row => ({
mergeCurrentRow (sourceRow, row => ({
...row,
status: 'error' }))
continue
}
if (requestError.response?.status === 422)
{
const rowErrors = compactMessageRecord ({
@@ -734,16 +745,18 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
? {
base: requestError.response.data.baseErrors }
: { }) })
mergeCurrentRow (currentRow.sourceRow, row => ({
mergeCurrentRow (sourceRow, row => ({
...row,
validationErrors: rowErrors,
status: 'error' }))
}
else
mergeCurrentRow (currentRow.sourceRow, row => ({
{
mergeCurrentRow (sourceRow, row => ({
...row,
status: 'error' }))
}
}
finally
{
controllers.delete (controller)
@@ -751,99 +764,71 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
}
}
await Promise.all (
Array.from ({ length: Math.min (4, baseSession.rows.length) }, () => worker ()))
if (!(active) || previewSequenceRef.current !== previewSequence)
return
const latestRows = sessionRef.current?.rows ?? baseSession.rows
const nextRows = applyDuplicateUrlErrors (latestRows)
await syncSessionUrl (buildSession (nextRows))
}
finally
{
if (active
&& blocksSubmit
&& metadataSequenceRef.current === previewSequence)
void Promise.all (
Array.from (
{ length: Math.min (4, targetSourceRows.length) },
() => worker (),
)).finally (() => {
if (active && metadataSequenceRef.current === sequence)
setMetadataLoading (false)
}
}
const hydrate = async () => {
const parsedSessionId = parsePostNewSessionId (location.search)
const sessionId = parsedSessionId ?? generatePostImportSessionId ()
const loadedSession = loadPostImportSession (sessionId)
const parsed = await parsePostNewState (location.search)
if (!(active))
return
if (parsed == null && loadedSession == null)
{
setMetadataLoading (false)
navigate ('/posts/new', { replace: true })
return
}
sessionIdRef.current = sessionId
const loaded = loadedSession ?? buildSession (parsed?.rows ?? [])
persistedSearchRef.current = location.search
sessionRef.current = loaded
setSession (loaded)
void refreshRows (loaded)
}
void hydrate ()
})
return () => {
active = false
controllers.forEach (controller => controller.abort ())
}
}, [location.search, navigate])
}, [commitRows, currentRowBySource, location.search, updateRows])
useEffect (() => {
if (session != null)
sessionRef.current = session
}, [session])
useEffect (() => {
if (editingRow == null || session?.repairMode !== 'failed')
if (editingRow == null || resultRepairMode (rowsRef.current) !== 'failed')
return
const element = document.getElementById (`post-import-row-${ editingRow.sourceRow }`)
element?.scrollIntoView ({ block: 'center', behavior: 'smooth' })
}, [editingRow, session?.repairMode])
}, [editingRow, rows])
const rows = session?.rows ?? []
const counts = useMemo (() => reviewSummaryCounts (rows), [rows])
const reviewRowsState = rows ?? []
const counts = useMemo (
() => reviewSummaryCounts (reviewRowsState),
[reviewRowsState],
)
const sortedRows =
session?.repairMode === 'failed'
? (
[...rows].sort ((a, b) => {
const aRepair = isRepairRow (a) ? 0 : 1
const bRepair = isRepairRow (b) ? 0 : 1
resultRepairMode (reviewRowsState) === 'failed'
? [...reviewRowsState].sort ((a, b) => {
const aRepair =
a.recoverable === true
&& (a.importStatus === 'failed'
|| (a.importStatus === 'pending'
&& hasErrorMessages (a.validationErrors)))
? 0
: 1
const bRepair =
b.recoverable === true
&& (b.importStatus === 'failed'
|| (b.importStatus === 'pending'
&& hasErrorMessages (b.validationErrors)))
? 0
: 1
return aRepair - bRepair || a.sourceRow - b.sourceRow
}))
: rows
})
: reviewRowsState
const existingRows = sortedRows.filter (row => isExistingSkipRow (row))
const reviewRows = sortedRows.filter (row => !(isExistingSkipRow (row)))
const processingRows = processableImportRows (rows)
const processingRows = processableImportRows (reviewRowsState)
const canSubmit = processingRows.length > 0
const toggleManualSkip = async (sourceRow: number, checked: boolean) => {
const currentSession = sessionRef.current
if (currentSession == null)
return
const currentRow = currentRowBySource (sourceRow, currentSession)
const currentRow = currentRowBySource (sourceRow)
if (currentRow == null)
return
if (rowSkipBusy (currentRow, submitting, busyRowIds))
return
const nextRows = currentSession.rows.map (row => {
updateRows (currentRows =>
currentRows.map (row => {
if (row.sourceRow !== sourceRow)
return row
if (isExistingSkipRow (row)
|| row.importStatus === 'created')
if (isExistingSkipRow (row) || row.importStatus === 'created')
return row
return {
...row,
@@ -853,27 +838,17 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
: row.existingPostId != null
? 'existing'
: undefined }
})
const nextSession = buildSession (applyDuplicateUrlErrors (nextRows))
if (metadataLoading)
{
commitSessionState (nextSession)
return
}
await syncSessionUrl (nextSession)
}))
}
const saveDraft = async (
row: PostImportRow,
{ draft, resetRequested }: {
draft: PostImportRowDraft
draft: PostImportEditableDraft
resetRequested: boolean },
): Promise<{ saved: boolean
row: PostImportRow | null }> => {
const currentSession = sessionRef.current
if (currentSession == null)
return { saved: false, row: null }
const currentRow = currentRowBySource (row.sourceRow, currentSession)
const currentRow = currentRowBySource (row.sourceRow)
if (currentRow == null)
return { saved: false, row: null }
if (!(canEditReviewRow (currentRow)))
@@ -881,22 +856,14 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const baseRow =
resetRequested
? { ...currentRow,
? {
...currentRow,
url: currentRow.resetSnapshot.url,
attributes: { ...currentRow.resetSnapshot.attributes },
displayTags:
currentRow.resetSnapshot.displayTags.map (tag => ({
name: tag.name,
category: tag.category,
sectionLiterals:
tag.sectionLiterals == null
? undefined
: [...tag.sectionLiterals] })),
displayTags: cloneDisplayTags (currentRow.resetSnapshot.displayTags),
provenance: { ...currentRow.resetSnapshot.provenance },
tagSources: { ...currentRow.resetSnapshot.tagSources },
fieldWarnings: Object.fromEntries (
Object.entries (currentRow.resetSnapshot.fieldWarnings)
.map (([key, values]) => [key, [...values]])),
fieldWarnings: cloneMessageRecord (currentRow.resetSnapshot.fieldWarnings),
baseWarnings: [...currentRow.resetSnapshot.baseWarnings],
metadataUrl: currentRow.resetSnapshot.metadataUrl,
thumbnailFile: undefined }
@@ -904,6 +871,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const urlChanged = draft.url !== baseRow.url
const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
let candidateRow = nextRow
try
{
candidateRow =
@@ -916,21 +884,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const dryRun = await apiPost<PostMetadataResponse> (
'/posts?dry=1',
buildDryRunFormData (candidateRow))
const latestSession = sessionRef.current
if (latestSession == null)
return { saved: false, row: null }
const mergedRow = mergeDryRunRow (candidateRow, dryRun)
const mergedRows = applyDuplicateUrlErrors (
replaceImportRow (latestSession.rows, mergedRow))
const nextSession =
metadataLoading
? commitSessionState (buildSession (mergedRows)).session
: await syncSessionUrl (buildSession (mergedRows))
if (nextSession == null)
return { saved: false, row: null }
const mergedTarget = nextSession.rows.find (
currentRow => currentRow.sourceRow === baseRow.sourceRow)
const mergedRows = updateRows (currentRows =>
replaceImportRow (currentRows, mergedRow))
const mergedTarget = mergedRows.find (
current => current.sourceRow === baseRow.sourceRow)
if (mergedTarget == null)
return { saved: false, row: null }
if (hasErrorMessages (mergedTarget.validationErrors))
@@ -967,7 +925,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const openEditingDialogue = async (row: PostImportRow) => {
const saveRowDraft = (
{ draft, resetRequested }: {
draft: PostImportRowDraft
draft: PostImportEditableDraft
resetRequested: boolean },
) =>
saveDraft (row, { draft, resetRequested })
@@ -984,8 +942,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
}
const editRow = async (row: PostImportRow) => {
const currentRow = sessionRef.current?.rows.find (
current => current.sourceRow === row.sourceRow)
const currentRow = currentRowBySource (row.sourceRow)
if (currentRow == null)
return
if (!(canEditReviewRow (currentRow)))
@@ -1008,11 +965,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
}
const retry = async (sourceRow: number) => {
const initialSession = sessionRef.current
if (initialSession == null)
return
const originalRow = initialSession.rows.find (row => row.sourceRow === sourceRow)
const originalRow = currentRowBySource (sourceRow)
if (originalRow == null)
return
if (rowOperationBusy (originalRow, submitting, busyRowIds))
@@ -1021,15 +974,8 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
setBusyRowIds (current => new Set ([...current, sourceRow]))
try
{
const pendingRows = retryImportRow (initialSession.rows, sourceRow)
const pendingSession =
metadataLoading
? commitSessionState (buildSession (pendingRows)).session
: await syncSessionUrl (buildSession (pendingRows))
if (pendingSession == null)
return
const target = pendingSession.rows.find (row => row.sourceRow === sourceRow)
updateRows (currentRows => retryImportRow (currentRows, sourceRow))
const target = currentRowBySource (sourceRow)
if (target == null)
return
@@ -1038,37 +984,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
buildBulkFormData ([target]))
if (result.results.length !== 1)
{
const latest = sessionRef.current ?? pendingSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
if (metadataLoading)
commitSessionState (buildSession (restoredRows))
else
await syncSessionUrl (buildSession (restoredRows))
updateRows (currentRows => replaceImportRow (currentRows, originalRow))
toast ({ title: '登録結果が不完全でした' })
return
}
const indexedResults = indexedBulkResults ([target], result.results)
const latestAfterImport = sessionRef.current ?? pendingSession
const nextRows = applyDuplicateUrlErrors (
mergeImportResults (latestAfterImport.rows, indexedResults))
mergeImportResults (rowsRef.current, indexedResults))
.map (row => applyThumbnailWarning (row))
const persisted =
metadataLoading
? commitSessionState (buildSession (nextRows)).session
: await syncSessionUrl (buildSession (nextRows))
if (persisted != null
&& persisted.rows.every (row => isCompletedReviewRow (row)))
commitRows (nextRows)
if (nextRows.every (row => isCompletedReviewRow (row)))
finishImport ()
}
catch
{
const latest = sessionRef.current ?? initialSession
const restoredRows = replaceImportRow (latest.rows, originalRow)
if (metadataLoading)
commitSessionState (buildSession (restoredRows))
else
await syncSessionUrl (buildSession (restoredRows))
updateRows (currentRows => replaceImportRow (currentRows, originalRow))
toast ({ title: '再試行に失敗しました' })
}
finally
@@ -1082,14 +1013,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
}
const submit = async () => {
const currentSession = sessionRef.current
if (currentSession == null
|| metadataLoading
|| submitting
|| busyRowIds.size > 0)
if (metadataLoading || submitting || busyRowIds.size > 0)
return
const processingRows = processableImportRows (currentSession.rows)
if (processingRows.length === 0)
const latestProcessingRows = processableImportRows (rowsRef.current)
if (latestProcessingRows.length === 0)
return
setSubmitting (true)
@@ -1097,21 +1025,19 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
{
const result = await apiPost<{ results: BulkApiRow[] }>(
'/posts/bulk',
buildBulkFormData (processingRows))
if (result.results.length !== processingRows.length)
buildBulkFormData (latestProcessingRows))
if (result.results.length !== latestProcessingRows.length)
{
toast ({ title: '登録結果が不完全でした' })
return
}
const indexedResults = indexedBulkResults (processingRows, result.results)
const latestAfterImport = sessionRef.current ?? buildSession (currentSession.rows)
const indexedResults = indexedBulkResults (latestProcessingRows, result.results)
const nextRows = applyDuplicateUrlErrors (
mergeImportResults (latestAfterImport.rows, indexedResults))
mergeImportResults (rowsRef.current, indexedResults))
.map (row => applyThumbnailWarning (row))
const persisted = await syncSessionUrl (buildSession (nextRows))
if (persisted != null
&& persisted.rows.every (row => isCompletedReviewRow (row)))
commitRows (nextRows)
if (nextRows.every (row => isCompletedReviewRow (row)))
finishImport ()
}
catch
@@ -1127,7 +1053,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
if (!(editable))
return <Forbidden/>
if (session == null)
if (rows == null)
return null
return (
@@ -1136,11 +1062,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
<title>{`追加内容確認 | ${ SITE_TITLE }`}</title>
</Helmet>
<MainArea className="min-h-0">
<div className="mx-auto max-w-6xl space-y-4 p-4">
<MainArea className="pb-40">
<div className="mx-auto max-w-6xl space-y-6">
<PageTitle>追加内容確認</PageTitle>
{counts.existingSkipped > 0 && (
{existingRows.length > 0 && (
<div className="rounded-lg border p-4">
<button
type="button"
@@ -1209,13 +1135,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
manualSkippedCount={counts.manualSkipped}
existingSkippedCount={counts.existingSkipped}
pendingOrErrorCount={counts.pendingOrError}
onBack={() => navigate (location.state?.from === '/posts/new'
? '/posts/new'
: (-1))}
onBack={() => navigate ('/posts/new')}
onSubmit={() => submit ()}/>
</>)
}
const PostImportFooter = (
{ metadataLoading,
submitting,
frontend/src/pages/posts/PostImportSourcePage.tsx
+18 -147
ファイルの表示
@@ -12,26 +12,23 @@ import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import {
appendPostNewSessionId,
serialisePostNewState,
buildPostNewReviewPath,
isPostNewReviewPathWithinLimit,
} from '@/lib/postNewQueryState'
import { canEditContent } from '@/lib/users'
import { countImportSourceLines,
generatePostImportSessionId,
cleanupExpiredPostImportSessions,
initialisePreviewRows,
loadPostImportSession,
import {
countImportSourceLines,
extractImportSourceUrls,
validateImportSource,
} from '@/lib/postImportSourceValidation'
import {
loadPostImportSourceDraft,
resultRepairMode,
serialisedPostImportRowsEqual,
savePostImportSession,
savePostImportSourceDraft,
validateImportSource } from '@/lib/postImportSession'
} from '@/lib/postImportStorage'
import { canEditContent } from '@/lib/users'
import Forbidden from '@/pages/Forbidden'
import type { FC } from 'react'
import type { PostImportRow } from '@/lib/postImportSession'
import type { User } from '@/types'
type Props = { user: User | null }
@@ -40,71 +37,6 @@ const MAX_ROWS = 100
const SOURCE_ERROR_ID = 'post-import-source-error'
const SOURCE_ISSUES_ID = 'post-import-source-issues'
const buildInitialRows = (source: string): PostImportRow[] =>
source
.split (/\r\n|\n|\r/)
.map ((line, index) => ({
sourceRow: index + 1,
url: line.trim () }))
.filter (row => row.url !== '')
.map (row => ({
sourceRow: row.sourceRow,
url: row.url,
attributes: {
title: '',
thumbnailBase: '',
originalCreatedFrom: '',
originalCreatedBefore: '',
duration: '',
videoMs: '',
tags: '',
parentPostIds: '' },
fieldWarnings: { },
baseWarnings: [],
validationErrors: { },
provenance: {
url: 'manual',
title: 'automatic',
thumbnailBase: 'automatic',
originalCreatedFrom: 'automatic',
originalCreatedBefore: 'automatic',
duration: 'automatic',
videoMs: 'automatic',
tags: 'automatic',
parentPostIds: 'automatic' },
tagSources: {
automatic: '',
manual: '' },
status: 'pending' as const,
displayTags: [],
resetSnapshot: {
url: row.url,
attributes: {
title: '',
thumbnailBase: '',
originalCreatedFrom: '',
originalCreatedBefore: '',
duration: '',
videoMs: '',
tags: '',
parentPostIds: '' },
provenance: {
url: 'manual',
title: 'automatic',
thumbnailBase: 'automatic',
originalCreatedFrom: 'automatic',
originalCreatedBefore: 'automatic',
duration: 'automatic',
videoMs: 'automatic',
tags: 'automatic',
parentPostIds: 'automatic' },
tagSources: {
automatic: '',
manual: '' },
displayTags: [],
fieldWarnings: { },
baseWarnings: [] } }))
const PostImportSourcePage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
@@ -117,6 +49,8 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
const editedRef = useRef (false)
const lineCount = countImportSourceLines (source)
const sourceUrls = extractImportSourceUrls (source)
const withinPathLimit = isPostNewReviewPathWithinLimit (sourceUrls)
const messages = sourceError != null ? [sourceError] : []
const sourceDescribedBy =
[sourceError != null ? SOURCE_ERROR_ID : null,
@@ -124,13 +58,7 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
.filter (value => value != null)
.join (' ')
const showStorageError = (message: string) =>
toast ({ description: message })
useEffect (() => {
cleanupExpiredPostImportSessions (message =>
toast ({ title: '保存済みデータを整理できませんでした', description: message }))
const draft = loadPostImportSourceDraft (message =>
toast ({ title: '保存済み入力を復元できませんでした', description: message }))
@@ -173,73 +101,15 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
setSourceError (null)
return
}
if (!(withinPathLimit))
return
setLoading (true)
setSourceIssues ([])
setSourceError (null)
try
{
const nextRows = initialisePreviewRows (buildInitialRows (source))
const serialised = await serialisePostNewState (nextRows)
const sessionId = (() => {
try
{
return generatePostImportSessionId ()
}
catch
{
return null
}
}) ()
const session = {
source,
rows: nextRows,
repairMode: resultRepairMode (nextRows) }
const saved =
sessionId == null
? false
: savePostImportSession (sessionId, session, showStorageError)
const loadedSession =
sessionId == null
? null
: loadPostImportSession (sessionId, showStorageError)
const sessionRoundTripSucceeded =
saved
&& serialisedPostImportRowsEqual (
loadedSession?.rows ?? [],
nextRows)
const canNavigate =
serialised?.complete === true
|| sessionRoundTripSucceeded
if (!(canNavigate))
{
showStorageError ('ブラウザへ保存できませんでした．')
return
}
const nextPath = (() => {
if (serialised != null)
{
return sessionId == null
? serialised.path
: appendPostNewSessionId (serialised.path, sessionId)
}
if (sessionRoundTripSucceeded && sessionId != null)
return `/posts/new?session_id=${ sessionId }`
return null
}) ()
if (nextPath == null)
{
showStorageError ('ブラウザへ保存できませんでした．')
return
}
navigate (nextPath)
}
catch (error)
{
console.error (error)
showStorageError ('ブラウザへ保存できませんでした．')
navigate (buildPostNewReviewPath (sourceUrls))
}
finally
{
@@ -268,7 +138,8 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
className="h-80 font-mono text-sm"
onBlur={() => {
savePostImportSourceDraft (source, message =>
toast ({ title: '入力内容を保存できませんでした',
toast ({
title: '入力内容を保存できませんでした',
description: message }))
}}
onChange={ev => {
@@ -299,7 +170,7 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
type="button"
className="pointer-events-auto shrink-0"
onClick={preview}
disabled={loading}>
disabled={loading || !(withinPathLimit)}>
次へ
</Button>
</div>