Merge branch 'staging' into 290-user-ext-log-missmatch

src/components/MarkFormField/index.tsx

@@ -17,7 +17,7 @@ interface MarkFormFieldProps {
   handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
   handleSelectedMarkValueChange: (value: string) => void
   handleSubmit: (event: React.MouseEvent<HTMLButtonElement>) => void
-  selectedMark: CurrentUserMark
+  selectedMark: CurrentUserMark | null
   selectedMarkValue: string
 }
 
@@ -34,26 +34,23 @@ const MarkFormField = ({
 }: MarkFormFieldProps) => {
   const [displayActions, setDisplayActions] = useState(true)
   const [complete, setComplete] = useState(false)
-
   const isReadyToSign = () =>
     isCurrentUserMarksComplete(currentUserMarks) ||
     isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
   const isCurrent = (currentMark: CurrentUserMark) =>
-    currentMark.id === selectedMark.id && !complete
+    currentMark.id === selectedMark?.id && !complete
   const isDone = (currentMark: CurrentUserMark) =>
     isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
   const findNext = () => {
     return (
-      currentUserMarks[selectedMark.id] ||
+      currentUserMarks[selectedMark!.id] ||
       findNextIncompleteCurrentUserMark(currentUserMarks)
     )
   }
   const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    console.log('handle form submit runs...')
-
     // Without this line, we lose mark values when switching
-    handleCurrentUserMarkChange(selectedMark)
+    handleCurrentUserMarkChange(selectedMark!)
 
     if (!complete) {
       isReadyToSign()
@@ -63,15 +60,16 @@ const MarkFormField = ({
   }
 
   const toggleActions = () => setDisplayActions(!displayActions)
-  const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
+  const markLabel = selectedMark
-
+    ? getToolboxLabelByMarkType(selectedMark.mark.type)
+    : ''
   const handleCurrentUserMarkClick = (mark: CurrentUserMark) => {
     setComplete(false)
     handleCurrentUserMarkChange(mark)
   }
 
   const handleSelectCompleteMark = () => {
-    handleCurrentUserMarkChange(selectedMark)
+    if (currentUserMarks.length) handleCurrentUserMarkChange(selectedMark!)
     setComplete(true)
   }
 
@@ -106,14 +104,15 @@ const MarkFormField = ({
         <div className={styles.actionsWrapper}>
           <div className={styles.actionsTop}>
             <div className={styles.actionsTopInfo}>
-              {!complete && (
+              {!complete && selectedMark ? (
                 <p className={styles.actionsTopInfoText}>Add {markLabel}</p>
+              ) : (
+                <p className={styles.actionsTopInfoText}>Finish</p>
               )}
-              {complete && <p className={styles.actionsTopInfoText}>Finish</p>}
             </div>
           </div>
           <div className={styles.inputWrapper}>
-            {!complete && (
+            {!complete && selectedMark ? (
               <form onSubmit={(e) => handleFormSubmit(e)}>
                 <MarkInput
                   markType={selectedMark.mark.type}
@@ -129,9 +128,7 @@ const MarkFormField = ({
                   </Button>
                 </div>
               </form>
-            )}
+            ) : (
-
-            {complete && (
               <div className={styles.actionsBottom}>
                 <Button
                   onClick={handleSignAndComplete}

src/components/PDFView/PdfMarking.tsx

@@ -101,21 +101,22 @@ const PdfMarking = (props: PdfMarkingProps) => {
    */
   const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
-    if (!selectedMarkValue || !selectedMark) return
+    if (selectedMarkValue && selectedMark) {
+      const updatedMark: CurrentUserMark = getUpdatedMark(
+        selectedMark,
+        selectedMarkValue
+      )
 
-    const updatedMark: CurrentUserMark = getUpdatedMark(
+      setSelectedMarkValue(EMPTY)
-      selectedMark,
+      const updatedCurrentUserMarks = updateCurrentUserMarks(
-      selectedMarkValue
+        currentUserMarks,
-    )
+        updatedMark
+      )
+      setCurrentUserMarks(updatedCurrentUserMarks)
+      setSelectedMark(null)
+      setUpdatedMarks(updatedMark.mark)
+    }
 
-    setSelectedMarkValue(EMPTY)
-    const updatedCurrentUserMarks = updateCurrentUserMarks(
-      currentUserMarks,
-      updatedMark
-    )
-    setCurrentUserMarks(updatedCurrentUserMarks)
-    setSelectedMark(null)
-    setUpdatedMarks(updatedMark.mark)
     handleSign()
   }
 
@@ -152,28 +153,24 @@ const PdfMarking = (props: PdfMarkingProps) => {
           centerIcon={faPen}
           rightIcon={faCircleInfo}
         >
-          {currentUserMarks?.length > 0 && (
+          <PdfView
-            <PdfView
+            currentFile={currentFile}
-              currentFile={currentFile}
+            files={files}
-              files={files}
+            handleMarkClick={handleMarkClick}
-              handleMarkClick={handleMarkClick}
-              selectedMarkValue={selectedMarkValue}
-              selectedMark={selectedMark}
-              currentUserMarks={currentUserMarks}
-              otherUserMarks={otherUserMarks}
-            />
-          )}
-        </StickySideColumns>
-        {selectedMark !== null && (
-          <MarkFormField
-            handleSubmit={handleSubmit}
-            handleSelectedMarkValueChange={handleChange}
-            selectedMark={selectedMark}
             selectedMarkValue={selectedMarkValue}
+            selectedMark={selectedMark}
             currentUserMarks={currentUserMarks}
-            handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+            otherUserMarks={otherUserMarks}
           />
-        )}
+        </StickySideColumns>
+        <MarkFormField
+          handleSubmit={handleSubmit}
+          handleSelectedMarkValueChange={handleChange}
+          selectedMark={selectedMark}
+          selectedMarkValue={selectedMarkValue}
+          currentUserMarks={currentUserMarks}
+          handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+        />
       </Container>
     </>
   )

src/utils/mark.ts

@@ -123,15 +123,19 @@ const isLast = <T>(index: number, arr: T[]) => index === arr.length - 1
 
 const isCurrentValueLast = (
   currentUserMarks: CurrentUserMark[],
-  selectedMark: CurrentUserMark,
+  selectedMark: CurrentUserMark | null,
   selectedMarkValue: string
 ) => {
-  const filteredMarks = currentUserMarks.filter(
+  if (selectedMark && currentUserMarks.length > 0) {
-    (mark) => mark.id !== selectedMark.id
+    const filteredMarks = currentUserMarks.filter(
-  )
+      (mark) => mark.id !== selectedMark.id
-  return (
+    )
-    isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
+    return (
-  )
+      isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
+    )
+  }
+
+  return true
 }
 
 const getUpdatedMark = (