modcomms/frontend/hooks/usePdfPages.ts
michael d97be02b0b Add PDF preview support with on-demand rasterization
- Backend: Generate PDF thumbnail from first rasterized page on upload
- Backend: Add /files/{storage_key}/pages endpoint for PDF rasterization
- Frontend: Add getPdfPages() method to apiService
- Frontend: Create usePdfPages hook for on-demand PDF page loading
- Frontend: Pass pdfPages prop to ProofPreview in Campaigns view

This fixes the issue where PDF uploads showed no visual preview in results.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-25 08:56:23 -06:00

37 lines
1.2 KiB
TypeScript

import { useState, useEffect } from 'react';
import type { PDFPage } from '../types';
import apiService from '../services/apiService';
export function usePdfPages(storageKey: string | undefined | null) {
const [pdfPages, setPdfPages] = useState<PDFPage[] | undefined>(undefined);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!storageKey || !storageKey.toLowerCase().endsWith('.pdf')) {
setPdfPages(undefined);
return;
}
let cancelled = false;
const loadPages = async () => {
setLoading(true);
setError(null);
try {
const pages = await apiService.getPdfPages(storageKey);
if (!cancelled) setPdfPages(pages);
} catch (err) {
if (!cancelled) {
setError(err instanceof Error ? err.message : 'Failed to load PDF');
setPdfPages(undefined);
}
} finally {
if (!cancelled) setLoading(false);
}
};
loadPages();
return () => { cancelled = true; };
}, [storageKey]);
return { pdfPages, loading, error };
}