feat(pdf-marking): adds file downloading functionality

src/components/FileList/index.tsx

@@ -0,0 +1,41 @@
+import { CurrentUserFile } from '../../types/file.ts'
+import styles from './style.module.scss'
+import { Button } from '@mui/material'
+
+interface FileListProps {
+  files: CurrentUserFile[]
+  currentFile: CurrentUserFile
+  setCurrentFile: (file: CurrentUserFile) => void
+  handleDownload: () => void
+}
+
+const FileList = ({
+  files,
+  currentFile,
+  setCurrentFile,
+  handleDownload
+}: FileListProps) => {
+  const isActive = (file: CurrentUserFile) => file.id === currentFile.id
+  return (
+    <div className={styles.container}>
+      <div className={styles.files}></div>
+      <ul>
+        {files.map((file: CurrentUserFile) => (
+          <li
+            key={file.id}
+            className={`${styles.fileItem} ${isActive(file) && styles.active}`}
+            onClick={() => setCurrentFile(file)}
+          >
+            <span className={styles.fileNumber}>{file.id}</span>
+            <span className={styles.fileName}>{file.filename}</span>
+          </li>
+        ))}
+      </ul>
+      <Button variant="contained" fullWidth onClick={handleDownload}>
+        Download Files
+      </Button>
+    </div>
+  )
+}
+
+export default FileList

src/components/FileList/style.module.scss

