87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Card, ErrorState } from './ui'
|
|
import type { ArticleDraft } from '@/lib/articlePublisher'
|
|
import { ArticleFormButtons } from './ArticleFormButtons'
|
|
import type { RelayPublishStatus } from '@/lib/publishResult'
|
|
import { t } from '@/lib/i18n'
|
|
import { ArticleFieldsLeft } from './ArticleEditorFormFieldsLeft'
|
|
import { ArticleFieldsRight } from './ArticleEditorFormFieldsRight'
|
|
import { ArticlePreviewModal } from './ArticlePreviewModal'
|
|
|
|
interface ArticleEditorFormProps {
|
|
draft: ArticleDraft
|
|
onDraftChange: (draft: ArticleDraft) => void
|
|
onSubmit: (e: React.FormEvent) => void
|
|
loading: boolean
|
|
error: string | null
|
|
relayStatuses?: RelayPublishStatus[]
|
|
onCancel?: () => void
|
|
seriesOptions?: { id: string; title: string }[] | undefined
|
|
onSelectSeries?: ((seriesId: string | undefined) => void) | undefined
|
|
}
|
|
|
|
function ErrorAlert({ error }: { error: string | null }): React.ReactElement | null {
|
|
if (!error) {
|
|
return null
|
|
}
|
|
return <ErrorState message={error} className="bg-red-50 border-red-200 text-red-800" />
|
|
}
|
|
|
|
function usePreviewModal(): {
|
|
showPreview: boolean
|
|
openPreview: () => void
|
|
closePreview: () => void
|
|
} {
|
|
const [showPreview, setShowPreview] = useState(false)
|
|
return {
|
|
showPreview,
|
|
openPreview: () => {
|
|
setShowPreview(true)
|
|
},
|
|
closePreview: () => {
|
|
setShowPreview(false)
|
|
},
|
|
}
|
|
}
|
|
|
|
export function ArticleEditorForm({
|
|
draft,
|
|
onDraftChange,
|
|
onSubmit,
|
|
loading,
|
|
error,
|
|
relayStatuses,
|
|
onCancel,
|
|
seriesOptions,
|
|
onSelectSeries,
|
|
}: ArticleEditorFormProps): React.ReactElement {
|
|
const { showPreview, openPreview, closePreview } = usePreviewModal()
|
|
|
|
return (
|
|
<>
|
|
<Card variant="default" className="bg-white">
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
<h2 className="text-2xl font-bold mb-4">{t('article.editor.title')}</h2>
|
|
<div className="space-y-4">
|
|
<ArticleFieldsLeft
|
|
draft={draft}
|
|
onDraftChange={onDraftChange}
|
|
{...(seriesOptions ? { seriesOptions } : {})}
|
|
{...(onSelectSeries ? { onSelectSeries } : {})}
|
|
/>
|
|
<ArticleFieldsRight draft={draft} onDraftChange={onDraftChange} />
|
|
</div>
|
|
<ErrorAlert error={error} />
|
|
<ArticleFormButtons
|
|
loading={loading}
|
|
relayStatuses={relayStatuses}
|
|
onPreview={openPreview}
|
|
{...(onCancel ? { onCancel } : {})}
|
|
/>
|
|
</form>
|
|
</Card>
|
|
<ArticlePreviewModal isOpen={showPreview} onClose={closePreview} draft={draft} />
|
|
</>
|
|
)
|
|
}
|