sigit.io/src/components/PDFView/index.tsx

73 lines
2.0 KiB
TypeScript
Raw Normal View History

import { Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
2024-08-14 09:24:15 +00:00
import { useEffect, useRef } from 'react'
interface PdfViewProps {
files: CurrentUserFile[]
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
selectedMarkValue: string
selectedMark: CurrentUserMark | null
2024-08-14 09:24:15 +00:00
currentFile: CurrentUserFile | null
}
/**
* Responsible for rendering Pdf files.
*/
const PdfView = ({
files,
currentUserMarks,
handleMarkClick,
selectedMarkValue,
2024-08-14 09:24:15 +00:00
selectedMark,
currentFile
}: PdfViewProps) => {
2024-08-14 09:24:15 +00:00
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
pdfRefs.current[currentFile.id]?.scrollIntoView({
behavior: 'smooth',
block: 'end'
})
}
}, [currentFile])
const filterByFile = (
currentUserMarks: CurrentUserMark[],
2024-08-15 09:25:37 +00:00
hash: string
): CurrentUserMark[] => {
return currentUserMarks.filter(
2024-08-15 09:25:37 +00:00
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
)
}
2024-08-14 09:24:15 +00:00
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
2024-08-14 13:08:42 +00:00
index !== files.length - 1
return (
2024-08-14 13:08:42 +00:00
<>
2024-08-14 09:24:15 +00:00
{files.map((currentUserFile, index, arr) => {
2024-08-15 09:25:37 +00:00
const { hash, pdfFile, id } = currentUserFile
if (!hash) return
return (
2024-08-14 09:24:15 +00:00
<div
id={pdfFile.file.name}
ref={(el) => (pdfRefs.current[id] = el)}
key={index}
>
<PdfItem
pdfFile={pdfFile}
2024-08-15 09:25:37 +00:00
currentUserMarks={filterByFile(currentUserMarks, hash)}
2024-08-14 09:24:15 +00:00
selectedMark={selectedMark}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
/>
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
</div>
)
})}
2024-08-14 13:08:42 +00:00
</>
)
}
export default PdfView