2024-08-14 14:19:32 +00:00
|
|
|
import { Divider } from '@mui/material'
|
2024-07-17 08:25:02 +00:00
|
|
|
import PdfItem from './PdfItem.tsx'
|
2024-08-20 14:04:27 +00:00
|
|
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
2024-08-13 09:48:52 +00:00
|
|
|
import { CurrentUserFile } from '../../types/file.ts'
|
2024-08-14 09:24:15 +00:00
|
|
|
import { useEffect, useRef } from 'react'
|
2024-07-17 08:25:02 +00:00
|
|
|
|
|
|
|
interface PdfViewProps {
|
2024-08-20 14:04:27 +00:00
|
|
|
currentFile: CurrentUserFile | null
|
2024-08-02 10:43:51 +00:00
|
|
|
currentUserMarks: CurrentUserMark[]
|
2024-08-20 14:04:27 +00:00
|
|
|
files: CurrentUserFile[]
|
2024-07-18 12:38:07 +00:00
|
|
|
handleMarkClick: (id: number) => void
|
2024-08-20 14:04:27 +00:00
|
|
|
otherUserMarks: Mark[]
|
2024-08-02 10:43:51 +00:00
|
|
|
selectedMark: CurrentUserMark | null
|
2024-08-20 14:04:27 +00:00
|
|
|
selectedMarkValue: string
|
2024-07-17 08:25:02 +00:00
|
|
|
}
|
|
|
|
|
2024-08-05 11:11:15 +00:00
|
|
|
/**
|
|
|
|
* Responsible for rendering Pdf files.
|
|
|
|
*/
|
2024-08-13 09:48:52 +00:00
|
|
|
const PdfView = ({
|
|
|
|
files,
|
|
|
|
currentUserMarks,
|
|
|
|
handleMarkClick,
|
|
|
|
selectedMarkValue,
|
2024-08-14 09:24:15 +00:00
|
|
|
selectedMark,
|
2024-08-20 14:04:27 +00:00
|
|
|
currentFile,
|
|
|
|
otherUserMarks
|
2024-08-13 09:48:52 +00:00
|
|
|
}: 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])
|
2024-08-13 09:48:52 +00:00
|
|
|
const filterByFile = (
|
|
|
|
currentUserMarks: CurrentUserMark[],
|
2024-08-15 09:25:37 +00:00
|
|
|
hash: string
|
2024-08-13 09:48:52 +00:00
|
|
|
): CurrentUserMark[] => {
|
|
|
|
return currentUserMarks.filter(
|
2024-08-15 09:25:37 +00:00
|
|
|
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
2024-08-13 09:48:52 +00:00
|
|
|
)
|
2024-07-17 08:25:02 +00:00
|
|
|
}
|
2024-08-20 14:04:27 +00:00
|
|
|
const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
|
|
|
|
return marks.filter((mark) => 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
|
2024-07-17 08:25:02 +00:00
|
|
|
return (
|
2024-08-14 13:08:42 +00:00
|
|
|
<>
|
2024-08-14 09:24:15 +00:00
|
|
|
{files.map((currentUserFile, index, arr) => {
|
2024-08-21 15:07:29 +00:00
|
|
|
const { hash, pdfFile, id, filename } = currentUserFile
|
|
|
|
|
2024-08-13 09:48:52 +00:00
|
|
|
if (!hash) return
|
|
|
|
return (
|
2024-08-14 09:24:15 +00:00
|
|
|
<div
|
2024-08-21 15:07:29 +00:00
|
|
|
id={filename}
|
2024-08-14 09:24:15 +00:00
|
|
|
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}
|
2024-08-20 14:04:27 +00:00
|
|
|
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
2024-08-14 09:24:15 +00:00
|
|
|
/>
|
|
|
|
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
|
|
|
</div>
|
2024-08-13 09:48:52 +00:00
|
|
|
)
|
|
|
|
})}
|
2024-08-14 13:08:42 +00:00
|
|
|
</>
|
2024-07-17 08:25:02 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2024-08-13 09:48:52 +00:00
|
|
|
export default PdfView
|