From 4d4a5b63cf466af15d2b2414a52adeda8bd7cb8a Mon Sep 17 00:00:00 2001 From: Eugene Date: Tue, 20 Aug 2024 17:04:27 +0300 Subject: [PATCH] fix: displays complete marks from other users --- src/components/PDFView/PdfItem.tsx | 14 +++++++++---- src/components/PDFView/PdfMarking.tsx | 13 +++++++----- src/components/PDFView/PdfPageItem.tsx | 26 ++++++++++++++++++++---- src/components/PDFView/index.tsx | 20 +++++++++++------- src/components/PDFView/style.module.scss | 8 ++++++++ src/pages/sign/index.tsx | 7 ++++++- src/utils/mark.ts | 7 ++++++- 7 files changed, 73 insertions(+), 22 deletions(-) diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx index 6e8aa64..c502bb4 100644 --- a/src/components/PDFView/PdfItem.tsx +++ b/src/components/PDFView/PdfItem.tsx @@ -1,13 +1,14 @@ import { PdfFile } from '../../types/drawing.ts' -import { CurrentUserMark } from '../../types/mark.ts' +import { CurrentUserMark, Mark } from '../../types/mark.ts' import PdfPageItem from './PdfPageItem.tsx' interface PdfItemProps { - pdfFile: PdfFile currentUserMarks: CurrentUserMark[] handleMarkClick: (id: number) => void - selectedMarkValue: string + otherUserMarks: Mark[] + pdfFile: PdfFile selectedMark: CurrentUserMark | null + selectedMarkValue: string } /** @@ -18,7 +19,8 @@ const PdfItem = ({ currentUserMarks, handleMarkClick, selectedMarkValue, - selectedMark + selectedMark, + otherUserMarks }: PdfItemProps) => { const filterByPage = ( marks: CurrentUserMark[], @@ -26,6 +28,9 @@ const PdfItem = ({ ): CurrentUserMark[] => { return marks.filter((m) => m.mark.location.page === page) } + const filterMarksByPage = (marks: Mark[], page: number): Mark[] => { + return marks.filter((mark) => mark.location.page === page) + } return pdfFile.pages.map((page, i) => { return ( ) }) diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx index 8d3a369..9fff924 100644 --- a/src/components/PDFView/PdfMarking.tsx +++ b/src/components/PDFView/PdfMarking.tsx @@ -18,13 +18,14 @@ import { UsersDetails } from '../UsersDetails.tsx' import { Meta } from '../../types' interface PdfMarkingProps { - files: CurrentUserFile[] currentUserMarks: CurrentUserMark[] - setIsReadyToSign: (isReadyToSign: boolean) => void - setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void - setUpdatedMarks: (markToUpdate: Mark) => void + files: CurrentUserFile[] handleDownload: () => void meta: Meta | null + otherUserMarks: Mark[] + setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void + setIsReadyToSign: (isReadyToSign: boolean) => void + setUpdatedMarks: (markToUpdate: Mark) => void } /** @@ -41,7 +42,8 @@ const PdfMarking = (props: PdfMarkingProps) => { setCurrentUserMarks, setUpdatedMarks, handleDownload, - meta + meta, + otherUserMarks } = props const [selectedMark, setSelectedMark] = useState(null) const [selectedMarkValue, setSelectedMarkValue] = useState('') @@ -142,6 +144,7 @@ const PdfMarking = (props: PdfMarkingProps) => { selectedMarkValue={selectedMarkValue} selectedMark={selectedMark} currentUserMarks={currentUserMarks} + otherUserMarks={otherUserMarks} /> )} diff --git a/src/components/PDFView/PdfPageItem.tsx b/src/components/PDFView/PdfPageItem.tsx index a670f2f..5310bd0 100644 --- a/src/components/PDFView/PdfPageItem.tsx +++ b/src/components/PDFView/PdfPageItem.tsx @@ -1,14 +1,17 @@ import styles from '../DrawPDFFields/style.module.scss' import { PdfPage } from '../../types/drawing.ts' -import { CurrentUserMark } from '../../types/mark.ts' +import { CurrentUserMark, Mark } from '../../types/mark.ts' import PdfMarkItem from './PdfMarkItem.tsx' import { useEffect, useRef } from 'react' +import pdfViewStyles from './style.module.scss' +import { inPx } from '../../utils/pdf.ts' interface PdfPageProps { - page: PdfPage currentUserMarks: CurrentUserMark[] handleMarkClick: (id: number) => void - selectedMarkValue: string + otherUserMarks: Mark[] + page: PdfPage selectedMark: CurrentUserMark | null + selectedMarkValue: string } /** @@ -19,7 +22,8 @@ const PdfPageItem = ({ currentUserMarks, handleMarkClick, selectedMarkValue, - selectedMark + selectedMark, + otherUserMarks }: PdfPageProps) => { useEffect(() => { if (selectedMark !== null && !!markRefs.current[selectedMark.id]) { @@ -49,6 +53,20 @@ const PdfPageItem = ({ /> ))} + {otherUserMarks.map((m, i) => ( +
+ {m.value} +
+ ))} ) } diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index d67d372..ef765f0 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -1,16 +1,17 @@ import { Divider } from '@mui/material' import PdfItem from './PdfItem.tsx' -import { CurrentUserMark } from '../../types/mark.ts' +import { CurrentUserMark, Mark } from '../../types/mark.ts' import { CurrentUserFile } from '../../types/file.ts' import { useEffect, useRef } from 'react' interface PdfViewProps { - files: CurrentUserFile[] - currentUserMarks: CurrentUserMark[] - handleMarkClick: (id: number) => void - selectedMarkValue: string - selectedMark: CurrentUserMark | null currentFile: CurrentUserFile | null + currentUserMarks: CurrentUserMark[] + files: CurrentUserFile[] + handleMarkClick: (id: number) => void + otherUserMarks: Mark[] + selectedMark: CurrentUserMark | null + selectedMarkValue: string } /** @@ -22,7 +23,8 @@ const PdfView = ({ handleMarkClick, selectedMarkValue, selectedMark, - currentFile + currentFile, + otherUserMarks }: PdfViewProps) => { const pdfRefs = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { @@ -41,6 +43,9 @@ const PdfView = ({ (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 ( @@ -60,6 +65,7 @@ const PdfView = ({ selectedMark={selectedMark} handleMarkClick={handleMarkClick} selectedMarkValue={selectedMarkValue} + otherUserMarks={filterMarksByFile(otherUserMarks, hash)} /> {isNotLastPdfFile(index, arr) && File Separator} diff --git a/src/components/PDFView/style.module.scss b/src/components/PDFView/style.module.scss index 5029747..3a893d4 100644 --- a/src/components/PDFView/style.module.scss +++ b/src/components/PDFView/style.module.scss @@ -29,3 +29,11 @@ height: 100%; gap: 10px; } + +.otherUserMarksDisplay { + position: absolute; + z-index: 50; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx index be755f4..b8cfe5c 100644 --- a/src/pages/sign/index.tsx +++ b/src/pages/sign/index.tsx @@ -32,7 +32,8 @@ import { readContentOfZipEntry, sendNotification, signEventForMetaFile, - updateUsersAppData + updateUsersAppData, + findOtherUserMarks } from '../../utils' import { Container } from '../../components/Container' import { DisplayMeta } from './internal/displayMeta' @@ -110,6 +111,7 @@ export const SignPage = () => { [] ) const [isReadyToSign, setIsReadyToSign] = useState(false) + const [otherUserMarks, setOtherUserMarks] = useState([]) useEffect(() => { if (signers.length > 0) { @@ -209,6 +211,8 @@ export const SignPage = () => { ) const signedMarks = extractMarksFromSignedMeta(meta) const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks) + const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!) + setOtherUserMarks(otherUserMarks) setCurrentUserMarks(currentUserMarks) setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks)) } @@ -960,6 +964,7 @@ export const SignPage = () => { setCurrentUserMarks={setCurrentUserMarks} setUpdatedMarks={setUpdatedMarks} handleDownload={handleDownload} + otherUserMarks={otherUserMarks} meta={meta} /> ) diff --git a/src/utils/mark.ts b/src/utils/mark.ts index f0cd47e..effa2ba 100644 --- a/src/utils/mark.ts +++ b/src/utils/mark.ts @@ -127,6 +127,10 @@ const getUpdatedMark = ( } } +const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => { + return marks.filter((mark) => mark.npub !== hexToNpub(pubkey)) +} + export { getCurrentUserMarks, filterMarksByPubkey, @@ -136,5 +140,6 @@ export { updateMarks, updateCurrentUserMarks, isCurrentValueLast, - getUpdatedMark + getUpdatedMark, + findOtherUserMarks }