fix(verify-page): parse and show mark values
This commit is contained in:
parent
2c586f3c13
commit
f88e2ad680
@ -1,5 +1,10 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
|
import {
|
||||||
|
CreateSignatureEventContent,
|
||||||
|
DocSignatureEvent,
|
||||||
|
Meta,
|
||||||
|
SignedEventContent
|
||||||
|
} from '../types'
|
||||||
import { Mark } from '../types/mark'
|
import { Mark } from '../types/mark'
|
||||||
import {
|
import {
|
||||||
fromUnixTimestamp,
|
fromUnixTimestamp,
|
||||||
@ -38,7 +43,9 @@ export interface FlatMeta
|
|||||||
encryptionKey: string | null
|
encryptionKey: string | null
|
||||||
|
|
||||||
// Parsed Document Signatures
|
// Parsed Document Signatures
|
||||||
parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
|
parsedSignatureEvents: {
|
||||||
|
[signer: `npub1${string}`]: DocSignatureEvent
|
||||||
|
}
|
||||||
|
|
||||||
// Calculated completion time
|
// Calculated completion time
|
||||||
completedAt?: number
|
completedAt?: number
|
||||||
@ -74,7 +81,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
|
|||||||
const [zipUrl, setZipUrl] = useState<string>('')
|
const [zipUrl, setZipUrl] = useState<string>('')
|
||||||
|
|
||||||
const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
|
const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
|
||||||
[signer: `npub1${string}`]: Event
|
[signer: `npub1${string}`]: DocSignatureEvent
|
||||||
}>({})
|
}>({})
|
||||||
|
|
||||||
const [completedAt, setCompletedAt] = useState<number>()
|
const [completedAt, setCompletedAt] = useState<number>()
|
||||||
@ -141,7 +148,10 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Temp. map to hold events and signers
|
// 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 signerStatusMap = new Map<`npub1${string}`, SignStatus>()
|
||||||
|
|
||||||
const getPrevSignerSig = (npub: `npub1${string}`) => {
|
const getPrevSignerSig = (npub: `npub1${string}`) => {
|
||||||
@ -183,9 +193,12 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
|
|||||||
if (isValidSignature) {
|
if (isValidSignature) {
|
||||||
// get the signature of prev signer from the content of current signers signedEvent
|
// get the signature of prev signer from the content of current signers signedEvent
|
||||||
const prevSignersSig = getPrevSignerSig(npub)
|
const prevSignersSig = getPrevSignerSig(npub)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const obj: SignedEventContent = JSON.parse(event.content)
|
const obj: SignedEventContent = JSON.parse(event.content)
|
||||||
|
parsedSignatureEventsMap.set(npub, {
|
||||||
|
...event,
|
||||||
|
parsedContent: obj
|
||||||
|
})
|
||||||
if (
|
if (
|
||||||
obj.prevSig &&
|
obj.prevSig &&
|
||||||
prevSignersSig &&
|
prevSignersSig &&
|
||||||
|
@ -6,7 +6,11 @@ import { useEffect, useRef, useState } from 'react'
|
|||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { NostrController } from '../../controllers'
|
import { NostrController } from '../../controllers'
|
||||||
import { CreateSignatureEventContent, Meta } from '../../types'
|
import {
|
||||||
|
CreateSignatureEventContent,
|
||||||
|
DocSignatureEvent,
|
||||||
|
Meta
|
||||||
|
} from '../../types'
|
||||||
import {
|
import {
|
||||||
decryptArrayBuffer,
|
decryptArrayBuffer,
|
||||||
extractMarksFromSignedMeta,
|
extractMarksFromSignedMeta,
|
||||||
@ -43,13 +47,21 @@ import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
|
|||||||
import { TooltipChild } from '../../components/TooltipChild.tsx'
|
import { TooltipChild } from '../../components/TooltipChild.tsx'
|
||||||
import FileList from '../../components/FileList'
|
import FileList from '../../components/FileList'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
|
import { Mark } from '../../types/mark.ts'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
currentFile: CurrentUserFile | null
|
currentFile: CurrentUserFile | null
|
||||||
|
parsedSignatureEvents: {
|
||||||
|
[signer: `npub1${string}`]: DocSignatureEvent
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
|
const SlimPdfView = ({
|
||||||
|
files,
|
||||||
|
currentFile,
|
||||||
|
parsedSignatureEvents
|
||||||
|
}: PdfViewProps) => {
|
||||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||||
@ -63,6 +75,7 @@ const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
|
|||||||
<div className={styles.view}>
|
<div className={styles.view}>
|
||||||
{files.map((currentUserFile, i) => {
|
{files.map((currentUserFile, i) => {
|
||||||
const { hash, filename, pdfFile, id } = currentUserFile
|
const { hash, filename, pdfFile, id } = currentUserFile
|
||||||
|
const signatureEvents = Object.keys(parsedSignatureEvents)
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -73,22 +86,38 @@ const SlimPdfView = ({ files, currentFile }: PdfViewProps) => {
|
|||||||
className={styles.fileWrapper}
|
className={styles.fileWrapper}
|
||||||
>
|
>
|
||||||
{pdfFile.pages.map((page, i) => {
|
{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 (
|
return (
|
||||||
<div className={styles.imageWrapper} key={i}>
|
<div className={styles.imageWrapper} key={i}>
|
||||||
<img draggable="false" src={page.image} />
|
<img draggable="false" src={page.image} />
|
||||||
{page.drawnFields.map((f, i) => (
|
{marks.map((m) => {
|
||||||
<div
|
return (
|
||||||
key={i}
|
<div
|
||||||
style={{
|
key={m.id}
|
||||||
position: 'absolute',
|
style={{
|
||||||
border: '1px dotted black',
|
position: 'absolute',
|
||||||
left: inPx(f.left),
|
border: '1px dotted black',
|
||||||
top: inPx(f.top),
|
left: inPx(m.location.left),
|
||||||
width: inPx(f.width),
|
top: inPx(m.location.top),
|
||||||
height: inPx(f.height)
|
width: inPx(m.location.width),
|
||||||
}}
|
height: inPx(m.location.height)
|
||||||
></div>
|
}}
|
||||||
))}
|
>
|
||||||
|
{m.value}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
@ -119,10 +148,15 @@ export const VerifyPage = () => {
|
|||||||
*/
|
*/
|
||||||
const { uploadedZip, meta } = location.state || {}
|
const { uploadedZip, meta } = location.state || {}
|
||||||
|
|
||||||
const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
|
const {
|
||||||
useSigitMeta(meta)
|
submittedBy,
|
||||||
|
zipUrl,
|
||||||
console.log('----------', meta)
|
encryptionKey,
|
||||||
|
signers,
|
||||||
|
viewers,
|
||||||
|
fileHashes,
|
||||||
|
parsedSignatureEvents
|
||||||
|
} = useSigitMeta(meta)
|
||||||
|
|
||||||
const profiles = useSigitProfiles([
|
const profiles = useSigitProfiles([
|
||||||
...(submittedBy ? [submittedBy] : []),
|
...(submittedBy ? [submittedBy] : []),
|
||||||
@ -279,7 +313,6 @@ export const VerifyPage = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('fileHashes :>> ', fileHashes)
|
|
||||||
setCurrentFileHashes(fileHashes)
|
setCurrentFileHashes(fileHashes)
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Parsing meta.json')
|
setLoadingSpinnerDesc('Parsing meta.json')
|
||||||
@ -506,6 +539,7 @@ export const VerifyPage = () => {
|
|||||||
<SlimPdfView
|
<SlimPdfView
|
||||||
currentFile={currentFile}
|
currentFile={currentFile}
|
||||||
files={getCurrentUserFiles(files, currentFileHashes)}
|
files={getCurrentUserFiles(files, currentFileHashes)}
|
||||||
|
parsedSignatureEvents={parsedSignatureEvents}
|
||||||
/>
|
/>
|
||||||
</StickySideColumns>
|
</StickySideColumns>
|
||||||
)}
|
)}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { Mark } from './mark'
|
import { Mark } from './mark'
|
||||||
import { Keys } from '../store/auth/types'
|
import { Keys } from '../store/auth/types'
|
||||||
|
import { Event } from 'nostr-tools'
|
||||||
|
|
||||||
export enum UserRole {
|
export enum UserRole {
|
||||||
signer = 'Signer',
|
signer = 'Signer',
|
||||||
@ -44,3 +45,7 @@ export interface UserAppData {
|
|||||||
keyPair?: Keys // this key pair is used for blossom requests authentication
|
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
|
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
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user