fix: form validation when changing mention type from highlight to oth…

…er types refactor: show modals after the open flag is set to true in order to populate the default form data on load.
research-software-directory · Sep 24, 2024 · 554248b · 554248b
1 parent 2c36462
commit 554248b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 49 deletions.
diff --git a/frontend/components/admin/mentions/MentionsOverviewList.tsx b/frontend/components/admin/mentions/MentionsOverviewList.tsx
@@ -74,14 +74,17 @@ export default function MentionsOverviewList({list, onUpdate}: { list: MentionIt
           )
         })}
       </List>
-      <EditMentionModal
-        title={mentionToEdit?.id as string ?? 'undefined'}
-        open={modalOpen}
-        pos={undefined} //why does this exist?
-        item={mentionToEdit}
-        onCancel={() => setModalOpen(false)}
-        onSubmit={({data}) => {updateMention(data)}}
-      />
+      {modalOpen ?
+        <EditMentionModal
+          title={mentionToEdit?.id as string ?? 'undefined'}
+          open={modalOpen}
+          pos={undefined} //why does this exist?
+          item={mentionToEdit}
+          onCancel={() => setModalOpen(false)}
+          onSubmit={({data}) => {updateMention(data)}}
+        />
+        : null
+      }
     </>
   )
 };

diff --git a/frontend/components/mention/EditMentionModal.tsx b/frontend/components/mention/EditMentionModal.tsx
@@ -8,15 +8,13 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {useEffect} from 'react'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Alert from '@mui/material/Alert'
-// import AlertTitle from '@mui/material/AlertTitle'
 
 import {useForm} from 'react-hook-form'
 
@@ -56,15 +54,20 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t
   const isAdmin = user?.role === 'rsd_admin'
 
   const smallScreen = useMediaQuery('(max-width:600px)')
-  const {handleSubmit, watch, formState, reset, control, register} = useForm<MentionItemProps>({
+  const {handleSubmit, watch, formState, reset, control, register, clearErrors} = useForm<MentionItemProps>({
     mode: 'onChange',
     defaultValues: {
       ...item
     }
   })
   // extract form states
-  const {isValid, isDirty} = formState
+  const {isValid, isDirty, errors} = formState
   const formData = watch()
+  // need to clear image_url error manually after the type change
+  // and dynamic rules change from required to not required
+  if (formData.mention_type!=='highlight' && errors?.hasOwnProperty('image_url')){
+    clearErrors('image_url')
+  }
 
   // console.group('EditMentionModal')
   // console.log('isValid...', isValid)
@@ -73,13 +76,6 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t
   // console.log('formData...', formData)
   // console.groupEnd()
 
-  useEffect(() => {
-    if (item) {
-      //(re)set form to item values
-      reset(item)
-    }
-  }, [item, reset])
-
   function handleCancel(reason: any) {
     if (reason === 'backdropClick') {
       // we do not cancel on backdrop click
@@ -264,9 +260,16 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t
               defaultValue: formData?.image_url,
               helperTextMessage: config.image_url.help,
               helperTextCnt: `${formData?.image_url?.length || 0}/${config.image_url.validation.maxLength.value}`,
+              // if type not highlight we remove required flag and disable input
               disabled: formData?.mention_type !== 'highlight'
             }}
-            rules={formData?.mention_type === 'highlight' ? config.image_url.validation : {}}
+            rules={formData?.mention_type === 'highlight' ?
+              config.image_url.validation :
+              {
+                // if type not highlight we remove required flag and disable input
+                required: false
+              }
+            }
           />
 
           <div className="py-2"></div>

diff --git a/frontend/components/mention/MentionEditSection.tsx b/frontend/components/mention/MentionEditSection.tsx
@@ -85,35 +85,41 @@ export default function MentionEditSection() {
     return (
       <>
         {/* modal as external part of the section */}
-        <EditMentionModal
-          title={settings.editModalTitle}
-          open={editModal.open}
-          pos={editModal.pos}
-          item={editModal.item}
-          onCancel={closeEditModal}
-          onSubmit={(props)=>onSubmit(props.data)}
-        />
-        <ConfirmDeleteModal
-          open={confirmModal.open}
-          title={settings.confirmDeleteModalTitle}
-          body={
-            <p>Are you sure you want to remove <strong>
-              <SanitizedMathMLBox
-                component="span"
-                rawHtml={confirmModal?.item?.title ?? 'this item'}
-              />
-            </strong>?</p>
-          }
-          onCancel={() => {
-          // cancel confirm by removing item
-            confirmDelete()
-          }}
-          onDelete={() => {
-            if (confirmModal?.item) onDelete(confirmModal?.item)
-            // hide modal by removing confirm item
-            confirmDelete()
-          }}
-        />
+        {editModal.open ?
+          <EditMentionModal
+            title={settings.editModalTitle}
+            open={editModal.open}
+            pos={editModal.pos}
+            item={editModal.item}
+            onCancel={closeEditModal}
+            onSubmit={(props)=>onSubmit(props.data)}
+          />
+          : null
+        }{
+          confirmModal.open ?
+            <ConfirmDeleteModal
+              open={confirmModal.open}
+              title={settings.confirmDeleteModalTitle}
+              body={
+                <p>Are you sure you want to remove <strong>
+                  <SanitizedMathMLBox
+                    component="span"
+                    rawHtml={confirmModal?.item?.title ?? 'this item'}
+                  />
+                </strong>?</p>
+              }
+              onCancel={() => {
+                // cancel confirm by removing item
+                confirmDelete()
+              }}
+              onDelete={() => {
+                if (confirmModal?.item) onDelete(confirmModal?.item)
+                // hide modal by removing confirm item
+                confirmDelete()
+              }}
+            />
+            : null
+        }
       </>
     )
   }