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

import { PdfFile } from '../../types/drawing.ts'
import { Box } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts'

interface PdfViewProps {
  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
  currentUserMarks: CurrentUserMark[]
  handleMarkClick: (id: number) => void
  selectedMarkValue: string
  selectedMark: CurrentUserMark | null
}

const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
  const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
    return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)
  }
  return (
    <Box sx={{ width: '100%' }}>
      {
        files.map(({ pdfFile, hash }, i) => {
          if (!hash) return
          return (
            <PdfItem
              pdfFile={pdfFile}
              key={i}
              currentUserMarks={filterByFile(currentUserMarks, hash)}
              selectedMark={selectedMark}
              handleMarkClick={handleMarkClick}
              selectedMarkValue={selectedMarkValue}
          />
          )
        })
      }
    </Box>
  )
}

export default PdfView;