refactor: moves pdf marking and rendering one level down

src/components/PDFView/PdfItem.tsx

@@ -6,11 +6,11 @@ interface PdfItemProps {
   pdfFile: PdfFile
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
-  currentMarkValue: string
-  currentUserMark: CurrentUserMark | null
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
 }
 
-const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, currentMarkValue, currentUserMark }: PdfItemProps) => {
+const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
   const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
     return marks.filter((m) => m.mark.location.page === page);
   }
@@ -20,10 +20,10 @@ const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, currentMarkValue,
         <PdfPageItem
           page={page}
           key={i}
-          marks={filterByPage(currentUserMarks, i)}
+          currentUserMarks={filterByPage(currentUserMarks, i)}
           handleMarkClick={handleMarkClick}
-          currentMarkValue={currentMarkValue}
-          currentUserMark={currentUserMark}
+          selectedMarkValue={selectedMarkValue}
+          selectedMark={selectedMark}
         />
       )
   }))

src/components/PDFView/PdfMarkItem.tsx

@@ -1,31 +1,35 @@
-import { CurrentUserMark, Mark, MarkLocation } from '../../types/mark.ts'
+import { CurrentUserMark } from '../../types/mark.ts'
 import styles from '../DrawPDFFields/style.module.scss'
 import { inPx } from '../../utils/pdf.ts'
 
 interface PdfMarkItemProps {
-  mark: Mark
+  userMark: CurrentUserMark
   handleMarkClick: (id: number) => void
-  isEditable: boolean
-  currentMarkValue: string
-  currentUserMark: CurrentUserMark | null
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
 }
 
-const PdfMarkItem = ({ mark, handleMarkClick, isEditable, currentMarkValue, currentUserMark }: PdfMarkItemProps) => {
-  const handleClick = () => isEditable && handleMarkClick(mark.id);
+//selectedMark represents the mark that the user is actively editing
+// selectedMarkValue representsnthe edited value
+// userMark is part of the overall currentUserMark array
+
+const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
+  const { location } = userMark.mark;
+  const handleClick = () => handleMarkClick(userMark.mark.id);
   const getMarkValue = () => (
-    currentUserMark?.mark.id === mark.id
-      ? currentMarkValue
-      : mark.value
+    selectedMark?.mark.id === userMark.mark.id
+      ? selectedMarkValue
+      : userMark.mark.value
   )
   return (
     <div
       onClick={handleClick}
-      className={`${styles.drawingRectangle} ${isEditable ? '' : styles.nonEditable}`}
+      className={styles.drawingRectangle}
       style={{
-        left: inPx(mark.location.left),
-        top: inPx(mark.location.top),
-        width: inPx(mark.location.width),
-        height: inPx(mark.location.height)
+        left: inPx(location.left),
+        top: inPx(location.top),
+        width: inPx(location.width),
+        height: inPx(location.height)
       }}
     >{getMarkValue()}</div>
   )

src/components/PDFView/PdfMarking.tsx

@@ -0,0 +1,95 @@
+import { Box } from '@mui/material'
+import styles from '../../pages/sign/style.module.scss'
+import PdfView from './index.tsx'
+import MarkFormField from '../../pages/sign/MarkFormField.tsx'
+import { PdfFile } from '../../types/drawing.ts'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { useState, useEffect } from 'react'
+import {
+  findNextCurrentUserMark,
+  isCurrentUserMarksComplete,
+  updateCurrentUserMarks,
+} from '../../utils/mark.ts'
+
+import { EMPTY } from '../../utils/const.ts'
+
+interface PdfMarkingProps {
+  files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
+  currentUserMarks: CurrentUserMark[],
+  setIsReadyToSign: (isReadyToSign: boolean) => void,
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
+  setUpdatedMarks: (markToUpdate: Mark) => void
+}
+
+const PdfMarking = (props: PdfMarkingProps) => {
+  const {
+    files,
+    currentUserMarks,
+    setIsReadyToSign,
+    setCurrentUserMarks,
+    setUpdatedMarks
+  } = props
+  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
+  const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")
+
+  useEffect(() => {
+    setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
+  }, [currentUserMarks])
+
+  const handleMarkClick = (id: number) => {
+    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id);
+    setSelectedMark(nextMark!);
+    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
+  }
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    if (!selectedMarkValue || !selectedMark) return;
+
+    const updatedMark: CurrentUserMark = {
+      ...selectedMark,
+      mark: {
+        ...selectedMark.mark,
+        value: selectedMarkValue
+      },
+      isCompleted: true
+    }
+
+    setSelectedMarkValue(EMPTY)
+    const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
+    console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setUpdatedMarks(updatedMark.mark)
+  }
+
+  const handleChange = (event: any) => setSelectedMarkValue(event.target.value)
+
+  return (
+    <>
+      <Box className={styles.container}>
+        {
+          currentUserMarks?.length > 0 && (
+            <PdfView
+              files={files}
+              handleMarkClick={handleMarkClick}
+              selectedMarkValue={selectedMarkValue}
+              selectedMark={selectedMark}
+              currentUserMarks={currentUserMarks}
+            />)}
+        {
+          selectedMark !== null && (
+            <MarkFormField
+              handleSubmit={handleSubmit}
+              handleChange={handleChange}
+              selectedMark={selectedMark}
+              selectedMarkValue={selectedMarkValue}
+            />
+          )}
+      </Box>
+    </>
+  )
+}
+
+export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -1,24 +1,16 @@
 import styles from '../DrawPDFFields/style.module.scss'
 import { PdfPage } from '../../types/drawing.ts'