@@ -0,0 +1,78 @@
+.container {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  grid-gap: 15px;
+  max-height: 350px;
+  overflow: auto;
+  padding: 0 5px 0 0;
+  margin: 0 -5px 0 0;
+}
+
+.files::-webkit-scrollbar {
+  width: 10px;
+}
+
+.files::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.files::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.fileItem {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 5px 10px;
+  align-items: center;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.fileItem:hover {
+  transition: ease 0.2s;
+  background: #4c82a3;
+  color: white;
+
+  &.active {
+    background: #4c82a3;
+    color: white;
+  }
+}
+
+.fileName {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.fileNumber {
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/components/PDFView/PdfMarking.tsx

@@ -1,24 +1,26 @@
 import PdfView from './index.tsx'
 import MarkFormField from '../MarkFormField'
-import { PdfFile } from '../../types/drawing.ts'
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import React, { useState, useEffect } from 'react'
 import {
   findNextIncompleteCurrentUserMark,
   getUpdatedMark,
-  isCurrentUserMarksComplete,
   updateCurrentUserMarks
 } from '../../utils'
 import { EMPTY } from '../../utils/const.ts'
 import { Container } from '../Container'
-import styles from '../../pages/sign/style.module.scss'
+import signPageStyles from '../../pages/sign/style.module.scss'
+import styles from './style.module.scss'
+import { CurrentUserFile } from '../../types/file.ts'
+import FileList from '../FileList'
 
 interface PdfMarkingProps {
-  files: { pdfFile: PdfFile; filename: string; hash: string | null }[]
+  files: CurrentUserFile[]
   currentUserMarks: CurrentUserMark[]
   setIsReadyToSign: (isReadyToSign: boolean) => void
   setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
   setUpdatedMarks: (markToUpdate: Mark) => void
+  handleDownload: () => void
 }
 
 /**
@@ -33,10 +35,12 @@ const PdfMarking = (props: PdfMarkingProps) => {
     currentUserMarks,
     setIsReadyToSign,
     setCurrentUserMarks,
-    setUpdatedMarks
+    setUpdatedMarks,
+    handleDownload
   } = props
   const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
   const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
+  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
 
   useEffect(() => {
     if (selectedMark === null && currentUserMarks.length > 0) {
@@ -47,6 +51,12 @@ const PdfMarking = (props: PdfMarkingProps) => {
     }
   }, [currentUserMarks, selectedMark])
 
+  useEffect(() => {
+    if (currentFile === null && files.length > 0) {
+      setCurrentFile(files[0])
+    }
+  }, [files, currentFile])
+
   const handleMarkClick = (id: number) => {
     const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
     setSelectedMark(nextMark!)
@@ -101,8 +111,20 @@ const PdfMarking = (props: PdfMarkingProps) => {
 
   return (
     <>
-      <Container className={styles.container}>
+      <Container className={signPageStyles.container}>
+        <div className={styles.container}>
+          <div>
+            {currentFile !== null && (
+              <FileList
+                files={files}
+                currentFile={currentFile}
+                setCurrentFile={setCurrentFile}
+                handleDownload={handleDownload}
+              />
+            )}
+          </div>
           {currentUserMarks?.length > 0 && (
+            <div className={styles.pdfView}>
               <PdfView
                 files={files}
                 handleMarkClick={handleMarkClick}
@@ -110,7 +132,9 @@ const PdfMarking = (props: PdfMarkingProps) => {
                 selectedMark={selectedMark}
                 currentUserMarks={currentUserMarks}
               />
+            </div>
           )}
+        </div>
         {selectedMark !== null && (
           <MarkFormField
             handleSubmit={handleSubmit}

src/components/PDFView/index.tsx

@@ -1,10 +1,10 @@
-import { PdfFile } from '../../types/drawing.ts'
 import { Box } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark } from '../../types/mark.ts'
+import { CurrentUserFile } from '../../types/file.ts'
 
 interface PdfViewProps {
-  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
+  files: CurrentUserFile[]
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   selectedMarkValue: string
@@ -14,14 +14,24 @@ interface PdfViewProps {
 /**
  * Responsible for rendering Pdf files.
  */
-const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
+const PdfView = ({
-  const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
+  files,
-    return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfViewProps) => {
+  const filterByFile = (
+    currentUserMarks: CurrentUserMark[],
+    hash: string
+  ): CurrentUserMark[] => {
+    return currentUserMarks.filter(
+      (currentUserMark) => currentUserMark.mark.pdfFileHash === hash
+    )
   }
   return (
     <Box sx={{ width: '100%' }}>
-      {
+      {files.map(({ pdfFile, hash }, i) => {
-        files.map(({ pdfFile, hash }, i) => {
         if (!hash) return
         return (
           <PdfItem
@@ -33,10 +43,9 @@ const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue,
             selectedMarkValue={selectedMarkValue}
           />
         )
-        })
+      })}
-      }
     </Box>
   )
 }
 
-export default PdfView;
+export default PdfView

src/components/PDFView/style.module.scss

@@ -14,3 +14,16 @@
   max-height: 100%;
   object-fit: contain; /* Ensure the image fits within the container */
 }
+
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.pdfView {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

src/pages/sign/index.tsx

@@ -16,13 +16,16 @@ import { State } from '../../store/rootReducer'
 import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
 import {
   decryptArrayBuffer,
-  encryptArrayBuffer, extractMarksFromSignedMeta,
+  encryptArrayBuffer,
+  extractMarksFromSignedMeta,
   extractZipUrlAndEncryptionKey,
   generateEncryptionKey,
-  generateKeysFile, getFilesWithHashes,
+  generateKeysFile,
+  getCurrentUserFiles,
   getHash,
   hexToNpub,
-  isOnline, loadZip,
+  isOnline,
+  loadZip,
   now,
   npubToHex,
   parseJson,
@@ -41,9 +44,12 @@ import { getLastSignersSig } from '../../utils/sign.ts'
 import {
   filterMarksByPubkey,
   getCurrentUserMarks,
-  isCurrentUserMarksComplete, updateMarks
+  isCurrentUserMarksComplete,
+  updateMarks
 } from '../../utils'
 import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
+import { getZipWithFiles } from '../../utils/file.ts'
+import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
 enum SignedStatus {
   Fully_Signed,
   User_Is_Next_Signer,
@@ -81,7 +87,7 @@ export const SignPage = () => {
 
   const [signers, setSigners] = useState<`npub1${string}`[]>([])
   const [viewers, setViewers] = useState<`npub1${string}`[]>([])
-  const [marks, setMarks] = useState<Mark[] >([])
+  const [marks, setMarks] = useState<Mark[]>([])
   const [creatorFileHashes, setCreatorFileHashes] = useState<{
     [key: string]: string
   }>({})
@@ -100,8 +106,10 @@ export const SignPage = () => {
 
   const [authUrl, setAuthUrl] = useState<string>()
   const nostrController = NostrController.getInstance()
-  const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>([]);
+  const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
-  const [isReadyToSign, setIsReadyToSign] = useState(false);
+    []
+  )
+  const [isReadyToSign, setIsReadyToSign] = useState(false)
 
   useEffect(() => {
     if (signers.length > 0) {
@@ -192,13 +200,16 @@ export const SignPage = () => {
       setViewers(createSignatureContent.viewers)
       setCreatorFileHashes(createSignatureContent.fileHashes)
       setSubmittedBy(createSignatureEvent.pubkey)
-      setMarks(createSignatureContent.markConfig);
+      setMarks(createSignatureContent.markConfig)
 
       if (usersPubkey) {
-        const metaMarks = filterMarksByPubkey(createSignatureContent.markConfig, usersPubkey!)
+        const metaMarks = filterMarksByPubkey(
+          createSignatureContent.markConfig,
+          usersPubkey!
+        )
         const signedMarks = extractMarksFromSignedMeta(meta)
-        const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks);
+        const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
-        setCurrentUserMarks(currentUserMarks);
+        setCurrentUserMarks(currentUserMarks)
         // setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
         setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
       }
@@ -307,7 +318,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -348,7 +359,7 @@ export const SignPage = () => {
   const decrypt = async (file: File) => {
     setLoadingSpinnerDesc('Decrypting file')
 
-    const zip = await loadZip(file);
+    const zip = await loadZip(file)
     if (!zip) return
 
     const parsedKeysJson = await parseKeysJson(zip)
@@ -414,6 +425,27 @@ export const SignPage = () => {
     return null
   }
 
+  const handleDownload = async () => {
+    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
+    setLoadingSpinnerDesc('Generating file')
+    try {
+      const zip = await getZipWithFiles(meta, files)
+      const arrayBuffer = await zip.generateAsync({
+        type: ARRAY_BUFFER,
+        compression: DEFLATE,
+        compressionOptions: {
+          level: 6
+        }
+      })
+      if (!arrayBuffer) return
+      const blob = new Blob([arrayBuffer])
+      saveAs(blob, `exported-${now()}.sigit.zip`)
+    } catch (error: any) {
+      console.log('error in zip:>> ', error)
+      toast.error(error.message || 'Error occurred in generating zip file')
+    }
+  }
+
   const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
     const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
 
@@ -439,7 +471,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -520,7 +552,10 @@ export const SignPage = () => {
   }
 
   // Sign the event for the meta file
-  const signEventForMeta = async (signerContent: { prevSig: string, marks: Mark[] }) => {
+  const signEventForMeta = async (signerContent: {
+    prevSig: string
+    marks: Mark[]
+  }) => {
     return await signEventForMetaFile(
       JSON.stringify(signerContent),
       nostrController,
@@ -529,8 +564,8 @@ export const SignPage = () => {
   }
 
   const getSignerMarksForMeta = (): Mark[] | undefined => {
-    if (currentUserMarks.length === 0) return;
+    if (currentUserMarks.length === 0) return
-    return currentUserMarks.map(( { mark }: CurrentUserMark) => mark);
+    return currentUserMarks.map(({ mark }: CurrentUserMark) => mark)
   }
 
   // Update the meta signatures
@@ -600,13 +635,9 @@ export const SignPage = () => {
 
     if (!arraybuffer) return null
 
-    return new File(
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
-      [new Blob([arraybuffer])],
-      `${unixNow}.sigit.zip`,
-      {
       type: 'application/zip'
-      }
+    })
-    )
   }
 
   // Handle errors during zip file generation
@@ -694,7 +725,7 @@ export const SignPage = () => {
     setIsLoading(true)
     setLoadingSpinnerDesc('Signing nostr event')
 
-    if (!meta) return;
+    if (!meta) return
 
     const prevSig = getLastSignersSig(meta, signers)
     if (!prevSig) return
@@ -918,11 +949,14 @@ export const SignPage = () => {
     )
   }
 
-  return <PdfMarking
+  return (
-    files={getFilesWithHashes(files, currentFileHashes)}
+    <PdfMarking
+      files={getCurrentUserFiles(files, currentFileHashes)}
       currentUserMarks={currentUserMarks}
       setIsReadyToSign={setIsReadyToSign}
       setCurrentUserMarks={setCurrentUserMarks}
       setUpdatedMarks={setUpdatedMarks}
+      handleDownload={handleDownload}
     />
+  )
 }

src/pages/verify/index.tsx

@@ -23,14 +23,17 @@ import {
   SignedEventContent
 } from '../../types'
 import {
-  decryptArrayBuffer, extractMarksFromSignedMeta,
+  decryptArrayBuffer,
+  extractMarksFromSignedMeta,
   extractZipUrlAndEncryptionKey,
   getHash,
-  hexToNpub, now,
+  hexToNpub,
+  now,
   npubToHex,
   parseJson,
   readContentOfZipEntry,
-  shorten, signEventForMetaFile
+  shorten,
+  signEventForMetaFile
 } from '../../utils'
 import styles from './style.module.scss'
 import { Cancel, CheckCircle } from '@mui/icons-material'
@@ -41,7 +44,7 @@ import {
   addMarks,
   convertToPdfBlob,
   convertToPdfFile,
-  groupMarksByPage,
+  groupMarksByPage
 } from '../../utils/pdf.ts'
 import { State } from '../../store/rootReducer.ts'
 import { useSelector } from 'react-redux'
@@ -78,7 +81,7 @@ export const VerifyPage = () => {
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
   }>({})
-  const [files, setFiles] = useState<{ [filename: string]: PdfFile}>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
 
   const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
     {}
@@ -155,7 +158,10 @@ export const VerifyPage = () => {
                 )
 
                 if (arrayBuffer) {
-                  files[fileName] = await convertToPdfFile(arrayBuffer, fileName!)
+                  files[fileName] = await convertToPdfFile(
+                    arrayBuffer,
+                    fileName!
+                  )
                   const hash = await getHash(arrayBuffer)
 
                   if (hash) {
@@ -169,7 +175,6 @@ export const VerifyPage = () => {
               setCurrentFileHashes(fileHashes)
               setFiles(files)
 
-
               setSigners(createSignatureContent.signers)
               setViewers(createSignatureContent.viewers)
               setCreatorFileHashes(createSignatureContent.fileHashes)
@@ -177,8 +182,6 @@ export const VerifyPage = () => {
 
               setMeta(metaInNavState)
               setIsLoading(false)
-
-
             }
           })
           .catch((err) => {
@@ -381,7 +384,7 @@ export const VerifyPage = () => {
   }
 
   const handleExport = async () => {
-    if (Object.entries(files).length === 0 ||!meta ||!usersPubkey) return;
+    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
 
     const usersNpub = hexToNpub(usersPubkey)
     if (
@@ -395,10 +398,8 @@ export const VerifyPage = () => {
     setIsLoading(true)
     setLoadingSpinnerDesc('Signing nostr event')
 
-    if (!meta) return;
-
     const prevSig = getLastSignersSig(meta, signers)
-    if (!prevSig) return;
+    if (!prevSig) return
 
     const signedEvent = await signEventForMetaFile(
       JSON.stringify({ prevSig }),
@@ -406,10 +407,10 @@ export const VerifyPage = () => {
       setIsLoading
     )
 
-    if (!signedEvent) return;
+    if (!signedEvent) return
 
     const exportSignature = JSON.stringify(signedEvent, null, 2)
-    const updatedMeta = {...meta, exportSignature }
+    const updatedMeta = { ...meta, exportSignature }
     const stringifiedMeta = JSON.stringify(updatedMeta, null, 2)
 
     const zip = new JSZip()

src/types/file.ts

@@ -0,0 +1,8 @@
+import { PdfFile } from './drawing.ts'
+
+export interface CurrentUserFile {
+  id: number
+  pdfFile: PdfFile
+  filename: string
+  hash?: string
+}

src/utils/const.ts

@@ -6,3 +6,5 @@ export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
 }
 export const SIGN: string = 'Sign'
 export const NEXT: string = 'Next'
+export const ARRAY_BUFFER = 'arraybuffer'
+export const DEFLATE = 'DEFLATE'

src/utils/file.ts

@@ -0,0 +1,24 @@
+import { Meta } from '../types'
+import { extractMarksFromSignedMeta } from './mark.ts'
+import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
+import JSZip from 'jszip'
+import { PdfFile } from '../types/drawing.ts'
+
+const getZipWithFiles = async (
+  meta: Meta,
+  files: { [filename: string]: PdfFile }
+): Promise<JSZip> => {
+  const zip = new JSZip()
+  const marks = extractMarksFromSignedMeta(meta)
+  const marksByPage = groupMarksByPage(marks)
+
+  for (const [fileName, pdf] of Object.entries(files)) {
+    const pages = await addMarks(pdf.file, marksByPage)
+    const blob = await convertToPdfBlob(pages)
+    zip.file(`/files/${fileName}`, blob)
+  }
+
+  return zip
+}
+
+export { getZipWithFiles }

src/utils/pdf.ts

@@ -3,13 +3,14 @@ import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 
-PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
+PDFJS.GlobalWorkerOptions.workerSrc =
+  'node_modules/pdfjs-dist/build/pdf.worker.mjs'
 
 /**
  * Scale between the PDF page's natural size and rendered size
  * @constant {number}
  */
-const SCALE: number = 3;
+const SCALE: number = 3
 /**
  * Defined font size used when generating a PDF. Currently it is difficult to fully
  * correlate font size used at the time of filling in / drawing on the PDF
@@ -17,20 +18,20 @@ const SCALE: number = 3;
  * This should be fixed going forward.
  * Switching to PDF-Lib will most likely make this problem redundant.
  */
-const FONT_SIZE: number = 40;
+const FONT_SIZE: number = 40
 /**
  * Current font type used when generating a PDF.
  */
-const FONT_TYPE: string = 'Arial';
+const FONT_TYPE: string = 'Arial'
 
 /**
  * Converts a PDF ArrayBuffer to a generic PDF File
  * @param arrayBuffer of a PDF
  * @param fileName identifier of the pdf file
  */
-const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
+const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
-  const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+  const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
-  return new File([blob], fileName, { type: "application/pdf" });
+  return new File([blob], fileName, { type: 'application/pdf' })
 }
 
 /**
@@ -50,42 +51,40 @@ const toPdfFile = async (file: File): Promise<PdfFile> => {
  * @return PdfFile[] - an array of Sigit's internal Pdf File type
  */
 const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
-  return Promise.all(selectedFiles
+  return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile))
-    .filter(isPdf)
-    .map(toPdfFile));
 }
 
 /**
  * A utility that transforms a drawing coordinate number into a CSS-compatible string
  * @param coordinate
  */
-const inPx = (coordinate: number): string => `${coordinate}px`;
+const inPx = (coordinate: number): string => `${coordinate}px`
 
 /**
  * A utility that checks if a given file is of the pdf type
  * @param file
  */
-const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
+const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
 
 /**
  * Reads the pdf file binaries
  */
 const readPdf = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
-    const reader = new FileReader();
+    const reader = new FileReader()
 
     reader.onload = (e: any) => {
       const data = e.target.result
 
       resolve(data)
-    };
+    }
 
     reader.onerror = (err) => {
       console.error('err', err)
       reject(err)
-    };
+    }
 
-    reader.readAsDataURL(file);
+    reader.readAsDataURL(file)
   })
 }
 
@@ -94,26 +93,28 @@ const readPdf = (file: File): Promise<string> => {
  * @param data pdf file bytes
  */
 const pdfToImages = async (data: any): Promise<PdfPage[]> => {
-  const images: string[] = [];
+  const images: string[] = []
-  const pdf = await PDFJS.getDocument(data).promise;
+  const pdf = await PDFJS.getDocument(data).promise
-  const canvas = document.createElement("canvas");
+  const canvas = document.createElement('canvas')
 
   for (let i = 0; i < pdf.numPages; i++) {
-    const page = await pdf.getPage(i + 1);
+    const page = await pdf.getPage(i + 1)
-    const viewport = page.getViewport({ scale: SCALE });
+    const viewport = page.getViewport({ scale: SCALE })
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext('2d')
-    canvas.height = viewport.height;
+    canvas.height = viewport.height
-    canvas.width = viewport.width;
+    canvas.width = viewport.width
-    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+    await page.render({ canvasContext: context!, viewport: viewport }).promise
-    images.push(canvas.toDataURL());
+    images.push(canvas.toDataURL())
   }
 
-  return Promise.resolve(images.map((image) => {
+  return Promise.resolve(
+    images.map((image) => {
       return {
         image,
         drawnFields: []
       }
-  }))
+    })
+  )
 }
 
 /**
@@ -121,34 +122,37 @@ const pdfToImages = async (data: any): Promise<PdfPage[]> => {
  * Returns an array of encoded images where each image is a representation
  * of a PDF page with completed and signed marks from all users
  */
-const addMarks = async (file: File, marksPerPage: {[key: string]: Mark[]}) => {
+const addMarks = async (
-  const p = await readPdf(file);
+  file: File,
-  const pdf = await PDFJS.getDocument(p).promise;
+  marksPerPage: { [key: string]: Mark[] }
-  const canvas = document.createElement("canvas");
+) => {
+  const p = await readPdf(file)
+  const pdf = await PDFJS.getDocument(p).promise
+  const canvas = document.createElement('canvas')
 
-  const images: string[] = [];
+  const images: string[] = []
 
-  for (let i = 0; i< pdf.numPages; i++) {
+  for (let i = 0; i < pdf.numPages; i++) {
-    const page = await pdf.getPage(i+1)
+    const page = await pdf.getPage(i + 1)
-    const viewport = page.getViewport({ scale: SCALE });
+    const viewport = page.getViewport({ scale: SCALE })
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext('2d')
-    canvas.height = viewport.height;
+    canvas.height = viewport.height
-    canvas.width = viewport.width;
+    canvas.width = viewport.width
-    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+    await page.render({ canvasContext: context!, viewport: viewport }).promise
 
-    marksPerPage[i].forEach(mark => draw(mark, context!))
+    marksPerPage[i]?.forEach((mark) => draw(mark, context!))
 
-    images.push(canvas.toDataURL());
+    images.push(canvas.toDataURL())
   }
 
-  return Promise.resolve(images);
+  return Promise.resolve(images)
 }
 
 /**
  * Utility to scale mark in line with the PDF-to-PNG scale
  */
 const scaleMark = (mark: Mark): Mark => {
-  const { location } = mark;
+  const { location } = mark
   return {
     ...mark,
     location: {
@@ -165,7 +169,7 @@ const scaleMark = (mark: Mark): Mark => {
  * Utility to check if a Mark has value
  * @param mark
  */
-const hasValue = (mark: Mark): boolean => !!mark.value;
+const hasValue = (mark: Mark): boolean => !!mark.value
 
 /**
  * Draws a Mark on a Canvas representation of a PDF Page
@@ -173,14 +177,14 @@ const hasValue = (mark: Mark): boolean => !!mark.value;
  * @param ctx a Canvas representation of a specific PDF Page
  */
 const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
-  const { location } = mark;
+  const { location } = mark
 
-  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE;
+  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
-  ctx!.fillStyle = 'black';
+  ctx!.fillStyle = 'black'
-  const textMetrics = ctx!.measureText(mark.value!);
+  const textMetrics = ctx!.measureText(mark.value!)
-  const textX = location.left + (location.width - textMetrics.width) / 2;
+  const textX = location.left + (location.width - textMetrics.width) / 2
-  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2;
+  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
-  ctx!.fillText(mark.value!, textX, textY);
+  ctx!.fillText(mark.value!, textX, textY)
 }
 
 /**
@@ -188,7 +192,7 @@ const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
  * @param markedPdfPages
  */
 const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
-  const pdfDoc = await PDFDocument.create();
+  const pdfDoc = await PDFDocument.create()
 
   for (const page of markedPdfPages) {
     const pngImage = await pdfDoc.embedPng(page)
@@ -203,7 +207,6 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
 
   const pdfBytes = await pdfDoc.save()
   return new Blob([pdfBytes], { type: 'application/pdf' })
-
 }
 
 /**
@@ -211,9 +214,12 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
  * @param arrayBuffer
  * @param fileName
  */
-const convertToPdfFile = async (arrayBuffer: ArrayBuffer, fileName: string): Promise<PdfFile> => {
+const convertToPdfFile = async (
-  const file = toFile(arrayBuffer, fileName);
+  arrayBuffer: ArrayBuffer,
-  return toPdfFile(file);
+  fileName: string
+): Promise<PdfFile> => {
+  const file = toFile(arrayBuffer, fileName)
+  return toPdfFile(file)
 }
 
 /**
@@ -226,7 +232,7 @@ const groupMarksByPage = (marks: Mark[]) => {
   return marks
     .filter(hasValue)
     .map(scaleMark)
-    .reduce<{[key: number]: Mark[]}>(byPage, {})
+    .reduce<{ [key: number]: Mark[] }>(byPage, {})
 }
 
 /**
@@ -237,11 +243,10 @@ const groupMarksByPage = (marks: Mark[]) => {
  * @param obj - accumulator in the reducer callback
  * @param mark - current value, i.e. Mark being examined
  */
-const byPage = (obj: { [key: number]: Mark[]}, mark: Mark) => {
+const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
-  const key = mark.location.page;
+  const key = mark.location.page
-  const curGroup = obj[key] ?? [];
+  const curGroup = obj[key] ?? []
-  return { ...obj, [key]: [...curGroup, mark]
+  return { ...obj, [key]: [...curGroup, mark] }
-  }
 }
 
 export {
@@ -252,5 +257,5 @@ export {
   convertToPdfFile,
   addMarks,
   convertToPdfBlob,
-  groupMarksByPage,
+  groupMarksByPage
 }

src/utils/utils.ts

@@ -1,4 +1,5 @@
 import { PdfFile } from '../types/drawing.ts'
+import { CurrentUserFile } from '../types/file.ts'
 
 export const compareObjects = (
   obj1: object | null | undefined,
@@ -72,11 +73,16 @@ export const timeout = (ms: number = 60000) => {
  * @param files
  * @param fileHashes
  */
-export const getFilesWithHashes = (
+export const getCurrentUserFiles = (
-  files: { [filename: string ]: PdfFile },
+  files: { [filename: string]: PdfFile },
   fileHashes: { [key: string]: string | null }
-  ) => {
+): CurrentUserFile[] => {
-  return Object.entries(files).map(([filename, pdfFile]) => {
+  return Object.entries(files).map(([filename, pdfFile], index) => {
-    return { pdfFile, filename, hash: fileHashes[filename] }
+    return {
+      pdfFile,
+      filename,
+      id: index + 1,
+      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
+    }
   })
 }