Merge pull request 'fix: displays complete marks from other users' (#156) from issue-155 into staging

Reviewed-on: #156
Reviewed-by: enes <enes@noreply.git.nostrdev.com>

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 (
       <PdfPageItem
@@ -35,6 +40,7 @@ const PdfItem = ({
         handleMarkClick={handleMarkClick}
         selectedMarkValue={selectedMarkValue}
         selectedMark={selectedMark}
+        otherUserMarks={filterMarksByPage(otherUserMarks, i)}
       />
     )
   })

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<CurrentUserMark | null>(null)
   const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
@@ -142,6 +144,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
                   selectedMarkValue={selectedMarkValue}
                   selectedMark={selectedMark}
                   currentUserMarks={currentUserMarks}
+                  otherUserMarks={otherUserMarks}
                 />
               </div>
             )}

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 = ({
           />
         </div>
       ))}
+      {otherUserMarks.map((m, i) => (
+        <div
+          key={i}
+          className={pdfViewStyles.otherUserMarksDisplay}
+          style={{
+            left: inPx(m.location.left),
+            top: inPx(m.location.top),
+            width: inPx(m.location.width),
+            height: inPx(m.location.height)
+          }}
+        >
+          {m.value}
+        </div>
+      ))}
     </div>
   )
 }

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) && <Divider>File Separator</Divider>}
           </div>

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;
+}

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<Mark[]>([])
 
   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}
     />
   )

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
 }