fix(sign): allow signing without selectedMark - no currentUserMarks

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/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(
-    (mark) => mark.id !== selectedMark.id
-  )
-  return (
-    isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
-  )
+  if (selectedMark && currentUserMarks.length > 0) {
+    const filteredMarks = currentUserMarks.filter(
+      (mark) => mark.id !== selectedMark.id
+    )
+    return (
+      isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
+    )
+  }
+
+  return true
 }
 
 const getUpdatedMark = (