diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss index bbf9311..4103897 100644 --- a/src/components/FileList/style.module.scss +++ b/src/components/FileList/style.module.scss @@ -48,17 +48,17 @@ flex-grow: 1; font-size: 16px; font-weight: 500; + + &.active { + background: #4c82a3; + color: white; + } } .fileItem:hover { transition: ease 0.2s; background: #4c82a3; color: white; - - &.active { - background: #4c82a3; - color: white; - } } .fileName { diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx index eb5ceff..6e8aa64 100644 --- a/src/components/PDFView/PdfItem.tsx +++ b/src/components/PDFView/PdfItem.tsx @@ -1,6 +1,6 @@ import { PdfFile } from '../../types/drawing.ts' import { CurrentUserMark } from '../../types/mark.ts' -import PdfPageItem from './PdfPageItem.tsx'; +import PdfPageItem from './PdfPageItem.tsx' interface PdfItemProps { pdfFile: PdfFile @@ -13,23 +13,31 @@ interface PdfItemProps { /** * Responsible for displaying pages of a single Pdf File. */ -const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => { - const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => { - return marks.filter((m) => m.mark.location.page === page); +const PdfItem = ({ + pdfFile, + currentUserMarks, + handleMarkClick, + selectedMarkValue, + selectedMark +}: PdfItemProps) => { + const filterByPage = ( + marks: CurrentUserMark[], + page: number + ): CurrentUserMark[] => { + return marks.filter((m) => m.mark.location.page === page) } - return ( - pdfFile.pages.map((page, i) => { - return ( - - ) - })) + return pdfFile.pages.map((page, i) => { + return ( + + ) + }) } -export default PdfItem \ No newline at end of file +export default PdfItem diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx index fc49f79..1d4b522 100644 --- a/src/components/PDFView/PdfMarking.tsx +++ b/src/components/PDFView/PdfMarking.tsx @@ -126,6 +126,7 @@ const PdfMarking = (props: PdfMarkingProps) => { {currentUserMarks?.length > 0 && (
{ +const PdfPageItem = ({ + page, + currentUserMarks, + handleMarkClick, + selectedMarkValue, + selectedMark +}: PdfPageProps) => { + useEffect(() => { + if (selectedMark !== null && !!markRefs.current[selectedMark.id]) { + markRefs.current[selectedMark.id]?.scrollIntoView({ + behavior: 'smooth', + block: 'end' + }) + } + }, [selectedMark]) + const markRefs = useRef<(HTMLDivElement | null)[]>([]) return (
- - { - currentUserMarks.map((m, i) => ( + + {currentUserMarks.map((m, i) => ( +
(markRefs.current[m.id] = el)}> + /> +
))}
) } -export default PdfPageItem \ No newline at end of file +export default PdfPageItem diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index 4024d1a..2936f59 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -1,7 +1,8 @@ -import { Box } from '@mui/material' +import { Box, Divider } from '@mui/material' import PdfItem from './PdfItem.tsx' import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserFile } from '../../types/file.ts' +import { useEffect, useRef } from 'react' interface PdfViewProps { files: CurrentUserFile[] @@ -9,6 +10,7 @@ interface PdfViewProps { handleMarkClick: (id: number) => void selectedMarkValue: string selectedMark: CurrentUserMark | null + currentFile: CurrentUserFile | null } /** @@ -19,29 +21,48 @@ const PdfView = ({ currentUserMarks, handleMarkClick, selectedMarkValue, - selectedMark + selectedMark, + currentFile }: PdfViewProps) => { + 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[], - hash: string + fileName: string ): CurrentUserMark[] => { return currentUserMarks.filter( - (currentUserMark) => currentUserMark.mark.pdfFileHash === hash + (currentUserMark) => currentUserMark.mark.fileName === fileName ) } + const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean => + !(index !== files.length - 1) return ( - {files.map(({ pdfFile, hash }, i) => { + {files.map((currentUserFile, index, arr) => { + const { hash, pdfFile, filename, id } = currentUserFile if (!hash) return return ( - +
(pdfRefs.current[id] = el)} + key={index} + > + + {isNotLastPdfFile(index, arr) && File Separator} +
) })} diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 830f9ef..8d6a278 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -338,32 +338,36 @@ export const CreatePage = () => { fileHashes[file.name] = hash } + console.log('file hashes: ', fileHashes) + return fileHashes } - const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => { - return drawnPdfs.flatMap((drawnPdf) => { - const fileHash = fileHashes[drawnPdf.file.name]; - return drawnPdf.pages.flatMap((page, index) => { - return page.drawnFields.map((drawnField) => { - return { - type: drawnField.type, - location: { - page: index, - top: drawnField.top, - left: drawnField.left, - height: drawnField.height, - width: drawnField.width, - }, - npub: drawnField.counterpart, - pdfFileHash: fileHash - } + const createMarks = (fileHashes: { [key: string]: string }): Mark[] => { + return drawnPdfs + .flatMap((drawnPdf) => { + const fileHash = fileHashes[drawnPdf.file.name] + return drawnPdf.pages.flatMap((page, index) => { + return page.drawnFields.map((drawnField) => { + return { + type: drawnField.type, + location: { + page: index, + top: drawnField.top, + left: drawnField.left, + height: drawnField.height, + width: drawnField.width + }, + npub: drawnField.counterpart, + pdfFileHash: fileHash, + fileName: drawnPdf.file.name + } + }) }) }) - }) .map((mark, index) => { - return {...mark, id: index } - }); + return { ...mark, id: index } + }) } // Handle errors during zip file generation @@ -431,13 +435,9 @@ export const CreatePage = () => { if (!arraybuffer) return null - return new File( - [new Blob([arraybuffer])], - `${unixNow}.sigit.zip`, - { - type: 'application/zip' - } - ) + return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, { + type: 'application/zip' + }) } // Handle errors during file upload @@ -545,9 +545,7 @@ export const CreatePage = () => { : viewers.map((viewer) => viewer.pubkey) ).filter((receiver) => receiver !== usersPubkey) - return receivers.map((receiver) => - sendNotification(receiver, meta) - ) + return receivers.map((receiver) => sendNotification(receiver, meta)) } const handleCreate = async () => { diff --git a/src/types/mark.ts b/src/types/mark.ts index c0f9b88..efc1899 100644 --- a/src/types/mark.ts +++ b/src/types/mark.ts @@ -14,6 +14,7 @@ export interface Mark { pdfFileHash: string type: MarkType location: MarkLocation + fileName: string value?: string }