-import { CurrentUserMark, Mark, MarkConfigDetails } from '../../types/mark.ts'
+import { CurrentUserMark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
-import { useSelector } from 'react-redux'
-import { State } from '../../store/rootReducer.ts'
-import { hexToNpub } from '../../utils'
 interface PdfPageProps {
   page: PdfPage
-  marks: Mark[]
+  currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
-  currentMarkValue: string
-  currentUserMark: CurrentUserMark | null
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
 }
 
-const PdfPageItem = ({ page, marks, handleMarkClick, currentMarkValue, currentUserMark }: PdfPageProps) => {
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
-  const isEditable = (mark: Mark): boolean => {
-    if (!usersPubkey) return false;
-    return mark.npub === hexToNpub(usersPubkey);
-  }
+const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
   return (
     <div
       className={styles.pdfImageWrapper}
@@ -35,14 +27,13 @@ const PdfPageItem = ({ page, marks, handleMarkClick, currentMarkValue, currentUs
 
       />
       {
-        marks.map((mark, i) => (
+        currentUserMarks.map((m, i) => (
           <PdfMarkItem
             key={i}
-            mark={mark}
-            isEditable={isEditable(mark)}
             handleMarkClick={handleMarkClick}
-            currentMarkValue={currentMarkValue}
-            currentUserMark={currentUserMark}
+            selectedMarkValue={selectedMarkValue}
+            userMark={m}
+            selectedMark={selectedMark}
         />
       ))}
     </div>

src/components/PDFView/index.tsx

@@ -1,37 +1,39 @@
 import { PdfFile } from '../../types/drawing.ts'
 import { Box } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
-import { CurrentUserMark, Mark, MarkConfigDetails } from '../../types/mark.ts'
+import { CurrentUserMark } from '../../types/mark.ts'
 
 interface PdfViewProps {
-  files: { [filename: string]: PdfFile },
-  fileHashes: { [key: string]: string | null },
-  marks: Mark[],
+  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
+  currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
-  currentMarkValue: string
-  currentUserMark: CurrentUserMark | null
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
 }
 
-const PdfView = ({ files, fileHashes, marks, handleMarkClick, currentMarkValue, currentUserMark }: PdfViewProps) => {
-  const filterByFile = (marks: Mark[], fileHash: string): Mark[] => {
-    return marks.filter((mark) => mark.pdfFileHash === fileHash);
+const PdfView = ({ files, 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%' }}>
-      {Object.entries(files)
-        .map(([name, file], i) => (
+      {
+        files.map(({ pdfFile, hash }, i) => {
+          if (!hash) return
+          return (
             <PdfItem
-            pdfFile={file}
+              pdfFile={pdfFile}
               key={i}
-            marks={filterByFile(marks, fileHashes[name] ?? "")}
+              currentUserMarks={filterByFile(currentUserMarks, hash)}
+              selectedMark={selectedMark}
               handleMarkClick={handleMarkClick}
-            currentMarkValue={currentMarkValue}
-            currentUserMark={currentUserMark}
+              selectedMarkValue={selectedMarkValue}
           />
-        ))}
+          )
+        })
+      }
     </Box>
   )
-
 }
 
 export default PdfView;

src/pages/sign/MarkFormField.tsx

@@ -1,25 +1,26 @@
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import styles from './style.module.scss'
 import { Box, Button, TextField } from '@mui/material'
-import { MarkTypeTranslation } from './const.ts'
+
+import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
 
 interface MarkFormFieldProps {
   handleSubmit: (event: any) => void
   handleChange: (event: any) => void
-  currentMark: CurrentUserMark
-  currentMarkValue: string
+  selectedMark: CurrentUserMark
+  selectedMarkValue: string
 }
 
 const MarkFormField = (props: MarkFormFieldProps) => {
-  const { handleSubmit, handleChange, currentMark, currentMarkValue } = props;
-  const getSubmitButton = () => currentMark.isLast ? 'Complete' : 'Next';
+  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={MarkTypeTranslation[currentMark.mark.type.valueOf()]}
-          value={currentMarkValue}
+          label={MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]}
+          value={selectedMarkValue}
           onChange={handleChange}
         />
         <Button type="submit" variant="contained">

src/pages/sign/const.ts

@@ -1,5 +0,0 @@
-import { MarkType } from '../../types/drawing.ts'
-
-export const MarkTypeTranslation: { [key: string]: string } = {
-  [MarkType.FULLNAME.valueOf()]: "Full Name"
-}