311 行
9.0 KiB
TypeScript
311 行
9.0 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import { Helmet } from 'react-helmet-async'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
import FieldError from '@/components/common/FieldError'
|
|
import Form from '@/components/common/Form'
|
|
import FormField from '@/components/common/FormField'
|
|
import PageTitle from '@/components/common/PageTitle'
|
|
import TextArea from '@/components/common/TextArea'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import { Button } from '@/components/ui/button'
|
|
import { toast } from '@/components/ui/use-toast'
|
|
import { SITE_TITLE } from '@/config'
|
|
import {
|
|
appendPostNewSessionId,
|
|
serialisePostNewState,
|
|
} from '@/lib/postNewQueryState'
|
|
import { canEditContent } from '@/lib/users'
|
|
import { countImportSourceLines,
|
|
generatePostImportSessionId,
|
|
cleanupExpiredPostImportSessions,
|
|
initialisePreviewRows,
|
|
loadPostImportSession,
|
|
loadPostImportSourceDraft,
|
|
resultRepairMode,
|
|
serialisedPostImportRowsEqual,
|
|
savePostImportSession,
|
|
savePostImportSourceDraft,
|
|
validateImportSource } from '@/lib/postImportSession'
|
|
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 }
|
|
|
|
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)
|
|
const navigate = useNavigate ()
|
|
const [source, setSource] = useState ('')
|
|
const [loading, setLoading] = useState (false)
|
|
const [sourceIssues, setSourceIssues] = useState<ReturnType<typeof validateImportSource>> ([])
|
|
const [sourceError, setSourceError] = useState<string | null> (null)
|
|
const saveTimer = useRef<number | null> (null)
|
|
const editedRef = useRef (false)
|
|
|
|
const lineCount = countImportSourceLines (source)
|
|
const messages = sourceError != null ? [sourceError] : []
|
|
const sourceDescribedBy =
|
|
[sourceError != null ? SOURCE_ERROR_ID : null,
|
|
sourceIssues.length > 0 ? SOURCE_ISSUES_ID : null]
|
|
.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 }))
|
|
|
|
if (!(editedRef.current))
|
|
{
|
|
setSource (current =>
|
|
current === ''
|
|
? draft.source
|
|
: current)
|
|
}
|
|
}, [])
|
|
|
|
useEffect (() => {
|
|
if (saveTimer.current != null)
|
|
window.clearTimeout (saveTimer.current)
|
|
|
|
saveTimer.current = window.setTimeout (() => {
|
|
savePostImportSourceDraft (source, message =>
|
|
toast ({ title: '入力内容を保存できませんでした', description: message }))
|
|
}, 300)
|
|
|
|
return () => {
|
|
if (saveTimer.current != null)
|
|
window.clearTimeout (saveTimer.current)
|
|
}
|
|
}, [source])
|
|
|
|
const preview = async () => {
|
|
if (lineCount === 0)
|
|
{
|
|
setSourceIssues ([])
|
|
setSourceError ('URL を入力してください．')
|
|
return
|
|
}
|
|
|
|
const issues = validateImportSource (source)
|
|
if (issues.length > 0)
|
|
{
|
|
setSourceIssues (issues)
|
|
setSourceError (null)
|
|
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 ('ブラウザへ保存できませんでした．')
|
|
}
|
|
finally
|
|
{
|
|
setLoading (false)
|
|
}
|
|
}
|
|
|
|
if (!(editable))
|
|
return <Forbidden/>
|
|
|
|
return (
|
|
<MainArea>
|
|
<Helmet>
|
|
<title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
|
|
</Helmet>
|
|
|
|
<Form className="max-w-4xl">
|
|
<PageTitle>広場に投稿を追加</PageTitle>
|
|
<FormField label="URL リスト">
|
|
{() => (
|
|
<TextArea
|
|
value={source}
|
|
rows={14}
|
|
invalid={messages.length > 0 || sourceIssues.length > 0}
|
|
aria-describedby={sourceDescribedBy || undefined}
|
|
className="h-80 font-mono text-sm"
|
|
onBlur={() => {
|
|
savePostImportSourceDraft (source, message =>
|
|
toast ({ title: '入力内容を保存できませんでした',
|
|
description: message }))
|
|
}}
|
|
onChange={ev => {
|
|
editedRef.current = true
|
|
setSource (ev.target.value)
|
|
setSourceError (null)
|
|
setSourceIssues ([])
|
|
}}/>)}
|
|
</FormField>
|
|
<div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
|
|
<FieldError messages={messages}/>
|
|
</div>
|
|
<ul
|
|
id={SOURCE_ISSUES_ID}
|
|
className="space-y-2 text-sm text-red-700 dark:text-red-300">
|
|
{sourceIssues.map (issue => (
|
|
<li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
|
|
<div>{issue.sourceRow} 行目: {issue.message}</div>
|
|
<div className="break-all font-mono text-xs">{issue.url}</div>
|
|
</li>))}
|
|
</ul>
|
|
|
|
<div className="relative z-10 flex items-center justify-between gap-3">
|
|
<div className="text-sm text-neutral-600 dark:text-neutral-300">
|
|
入力行数 {lineCount} / {MAX_ROWS}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
className="pointer-events-auto shrink-0"
|
|
onClick={preview}
|
|
disabled={loading}>
|
|
次へ
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</MainArea>)
|
|
}
|
|
|
|
export default PostImportSourcePage
|