|
|
@ -1,12 +1,9 @@
|
|
|
|
import axios from 'axios';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
import { Document, Page, pdfjs } from 'react-pdf';
|
|
|
|
import { Document, Page, pdfjs } from 'react-pdf';
|
|
|
|
import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
|
|
|
|
import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
|
|
|
|
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
|
|
|
|
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
|
|
|
|
import { Button, Spinner } from '@tih/ui';
|
|
|
|
import { Button, Spinner } from '@tih/ui';
|
|
|
|
|
|
|
|
|
|
|
|
import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
|
|
|
|
|
|
|
|
|
|
|
|
type Props = Readonly<{
|
|
|
|
type Props = Readonly<{
|
|
|
@ -16,30 +13,16 @@ type Props = Readonly<{
|
|
|
|
export default function ResumePdf({ url }: Props) {
|
|
|
|
export default function ResumePdf({ url }: Props) {
|
|
|
|
const [numPages, setNumPages] = useState(0);
|
|
|
|
const [numPages, setNumPages] = useState(0);
|
|
|
|
const [pageNumber, setPageNumber] = useState(1);
|
|
|
|
const [pageNumber, setPageNumber] = useState(1);
|
|
|
|
const [file, setFile] = useState<File>();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
|
|
|
|
const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
|
|
|
|
setNumPages(pdf.numPages);
|
|
|
|
setNumPages(pdf.numPages);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
async function fetchData() {
|
|
|
|
|
|
|
|
await axios
|
|
|
|
|
|
|
|
.get(`/api/file-storage?key=${RESUME_STORAGE_KEY}&url=${url}`, {
|
|
|
|
|
|
|
|
responseType: 'blob',
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
|
|
setFile(res.data);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchData();
|
|
|
|
|
|
|
|
}, [url]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<Document
|
|
|
|
<Document
|
|
|
|
className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-scroll"
|
|
|
|
className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-scroll"
|
|
|
|
file={file}
|
|
|
|
file={url}
|
|
|
|
loading={<Spinner display="block" label="" size="lg" />}
|
|
|
|
loading={<Spinner display="block" label="" size="lg" />}
|
|
|
|
noData=""
|
|
|
|
noData=""
|
|
|
|
onLoadSuccess={onPdfLoadSuccess}>
|
|
|
|
onLoadSuccess={onPdfLoadSuccess}>
|
|
|
|