80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import PdfItem from './PdfItem.tsx'
|
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
|
import { CurrentUserFile } from '../../types/file.ts'
|
|
import { useEffect, useRef } from 'react'
|
|
import { FileDivider } from '../FileDivider.tsx'
|
|
import React from 'react'
|
|
|
|
interface PdfViewProps {
|
|
currentFile: CurrentUserFile | null
|
|
currentUserMarks: CurrentUserMark[]
|
|
files: CurrentUserFile[]
|
|
handleMarkClick: (id: number) => void
|
|
otherUserMarks: Mark[]
|
|
selectedMark: CurrentUserMark | null
|
|
selectedMarkValue: string
|
|
}
|
|
|
|
/**
|
|
* Responsible for rendering Pdf files.
|
|
*/
|
|
const PdfView = ({
|
|
files,
|
|
currentUserMarks,
|
|
handleMarkClick,
|
|
selectedMarkValue,
|
|
selectedMark,
|
|
currentFile,
|
|
otherUserMarks
|
|
}: PdfViewProps) => {
|
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
|
useEffect(() => {
|
|
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
|
pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}, [currentFile])
|
|
const filterByFile = (
|
|
currentUserMarks: CurrentUserMark[],
|
|
hash: string
|
|
): CurrentUserMark[] => {
|
|
return currentUserMarks.filter(
|
|
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
|
)
|
|
}
|
|
const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
|
|
return marks.filter((mark) => mark.pdfFileHash === hash)
|
|
}
|
|
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
|
index !== files.length - 1
|
|
return (
|
|
<div className="files-wrapper">
|
|
{files.map((currentUserFile, index, arr) => {
|
|
const { hash, file, id } = currentUserFile
|
|
|
|
if (!hash) return
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<div
|
|
id={file.name}
|
|
className="file-wrapper"
|
|
ref={(el) => (pdfRefs.current[id] = el)}
|
|
>
|
|
<PdfItem
|
|
file={file}
|
|
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
|
selectedMark={selectedMark}
|
|
handleMarkClick={handleMarkClick}
|
|
selectedMarkValue={selectedMarkValue}
|
|
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
|
/>
|
|
</div>
|
|
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PdfView
|