fix: styling

src/components/DrawPDFFields/style.module.scss

@@ -50,6 +50,7 @@
 .pdfImageWrapper {
   position: relative;
   user-select: none;
+  margin-bottom: 10px;
   
   &.drawing {
     cursor: crosshair;
@@ -71,6 +72,10 @@
     visibility: hidden;
   }
 
+  &.edited {
+    border: 1px dotted #01aaad
+  }
+
   .resizeHandle {
     position: absolute;
     right: -5px;

src/components/FileList/index.tsx

@@ -0,0 +1,42 @@
+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.wrap}>
+      <div className={styles.container}>
+        <ul className={styles.files}>
+          {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>
+      </div>
+      <Button variant="contained" fullWidth onClick={handleDownload}>
+        Download Files
+      </Button>
+    </div>
+  )
+}
+
+export default FileList

src/components/FileList/style.module.scss

@@ -0,0 +1,106 @@
+.container {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.filesPageContainer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0;             /* Removes default margin */
+  padding: 0;            /* Removes default padding */
+}
+
+
+.wrap {
+  position: sticky;
+  top: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.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;
+}
+
+.wrap {
+  margin-top: 5px;
+}
+
+.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;
+
+
+  &.active {
+    background: #4c82a3;
+    color: white;
+  }
+}
+
+.fileItem:hover {
+  transition: ease 0.2s;
+  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/MarkFormField/index.tsx

@@ -0,0 +1,124 @@
+import { CurrentUserMark } from '../../types/mark.ts'
+import styles from './style.module.scss'
+
+import { MARK_TYPE_TRANSLATION, NEXT, SIGN } from '../../utils/const.ts'
+import {
+  findNextIncompleteCurrentUserMark,
+  isCurrentUserMarksComplete,
+  isCurrentValueLast
+} from '../../utils'
+import { useState } from 'react'
+
+interface MarkFormFieldProps {
+  handleSubmit: (event: any) => void
+  handleSelectedMarkValueChange: (event: any) => void
+  selectedMark: CurrentUserMark
+  selectedMarkValue: string
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+}
+
+/**
+ * Responsible for rendering a form field connected to a mark and keeping track of its value.
+ */
+const MarkFormField = ({
+  handleSubmit,
+  handleSelectedMarkValueChange,
+  selectedMark,
+  selectedMarkValue,
+  currentUserMarks,
+  handleCurrentUserMarkChange
+}: MarkFormFieldProps) => {
+  const [displayActions, setDisplayActions] = useState(true)
+  const getSubmitButtonText = () => (isReadyToSign() ? SIGN : NEXT)
+  const isReadyToSign = () =>
+    isCurrentUserMarksComplete(currentUserMarks) ||
+    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
+  const isCurrent = (currentMark: CurrentUserMark) =>
+    currentMark.id === selectedMark.id
+  const isDone = (currentMark: CurrentUserMark) =>
+    isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
+  const findNext = () => {
+    return (
+      currentUserMarks[selectedMark.id] ||
+      findNextIncompleteCurrentUserMark(currentUserMarks)
+    )
+  }
+  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    console.log('handle form submit runs...')
+    return isReadyToSign()
+      ? handleSubmit(event)
+      : handleCurrentUserMarkChange(findNext()!)
+  }
+  const toggleActions = () => setDisplayActions(!displayActions)
+  return (
+    <div className={styles.container}>
+      <div className={styles.trigger}>
+        <button
+          onClick={toggleActions}
+          className={styles.triggerBtn}
+          type="button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="-64 0 512 512"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
+          >
+            <path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
+          </svg>
+        </button>
+      </div>
+      <div className={`${styles.actions} ${displayActions && styles.expanded}`}>
+        <div className={styles.actionsWrapper}>
+          <div className={styles.actionsTop}>
+            <div className={styles.actionsTopInfo}>
+              <p className={styles.actionsTopInfoText}>Add your signature</p>
+            </div>
+          </div>
+          <div className={styles.inputWrapper}>
+            <form onSubmit={(e) => handleFormSubmit(e)}>
+              <input
+                className={styles.input}
+                placeholder={
+                  MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]
+                }
+                onChange={handleSelectedMarkValueChange}
+                value={selectedMarkValue}
+              />
+              <div className={styles.actionsBottom}>
+                <button type="submit" className={styles.submitButton}>
+                  {getSubmitButtonText()}
+                </button>
+              </div>
+            </form>
+            <div className={styles.footerContainer}>
+              <div className={styles.footer}>
+                {currentUserMarks.map((mark, index) => {
+                  return (
+                    <div className={styles.pagination} key={index}>
+                      <button
+                        className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
+                        onClick={() => handleCurrentUserMarkChange(mark)}
+                      >
+                        {mark.id}
+                      </button>
+                      {isCurrent(mark) && (
+                        <div className={styles.paginationButtonCurrent}></div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MarkFormField

src/components/MarkFormField/style.module.scss

@@ -0,0 +1,209 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  align-items: center;
+}
+
+.actions {
+  background: white;
+  width: 100%;
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  grid-gap: 15px;
+  box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
+  max-width: 750px;
+
+  &.expanded {
+    display: flex;
+  }
+}
+
+.actionsWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 20px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.actionsTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.actionsTopInfo {
+  flex-grow: 1;
+}
+
+.actionsTopInfoText {
+  font-size: 16px;
+  color: #434343;
+}
+
+.actionsTrigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.actionButtons {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+}
+
+.inputWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.textInput {
+  height: 100px;
+  background: rgba(0,0,0,0.1);
+  border-radius: 4px;
+  border: solid 2px #4c82a3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.input {
+  border-radius: 4px;
+  border: solid 1px rgba(0,0,0,0.15);
+  padding: 5px 10px;
+  font-size: 16px;
+  width: 100%;
+  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
+}
+
+.input:focus {
+  border: solid 1px rgba(0,0,0,0.15);
+  outline: none;
+  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
+}
+
+.actionsBottom {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  justify-content: center;
+  align-items: center;
+}
+
+button {
+  transition: ease 0.2s;
+  width: auto;
+  border-radius: 4px;
+  outline: unset;
+  border: unset;
+  background: unset;
+  color: #ffffff;
+  background: #4c82a3;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 8px 15px;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 12px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: unset;
+  position: relative;
+  cursor: pointer;
+}
+
+button:hover {
+  transition: ease 0.2s;
+  background: #5e8eab;
+  color: white;
+}
+
+button:active {
+  transition: ease 0.2s;
+  background: #447592;
+  color: white;
+}
+
+.submitButton {
+  width: 100%;
+  max-width: 300px;
+  margin-top: 10px;
+}
+
+.footerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  align-items: start;
+  justify-content: center;
+  width: 100%;
+}
+
+.pagination {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.paginationButton {
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.1);
+  color: rgba(0,0,0,0.5);
+}
+
+.paginationButton:hover {
+  background: #447592;
+  color: rgba(255,255,255,0.5);
+}
+
+.paginationButtonDone {
+  background: #5e8eab;
+  color: rgb(255,255,255);
+}
+
+.paginationButtonCurrent {
+  height: 2px;
+  width: 100%;
+  background: #4c82a3;
+}
+
+.trigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.triggerBtn {
+  background: white;
+  color: #434343;
+  padding: 5px 30px;
+  box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
+  position: absolute;
+  top: -25px;
+}

src/components/PDFView/PdfItem.tsx

@@ -1,6 +1,6 @@
 import { PdfFile } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
-import PdfPageItem  from './PdfPageItem.tsx';
+import PdfPageItem from './PdfPageItem.tsx'
 
 interface PdfItemProps {
   pdfFile: PdfFile
@@ -13,23 +13,31 @@ interface PdfItemProps {
 /**
  * Responsible for displaying pages of a single Pdf File.
  */
-const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
+const PdfItem = ({
-  const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
+  pdfFile,
-    return marks.filter((m) => m.mark.location.page === page);
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfItemProps) => {
+  const filterByPage = (
+    marks: CurrentUserMark[],
+    page: number
+  ): CurrentUserMark[] => {
+    return marks.filter((m) => m.mark.location.page === page)
   }
-  return (
+  return pdfFile.pages.map((page, i) => {
-    pdfFile.pages.map((page, i) => {
+    return (
-      return (
+      <PdfPageItem
-        <PdfPageItem
+        page={page}
-          page={page}
+        key={i}
-          key={i}
+        currentUserMarks={filterByPage(currentUserMarks, i)}
-          currentUserMarks={filterByPage(currentUserMarks, i)}
+        handleMarkClick={handleMarkClick}
-          handleMarkClick={handleMarkClick}
+        selectedMarkValue={selectedMarkValue}
-          selectedMarkValue={selectedMarkValue}
+        selectedMark={selectedMark}
-          selectedMark={selectedMark}
+      />
-        />
+    )
-      )
+  })
-  }))
 }
 
-export default PdfItem
+export default PdfItem

src/components/PDFView/PdfMarkItem.tsx

@@ -12,26 +12,31 @@ interface PdfMarkItemProps {
 /**
  * Responsible for display an individual Pdf Mark.
  */
-const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
+const PdfMarkItem = ({
-  const { location } = userMark.mark;
+  selectedMark,
-  const handleClick = () => handleMarkClick(userMark.mark.id);
+  handleMarkClick,
-  const getMarkValue = () => (
+  selectedMarkValue,
-    selectedMark?.mark.id === userMark.mark.id
+  userMark
-      ? selectedMarkValue
+}: PdfMarkItemProps) => {
-      : userMark.mark.value
+  const { location } = userMark.mark
-  )
+  const handleClick = () => handleMarkClick(userMark.mark.id)
+  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+  const getMarkValue = () =>
+    isEdited() ? selectedMarkValue : userMark.currentValue
   return (
     <div
       onClick={handleClick}
-      className={styles.drawingRectangle}
+      className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
       style={{
         left: inPx(location.left),
         top: inPx(location.top),
         width: inPx(location.width),
         height: inPx(location.height)
       }}
-    >{getMarkValue()}</div>
+    >
+      {getMarkValue()}
+    </div>
   )
 }
 
-export default PdfMarkItem
+export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -1,23 +1,27 @@
 import PdfView from './index.tsx'
-import MarkFormField from '../../pages/sign/MarkFormField.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 {
-  findNextCurrentUserMark,
+  findNextIncompleteCurrentUserMark,
-  isCurrentUserMarksComplete,
+  getUpdatedMark,
-  updateCurrentUserMarks,
+  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'
+import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 
 interface PdfMarkingProps {
-  files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
+  files: CurrentUserFile[]
-  currentUserMarks: CurrentUserMark[],
+  currentUserMarks: CurrentUserMark[]
-  setIsReadyToSign: (isReadyToSign: boolean) => void,
+  setIsReadyToSign: (isReadyToSign: boolean) => void
-  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
   setUpdatedMarks: (markToUpdate: Mark) => void
+  handleDownload: () => void
 }
 
 /**
@@ -32,69 +36,125 @@ const PdfMarking = (props: PdfMarkingProps) => {
     currentUserMarks,
     setIsReadyToSign,
     setCurrentUserMarks,
-    setUpdatedMarks
+    setUpdatedMarks,
+    handleDownload
   } = props
   const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
-  const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")
+  const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
+  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
 
   useEffect(() => {
-    setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
+    if (selectedMark === null && currentUserMarks.length > 0) {
-  }, [currentUserMarks])
+      setSelectedMark(
+        findNextIncompleteCurrentUserMark(currentUserMarks) ||
+          currentUserMarks[0]
+      )
+    }
+  }, [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);
+    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
-    setSelectedMark(nextMark!);
+    setSelectedMark(nextMark!)
-    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
+    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY)
+  }
+
+  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
+    if (!selectedMark) return
+    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )
+
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedSelectedMark
+    )
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMarkValue(mark.currentValue ?? EMPTY)
+    setSelectedMark(mark)
   }
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    event.preventDefault()
-    if (!selectedMarkValue || !selectedMark) return;
+    if (!selectedMarkValue || !selectedMark) return
 
-    const updatedMark: CurrentUserMark = {
+    const updatedMark: CurrentUserMark = getUpdatedMark(
-      ...selectedMark,
+      selectedMark,
-      mark: {
+      selectedMarkValue
-        ...selectedMark.mark,
+    )
-        value: selectedMarkValue
-      },
-      isCompleted: true
-    }
 
     setSelectedMarkValue(EMPTY)
-    const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedMark
+    )
     setCurrentUserMarks(updatedCurrentUserMarks)
-    setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
+    setSelectedMark(null)
-    console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setIsReadyToSign(true)
-    setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
     setUpdatedMarks(updatedMark.mark)
   }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setSelectedMarkValue(event.target.value)
+  // const updateCurrentUserMarkValues = () => {
+  //   const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
+  //   const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
+  //   setSelectedMarkValue(EMPTY)
+  //   setCurrentUserMarks(updatedCurrentUserMarks)
+  // }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setSelectedMarkValue(event.target.value)
 
   return (
     <>
-      <Container className={styles.container}>
+      <Container className={signPageStyles.container}>
-        {
+        <StickySideColumns
-          currentUserMarks?.length > 0 && (
+          left={
-            <PdfView
+            <div>
-              files={files}
+              {currentFile !== null && (
-              handleMarkClick={handleMarkClick}
+                <FileList
-              selectedMarkValue={selectedMarkValue}
+                  files={files}
-              selectedMark={selectedMark}
+                  currentFile={currentFile}
-              currentUserMarks={currentUserMarks}
+                  setCurrentFile={setCurrentFile}
-            />)}
+                  handleDownload={handleDownload}
-        {
+                />
-          selectedMark !== null && (
+              )}
-            <MarkFormField
+            </div>
-              handleSubmit={handleSubmit}
+          }
-              handleChange={handleChange}
+        >
-              selectedMark={selectedMark}
+          <div className={styles.container}>
-              selectedMarkValue={selectedMarkValue}
+            {currentUserMarks?.length > 0 && (
-            />
+              <div className={styles.pdfView}>
-          )}
+                <PdfView
+                  currentFile={currentFile}
+                  files={files}
+                  handleMarkClick={handleMarkClick}
+                  selectedMarkValue={selectedMarkValue}
+                  selectedMark={selectedMark}
+                  currentUserMarks={currentUserMarks}
+                />
+              </div>
+            )}
+          </div>
+        </StickySideColumns>
+        {selectedMark !== null && (
+          <MarkFormField
+            handleSubmit={handleSubmit}
+            handleSelectedMarkValueChange={handleChange}
+            selectedMark={selectedMark}
+            selectedMarkValue={selectedMarkValue}
+            currentUserMarks={currentUserMarks}
+            handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+          />
+        )}
       </Container>
     </>
   )
 }
 
-export default PdfMarking
+export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
 import { PdfPage } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
+import { useEffect, useRef } from 'react'
 interface PdfPageProps {
   page: PdfPage
   currentUserMarks: CurrentUserMark[]
@@ -13,34 +14,43 @@ interface PdfPageProps {
 /**
  * Responsible for rendering a single Pdf Page and its Marks
  */
-const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
+const PdfPageItem = ({
+  page,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfPageProps) => {
+  useEffect(() => {
+    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
+      markRefs.current[selectedMark.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [selectedMark])
+  const markRefs = useRef<(HTMLDivElement | null)[]>([])
   return (
     <div
       className={styles.pdfImageWrapper}
       style={{
-        border: '1px solid #c4c4c4',
+        border: '1px solid #c4c4c4'
-        marginBottom: '10px',
-        marginTop: '10px'
       }}
     >
-      <img
+      <img draggable="false" src={page.image} style={{ width: '100%' }} />
-        draggable="false"
+      {currentUserMarks.map((m, i) => (
-        src={page.image}
+        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
-        style={{ width: '100%'}}
-
-      />
-      {
-        currentUserMarks.map((m, i) => (
           <PdfMarkItem
             key={i}
             handleMarkClick={handleMarkClick}
             selectedMarkValue={selectedMarkValue}
             userMark={m}
             selectedMark={selectedMark}
-        />
+          />
+        </div>
       ))}
     </div>
   )
 }
 
-export default PdfPageItem
+export default PdfPageItem

src/components/PDFView/index.tsx

@@ -1,42 +1,72 @@
-import { PdfFile } from '../../types/drawing.ts'
+import { Box, Divider } from '@mui/material'
-import { Box } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark } from '../../types/mark.ts'
+import { CurrentUserFile } from '../../types/file.ts'
+import { useEffect, useRef } from 'react'
 
 interface PdfViewProps {
-  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
+  files: CurrentUserFile[]
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   selectedMarkValue: string
   selectedMark: CurrentUserMark | null
+  currentFile: CurrentUserFile | null
 }
 
 /**
  * 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,
+  currentFile
+}: PdfViewProps) => {
+  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+      pdfRefs.current[currentFile.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [currentFile])
+  const filterByFile = (
+    currentUserMarks: CurrentUserMark[],
+    fileName: string
+  ): CurrentUserMark[] => {
+    return currentUserMarks.filter(
+      (currentUserMark) => currentUserMark.mark.fileName === fileName
+    )
   }
+  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
+    index !== files.length - 1
   return (
-    <Box sx={{ width: '100%' }}>
+    <>
-      {
+      {files.map((currentUserFile, index, arr) => {
-        files.map(({ pdfFile, hash }, i) => {
+        const { hash, pdfFile, filename, id } = currentUserFile
-          if (!hash) return
+        if (!hash) return
-          return (
+        return (
+          <div
+            id={pdfFile.file.name}
+            ref={(el) => (pdfRefs.current[id] = el)}
+            key={index}
+          >
             <PdfItem
               pdfFile={pdfFile}
-              key={i}
+              currentUserMarks={filterByFile(currentUserMarks, filename)}
-              currentUserMarks={filterByFile(currentUserMarks, hash)}
               selectedMark={selectedMark}
               handleMarkClick={handleMarkClick}
               selectedMarkValue={selectedMarkValue}
-          />
+            />
-          )
+            {isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
-        })
+          </div>
-      }
+        )
-    </Box>
+      })}
+    </>
   )
 }
 
-export default PdfView;
+export default PdfView

src/components/PDFView/style.module.scss

@@ -13,4 +13,19 @@
   max-width: 100%;
   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%;
+  gap: 10px;
+}

src/layouts/StickySideColumns.module.scss

@@ -0,0 +1,29 @@
+@import '../styles/colors.scss';
+@import '../styles/sizes.scss';
+
+.container {
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+.sidesWrap {
+  position: relative;
+}
+
+.sides {
+  position: sticky;
+  top: $header-height + $body-vertical-padding;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+.content {
+  max-width: 550px;
+  width: 550px;
+  margin: 0 auto;
+}

src/layouts/StickySideColumns.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+import styles from './StickySideColumns.module.scss'
+
+interface StickySideColumnsProps {
+  left?: ReactNode
+  right?: ReactNode
+}
+
+export const StickySideColumns = ({
+  left,
+  right,
+  children
+}: PropsWithChildren<StickySideColumnsProps>) => {
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.sidesWrap} ${styles.files}`}>
+        <div className={styles.sides}>{left}</div>
+      </div>
+      <div className={styles.content}>{children}</div>
+      <div className={styles.sidesWrap}>
+        <div className={styles.sides}>{right}</div>
+      </div>
+    </div>
+  )
+}

src/pages/create/index.tsx

@@ -338,32 +338,36 @@ export const CreatePage = () => {
       fileHashes[file.name] = hash
     }
 
+    console.log('file hashes: ', fileHashes)
+
     return fileHashes
   }
 
-  const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
+  const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
-    return drawnPdfs.flatMap((drawnPdf) => {
+    return drawnPdfs
-      const fileHash = fileHashes[drawnPdf.file.name];
+      .flatMap((drawnPdf) => {
-      return drawnPdf.pages.flatMap((page, index) => {
+        const fileHash = fileHashes[drawnPdf.file.name]
-        return page.drawnFields.map((drawnField) => {
+        return drawnPdf.pages.flatMap((page, index) => {
-          return {
+          return page.drawnFields.map((drawnField) => {
-            type: drawnField.type,
+            return {
-            location: {
+              type: drawnField.type,
-              page: index,
+              location: {
-              top: drawnField.top,
+                page: index,
-              left: drawnField.left,
+                top: drawnField.top,
-              height: drawnField.height,
+                left: drawnField.left,
-              width: drawnField.width,
+                height: drawnField.height,
-            },
+                width: drawnField.width
-            npub: drawnField.counterpart,
+              },
-            pdfFileHash: fileHash
+              npub: drawnField.counterpart,
-          }
+              pdfFileHash: fileHash,
+              fileName: drawnPdf.file.name
+            }
+          })
         })
       })
-    })
       .map((mark, index) => {
-        return {...mark, id: index }
+        return { ...mark, id: index }
-      });
+      })
   }
 
   // Handle errors during zip file generation
@@ -431,13 +435,9 @@ export const CreatePage = () => {
 
     if (!arraybuffer) return null
 
-    return new File(
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
-      [new Blob([arraybuffer])],
+      type: 'application/zip'
-      `${unixNow}.sigit.zip`,
+    })
-      {
-        type: 'application/zip'
-      }
-    )
   }
 
   // Handle errors during file upload
@@ -545,9 +545,7 @@ export const CreatePage = () => {
         : viewers.map((viewer) => viewer.pubkey)
     ).filter((receiver) => receiver !== usersPubkey)
 
-    return receivers.map((receiver) =>
+    return receivers.map((receiver) => sendNotification(receiver, meta))
-      sendNotification(receiver, meta)
-    )
   }
 
   const handleCreate = async () => {

src/pages/sign/MarkFormField.tsx

@@ -1,37 +0,0 @@
-import { CurrentUserMark } from '../../types/mark.ts'
-import styles from './style.module.scss'
-import { Box, Button, TextField } from '@mui/material'
-
-import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
-
-interface MarkFormFieldProps {
-  handleSubmit: (event: any) => void
-  handleChange: (event: any) => void
-  selectedMark: CurrentUserMark
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering a form field connected to a mark and keeping track of its value.
- */
-const MarkFormField = (props: MarkFormFieldProps) => {
-  const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props;
-  const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next';
-  return (
-    <div className={styles.fixedBottomForm}>
-      <Box component="form" onSubmit={handleSubmit}>
-        <TextField
-          id="mark-value"
-          label={MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]}
-          value={selectedMarkValue}
-          onChange={handleChange}
-        />
-        <Button type="submit" variant="contained">
-          {getSubmitButton()}
-        </Button>
-      </Box>
-    </div>
-  )
-}
-
-export default MarkFormField;

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])],
+      type: 'application/zip'
-      `${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
-    currentUserMarks={currentUserMarks}
+      files={getCurrentUserFiles(files, currentFileHashes)}
-    setIsReadyToSign={setIsReadyToSign}
+      currentUserMarks={currentUserMarks}
-    setCurrentUserMarks={setCurrentUserMarks}
+      setIsReadyToSign={setIsReadyToSign}
-    setUpdatedMarks={setUpdatedMarks}
+      setCurrentUserMarks={setCurrentUserMarks}
-  />
+      setUpdatedMarks={setUpdatedMarks}
+      handleDownload={handleDownload}
+    />
+  )
 }

src/pages/sign/style.module.scss

@@ -2,8 +2,8 @@
 
 .container {
   color: $text-color;
-  width: 550px;
+  //width: 550px;
-  max-width: 550px;
+  //max-width: 550px;
 
   .inputBlock {
     position: relative;

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/types/mark.ts

@@ -1,24 +1,27 @@
-import { MarkType } from "./drawing";
+import { MarkType } from './drawing'
 
 export interface CurrentUserMark {
+  id: number
   mark: Mark
   isLast: boolean
   isCompleted: boolean
+  currentValue?: string
 }
 
 export interface Mark {
-  id: number;
+  id: number
-  npub: string;
+  npub: string
-  pdfFileHash: string;
+  pdfFileHash: string
-  type: MarkType;
+  type: MarkType
-  location: MarkLocation;
+  location: MarkLocation
-  value?: string;
+  fileName: string
+  value?: string
 }
 
 export interface MarkLocation {
-  top: number;
+  top: number
-  left: number;
+  left: number
-  height: number;
+  height: number
-  width: number;
+  width: number
-  page: number;
+  page: number
 }

src/utils/const.ts

@@ -3,4 +3,8 @@ import { MarkType } from '../types/drawing.ts'
 export const EMPTY: string = ''
 export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
   [MarkType.FULLNAME.valueOf()]: 'Full Name'
-}
+}
+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/mark.ts

@@ -2,6 +2,7 @@ import { CurrentUserMark, Mark } from '../types/mark.ts'
 import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
+import { EMPTY } from './const.ts'
 
 /**
  * Takes in an array of Marks already filtered by User.
@@ -9,16 +10,18 @@ import { Event } from 'nostr-tools'
  * @param marks - default Marks extracted from Meta
  * @param signedMetaMarks - signed user Marks extracted from DocSignatures
  */
-const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUserMark[] => {
+const getCurrentUserMarks = (
+  marks: Mark[],
+  signedMetaMarks: Mark[]
+): CurrentUserMark[] => {
   return marks.map((mark, index, arr) => {
-    const signedMark = signedMetaMarks.find((m) => m.id === mark.id);
+    const signedMark = signedMetaMarks.find((m) => m.id === mark.id)
-    if (signedMark && !!signedMark.value) {
-      mark.value = signedMark.value
-    }
     return {
       mark,
+      currentValue: signedMark?.value ?? EMPTY,
+      id: index + 1,
       isLast: isLast(index, arr),
-      isCompleted: !!mark.value
+      isCompleted: !!signedMark?.value
     }
   })
 }
@@ -27,8 +30,10 @@ const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUse
  * Returns next incomplete CurrentUserMark if there is one
  * @param usersMarks
  */
-const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark | undefined => {
+const findNextIncompleteCurrentUserMark = (
-  return usersMarks.find((mark) => !mark.isCompleted);
+  usersMarks: CurrentUserMark[]
+): CurrentUserMark | undefined => {
+  return usersMarks.find((mark) => !mark.isCompleted)
 }
 
 /**
@@ -37,7 +42,7 @@ const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark
  * @param pubkey
  */
 const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
-  return marks.filter(mark => mark.npub === hexToNpub(pubkey))
+  return marks.filter((mark) => mark.npub === hexToNpub(pubkey))
 }
 
 /**
@@ -57,7 +62,9 @@ const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
  * marked as complete.
  * @param currentUserMarks
  */
-const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolean => {
+const isCurrentUserMarksComplete = (
+  currentUserMarks: CurrentUserMark[]
+): boolean => {
   return currentUserMarks.every((mark) => mark.isCompleted)
 }
 
@@ -68,7 +75,7 @@ const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolea
  * @param markToUpdate
  */
 const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
-  const indexToUpdate = marks.findIndex(mark => mark.id === markToUpdate.id);
+  const indexToUpdate = marks.findIndex((mark) => mark.id === markToUpdate.id)
   return [
     ...marks.slice(0, indexToUpdate),
     markToUpdate,
@@ -76,8 +83,13 @@ const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
   ]
 }
 
-const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdate: CurrentUserMark): CurrentUserMark[] => {
+const updateCurrentUserMarks = (
-  const indexToUpdate = currentUserMarks.findIndex((m) => m.mark.id === markToUpdate.mark.id)
+  currentUserMarks: CurrentUserMark[],
+  markToUpdate: CurrentUserMark
+): CurrentUserMark[] => {
+  const indexToUpdate = currentUserMarks.findIndex(
+    (m) => m.mark.id === markToUpdate.mark.id
+  )
   return [
     ...currentUserMarks.slice(0, indexToUpdate),
     markToUpdate,
@@ -85,14 +97,40 @@ const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdat
   ]
 }
 
-const isLast = <T>(index: number, arr: T[]) => (index === (arr.length -1))
+const isLast = <T>(index: number, arr: T[]) => index === arr.length - 1
+
+const isCurrentValueLast = (
+  currentUserMarks: CurrentUserMark[],
+  selectedMark: CurrentUserMark,
+  selectedMarkValue: string
+) => {
+  const filteredMarks = currentUserMarks.filter(
+    (mark) => mark.id !== selectedMark.id
+  )
+  return (
+    isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
+  )
+}
+
+const getUpdatedMark = (
+  selectedMark: CurrentUserMark,
+  selectedMarkValue: string
+): CurrentUserMark => {
+  return {
+    ...selectedMark,
+    currentValue: selectedMarkValue,
+    isCompleted: !!selectedMarkValue
+  }
+}
 
 export {
   getCurrentUserMarks,
   filterMarksByPubkey,
   extractMarksFromSignedMeta,
   isCurrentUserMarksComplete,
-  findNextCurrentUserMark,
+  findNextIncompleteCurrentUserMark,
   updateMarks,
   updateCurrentUserMarks,
+  isCurrentValueLast,
+  getUpdatedMark
 }

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(
-    return {
+    images.map((image) => {
-      image,
+      return {
-      drawnFields: []
+        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]! })
+    }
   })
 }