e06e64f85f
- Added tests for rotating PDFs, removing watermarks, and reordering pages in the backend. - Implemented frontend logic to read page counts from uploaded PDFs and validate page orders. - Updated internationalization files to include new strings for reorder and watermark removal features. - Improved user feedback during page count reading and validation in the Reorder PDF component. - Ensured that the reorder functionality requires a complete permutation of pages.
270 lines
9.4 KiB
TypeScript
270 lines
9.4 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Helmet } from 'react-helmet-async';
|
|
import { ArrowUpDown } from 'lucide-react';
|
|
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
|
|
import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
|
|
import FileUploader from '@/components/shared/FileUploader';
|
|
import ProgressBar from '@/components/shared/ProgressBar';
|
|
import DownloadButton from '@/components/shared/DownloadButton';
|
|
import AdSlot from '@/components/layout/AdSlot';
|
|
import { useFileUpload } from '@/hooks/useFileUpload';
|
|
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
|
import { generateToolSchema } from '@/utils/seo';
|
|
import { useFileStore } from '@/stores/fileStore';
|
|
|
|
GlobalWorkerOptions.workerSrc = pdfWorker;
|
|
|
|
export default function ReorderPdf() {
|
|
const { t } = useTranslation();
|
|
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
|
const [pageOrder, setPageOrder] = useState('');
|
|
const [pageCount, setPageCount] = useState<number | null>(null);
|
|
const [pageCountError, setPageCountError] = useState<string | null>(null);
|
|
const [isReadingPageCount, setIsReadingPageCount] = useState(false);
|
|
|
|
const {
|
|
file, uploadProgress, isUploading, taskId,
|
|
error: uploadError, selectFile, startUpload, reset,
|
|
} = useFileUpload({
|
|
endpoint: '/pdf-tools/reorder',
|
|
maxSizeMB: 20,
|
|
acceptedTypes: ['pdf'],
|
|
extraData: { page_order: pageOrder },
|
|
});
|
|
|
|
const { status, result, error: taskError } = useTaskPolling({
|
|
taskId,
|
|
onComplete: () => setPhase('done'),
|
|
onError: () => setPhase('done'),
|
|
});
|
|
|
|
const storeFile = useFileStore((s) => s.file);
|
|
const clearStoreFile = useFileStore((s) => s.clearFile);
|
|
useEffect(() => {
|
|
if (storeFile) { selectFile(storeFile); clearStoreFile(); }
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
let loadingTask: ReturnType<typeof getDocument> | null = null;
|
|
|
|
async function detectPageCount(selectedFile: File) {
|
|
setIsReadingPageCount(true);
|
|
setPageCount(null);
|
|
setPageCountError(null);
|
|
|
|
try {
|
|
const data = new Uint8Array(await selectedFile.arrayBuffer());
|
|
loadingTask = getDocument({ data });
|
|
const pdf = await loadingTask.promise;
|
|
|
|
if (!cancelled) {
|
|
setPageCount(pdf.numPages);
|
|
}
|
|
} catch {
|
|
if (!cancelled) {
|
|
setPageCountError(t('tools.reorderPdf.pageCountFailed'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setIsReadingPageCount(false);
|
|
}
|
|
void loadingTask?.destroy();
|
|
}
|
|
}
|
|
|
|
if (!file) {
|
|
setPageCount(null);
|
|
setPageCountError(null);
|
|
setIsReadingPageCount(false);
|
|
return undefined;
|
|
}
|
|
|
|
void detectPageCount(file);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
void loadingTask?.destroy();
|
|
};
|
|
}, [file, t]);
|
|
|
|
const getPageOrderError = (): string | null => {
|
|
if (!pageOrder.trim()) {
|
|
return null;
|
|
}
|
|
|
|
if (isReadingPageCount) {
|
|
return t('tools.reorderPdf.readingPageCount');
|
|
}
|
|
|
|
if (pageCountError) {
|
|
return pageCountError;
|
|
}
|
|
|
|
if (pageCount === null) {
|
|
return null;
|
|
}
|
|
|
|
const parts = pageOrder
|
|
.split(',')
|
|
.map((part) => part.trim())
|
|
.filter(Boolean);
|
|
|
|
if (parts.length === 0 || parts.some((part) => !/^\d+$/.test(part))) {
|
|
return t('tools.reorderPdf.orderInvalidFormat');
|
|
}
|
|
|
|
const values = parts.map((part) => Number(part));
|
|
const outOfRange = [...new Set(values.filter((page) => page < 1 || page > pageCount))];
|
|
|
|
const seen = new Set<number>();
|
|
const duplicates: number[] = [];
|
|
for (const page of values) {
|
|
if (seen.has(page) && !duplicates.includes(page)) {
|
|
duplicates.push(page);
|
|
}
|
|
seen.add(page);
|
|
}
|
|
|
|
const missing: number[] = [];
|
|
for (let page = 1; page <= pageCount; page += 1) {
|
|
if (!seen.has(page)) {
|
|
missing.push(page);
|
|
}
|
|
}
|
|
|
|
if (outOfRange.length === 0 && duplicates.length === 0 && missing.length === 0 && values.length === pageCount) {
|
|
return null;
|
|
}
|
|
|
|
const details: string[] = [];
|
|
if (outOfRange.length > 0) {
|
|
details.push(t('tools.reorderPdf.orderOutOfRange', { pages: outOfRange.join(', ') }));
|
|
}
|
|
if (missing.length > 0) {
|
|
details.push(t('tools.reorderPdf.orderMissingPages', { pages: missing.join(', ') }));
|
|
}
|
|
if (duplicates.length > 0) {
|
|
details.push(t('tools.reorderPdf.orderDuplicatePages', { pages: duplicates.join(', ') }));
|
|
}
|
|
|
|
return `${t('tools.reorderPdf.orderMustIncludeAllPages', { count: pageCount })} ${details.join(' ')}`.trim();
|
|
};
|
|
|
|
const pageOrderError = getPageOrderError();
|
|
const canSubmit = Boolean(file && pageOrder.trim() && !pageOrderError && !isUploading);
|
|
|
|
const handleUpload = async () => {
|
|
if (!canSubmit) return;
|
|
const id = await startUpload();
|
|
if (id) setPhase('processing');
|
|
};
|
|
|
|
const handleReset = () => {
|
|
reset();
|
|
setPhase('upload');
|
|
setPageOrder('');
|
|
setPageCount(null);
|
|
setPageCountError(null);
|
|
setIsReadingPageCount(false);
|
|
};
|
|
|
|
const schema = generateToolSchema({
|
|
name: t('tools.reorderPdf.title'),
|
|
description: t('tools.reorderPdf.description'),
|
|
url: `${window.location.origin}/tools/reorder-pdf`,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>{t('tools.reorderPdf.title')} — {t('common.appName')}</title>
|
|
<meta name="description" content={t('tools.reorderPdf.description')} />
|
|
<link rel="canonical" href={`${window.location.origin}/tools/reorder-pdf`} />
|
|
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
|
</Helmet>
|
|
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="mb-8 text-center">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-100 dark:bg-violet-900/30">
|
|
<ArrowUpDown className="h-8 w-8 text-violet-600 dark:text-violet-400" />
|
|
</div>
|
|
<h1 className="section-heading">{t('tools.reorderPdf.title')}</h1>
|
|
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.reorderPdf.description')}</p>
|
|
</div>
|
|
|
|
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
|
|
|
{phase === 'upload' && (
|
|
<div className="space-y-4">
|
|
<FileUploader
|
|
onFileSelect={selectFile} file={file}
|
|
accept={{ 'application/pdf': ['.pdf'] }}
|
|
maxSizeMB={20} isUploading={isUploading}
|
|
uploadProgress={uploadProgress} error={uploadError}
|
|
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
|
/>
|
|
{file && !isUploading && (
|
|
<>
|
|
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
|
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
{t('tools.reorderPdf.orderLabel')}
|
|
</label>
|
|
<input
|
|
type="text" value={pageOrder}
|
|
onChange={(e) => setPageOrder(e.target.value)}
|
|
placeholder={t('tools.reorderPdf.orderPlaceholder')}
|
|
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200"
|
|
/>
|
|
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
|
|
{t('tools.reorderPdf.orderHint')}
|
|
</p>
|
|
{isReadingPageCount && (
|
|
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
|
{t('tools.reorderPdf.readingPageCount')}
|
|
</p>
|
|
)}
|
|
{!isReadingPageCount && pageCount !== null && (
|
|
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
|
{t('tools.reorderPdf.pageCount', { count: pageCount })}
|
|
</p>
|
|
)}
|
|
{pageOrderError && (
|
|
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
|
<p className="text-sm text-red-700 dark:text-red-400">{pageOrderError}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button onClick={handleUpload} disabled={!canSubmit}
|
|
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
|
{t('tools.reorderPdf.shortDesc')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{phase === 'processing' && !result && (
|
|
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
|
)}
|
|
|
|
{phase === 'done' && result && result.status === 'completed' && (
|
|
<DownloadButton result={result} onStartOver={handleReset} />
|
|
)}
|
|
|
|
{phase === 'done' && taskError && (
|
|
<div className="space-y-4">
|
|
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
|
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
|
</div>
|
|
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
|
</div>
|
|
)}
|
|
|
|
<AdSlot slot="bottom-banner" className="mt-8" />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|