src/hooks/useSigitMeta.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react'
-import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
+import {
+  CreateSignatureEventContent,
+  DocSignatureEvent,
+  Meta,
+  SignedEventContent
+} from '../types'
 import { Mark } from '../types/mark'
 import {
   fromUnixTimestamp,
@@ -38,7 +43,9 @@ export interface FlatMeta
   encryptionKey: string | null
 
   // Parsed Document Signatures
-  parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
+  parsedSignatureEvents: {
+    [signer: `npub1${string}`]: DocSignatureEvent
+  }
 
   // Calculated completion time
   completedAt?: number
@@ -74,7 +81,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
   const [zipUrl, setZipUrl] = useState<string>('')
 
   const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
-    [signer: `npub1${string}`]: Event
+    [signer: `npub1${string}`]: DocSignatureEvent
   }>({})
 
   const [completedAt, setCompletedAt] = useState<number>()
@@ -141,7 +148,10 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
         }
 
         // Temp. map to hold events and signers
-        const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
+        const parsedSignatureEventsMap = new Map<
+          `npub1${string}`,
+          DocSignatureEvent
+        >()
         const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
 
         const getPrevSignerSig = (npub: `npub1${string}`) => {
@@ -183,9 +193,12 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
           if (isValidSignature) {
             // get the signature of prev signer from the content of current signers signedEvent
             const prevSignersSig = getPrevSignerSig(npub)
-
             try {
               const obj: SignedEventContent = JSON.parse(event.content)
+              parsedSignatureEventsMap.set(npub, {
+                ...event,
+                parsedContent: obj
+              })
               if (
                 obj.prevSig &&
                 prevSignersSig &&

src/pages/verify/index.tsx

@@ -6,7 +6,11 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import { CreateSignatureEventContent, Meta } from '../../types'
+import {
+  CreateSignatureEventContent,
+  DocSignatureEvent,
+  Meta
+} from '../../types'
 import {
   decryptArrayBuffer,
   extractMarksFromSignedMeta,
@@ -43,13 +47,21 @@ import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
 import { TooltipChild } from '../../components/TooltipChild.tsx'
 import FileList from '../../components/FileList'
 import { CurrentUserFile } from '../../types/file.ts'
+import { Mark } from '../../types/mark.ts'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
   currentFile: CurrentUserFile | null
+  parsedSignatureEvents: {
+    [signer: `npub1${string}`]: DocSignatureEvent
+  }
 }
 
-const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
+const SlimPdfView = ({
+  files,
+  currentFile,
+  parsedSignatureEvents
+}: PdfViewProps) => {
   const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
   useEffect(() => {
     if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
@@ -63,6 +75,7 @@ const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
     <div className={styles.view}>
       {files.map((currentUserFile, i) => {
         const { hash, filename, pdfFile, id } = currentUserFile
+        const signatureEvents = Object.keys(parsedSignatureEvents)
         if (!hash) return
         return (
           <>
@@ -73,22 +86,38 @@ const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
               className={styles.fileWrapper}
             >
               {pdfFile.pages.map((page, i) => {
+                const marks: Mark[] = []
+
+                signatureEvents.forEach((e) => {
+                  const m = parsedSignatureEvents[
+                    e as `npub1${string}`
+                  ].parsedContent?.marks.filter(
+                    (m) => m.pdfFileHash == hash && m.location.page == i
+                  )
+                  if (m) {
+                    marks.push(...m)
+                  }
+                })
                 return (
                   <div className={styles.imageWrapper} key={i}>
                     <img draggable="false" src={page.image} />
-                    {page.drawnFields.map((f, i) => (
-                      <div
-                        key={i}
-                        style={{
-                          position: 'absolute',
-                          border: '1px dotted black',
-                          left: inPx(f.left),
-                          top: inPx(f.top),
-                          width: inPx(f.width),
-                          height: inPx(f.height)
-                        }}
-                      ></div>
-                    ))}
+                    {marks.map((m) => {
+                      return (
+                        <div
+                          key={m.id}
+                          style={{
+                            position: 'absolute',
+                            border: '1px dotted black',
+                            left: inPx(m.location.left),
+                            top: inPx(m.location.top),
+                            width: inPx(m.location.width),
+                            height: inPx(m.location.height)
+                          }}
+                        >
+                          {m.value}
+                        </div>
+                      )
+                    })}
                   </div>
                 )
               })}
@@ -119,10 +148,15 @@ export const VerifyPage = () => {
    */
   const { uploadedZip, meta } = location.state || {}
 
-  const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
-    useSigitMeta(meta)
-
-  console.log('----------', meta)
+  const {
+    submittedBy,
+    zipUrl,
+    encryptionKey,
+    signers,
+    viewers,
+    fileHashes,
+    parsedSignatureEvents
+  } = useSigitMeta(meta)
 
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),
@@ -279,7 +313,6 @@ export const VerifyPage = () => {
       }
     }
 
-    console.log('fileHashes :>> ', fileHashes)
     setCurrentFileHashes(fileHashes)
 
     setLoadingSpinnerDesc('Parsing meta.json')
@@ -506,6 +539,7 @@ export const VerifyPage = () => {
             <SlimPdfView
               currentFile={currentFile}
               files={getCurrentUserFiles(files, currentFileHashes)}
+              parsedSignatureEvents={parsedSignatureEvents}
             />
           </StickySideColumns>
         )}

src/types/core.ts

@@ -1,5 +1,6 @@
 import { Mark } from './mark'
 import { Keys } from '../store/auth/types'
+import { Event } from 'nostr-tools'
 
 export enum UserRole {
   signer = 'Signer',
@@ -44,3 +45,7 @@ export interface UserAppData {
   keyPair?: Keys // this key pair is used for blossom requests authentication
   blossomUrls: string[] // array for storing Urls for the files that stores all the sigits and processedGiftWraps on blossom
 }
+
+export interface DocSignatureEvent extends Event {
+  parsedContent?: SignedEventContent
+}