fix: improve slug validation for add software, project and news

research-software-directory · Nov 12, 2024 · 32c3fdf · 32c3fdf
1 parent c9c7def
commit 32c3fdf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/frontend/components/news/add/AddNewsCard.tsx b/frontend/components/news/add/AddNewsCard.tsx
@@ -27,7 +27,6 @@ type AddNewsForm = {
 }
 
 const formId='add-news-form'
-let lastValidatedSlug = ''
 
 const initialState = {
   loading: false,
@@ -40,12 +39,12 @@ export default function AddNewsCard() {
   const [baseUrl, setBaseUrl] = useState('')
   const [validating, setValidating]=useState(false)
   const [state, setState] = useState(initialState)
-  const {register, control, handleSubmit, watch, formState, setError, setValue} = useForm<AddNewsForm>({
+  const {register, control, handleSubmit, watch, formState, setError, setValue,clearErrors} = useForm<AddNewsForm>({
     mode: 'onChange',
     defaultValues:{
       title: null,
       slug: null,
-      // default is today in the format YYYY-MM-DD (en-CA locale)
+      // default is today in the format YYYY-MM-DD (sv-SE locale)
       publication_date: new Date().toLocaleDateString('sv-SE')
     }
   })
@@ -63,8 +62,9 @@ export default function AddNewsCard() {
   useEffect(() => {
     if (typeof location != 'undefined') {
       setBaseUrl(`${location.origin}/news/${publication_date}/`)
+      clearErrors('slug')
     }
-  }, [publication_date])
+  }, [publication_date,clearErrors])
 
   /**
    * Convert title value into slugValue.
@@ -99,31 +99,31 @@ export default function AddNewsCard() {
           message
         })
       }
-      lastValidatedSlug = `${publication_date}/${bouncedSlug}`
       // we need to wait some time
       setValidating(false)
     }
 
     if (bouncedSlug && publication_date &&
-      `${publication_date}/${bouncedSlug}` !== lastValidatedSlug
+      bouncedSlug===slug
     ) {
-      // clearErrors()
-      // debugger
       validateSlug()
+    } else if (!slug){
+      // fix: remove validating/spinner when no slug
+      setValidating(false)
     }
     return ()=>{abort=true}
-  },[bouncedSlug,publication_date,token,setError])
+  },[bouncedSlug,publication_date,slug,token,setError])
 
   useEffect(()=>{
     // As soon as the slug value start changing we signal to user that we need to validate new slug.
     // New slug value is "debounced" into variable bouncedSlug after the user stops typing.
     // Another useEffect monitors bouncedSlug value and performs the validation.
-    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed (see line 115).
-    if (slug && slug !== lastValidatedSlug){
+    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed.
+    if (slug && !errors?.title && !errors?.slug){
       // debugger
       setValidating(true)
     }
-  },[slug])
+  },[slug,publication_date,errors?.title,errors?.slug])
 
   function handleCancel() {
     // on cancel we send user back to previous page
@@ -190,6 +190,8 @@ export default function AddNewsCard() {
     if (state.loading == true) return true
     // during async validation we disable button
     if (validating === true) return true
+    // check for errors
+    if (Object.keys(errors).length > 0) return true
     // if isValid is not true
     return isValid===false
   }

diff --git a/frontend/components/projects/add/AddProjectCard.tsx b/frontend/components/projects/add/AddProjectCard.tsx
@@ -38,7 +38,6 @@ type AddProjectForm = {
   project_subtitle: string|null,
 }
 
-let lastValidatedSlug = ''
 const formId='add-project-card-form'
 
 export default function AddProjectCard() {
@@ -61,6 +60,7 @@ export default function AddProjectCard() {
   // console.log('lastValidatedSlug...', lastValidatedSlug)
   // console.log('bouncedSlug...', bouncedSlug)
   // console.log('errors...', errors)
+  // console.log('isValid...', isValid)
   // console.log('validating...', validating)
   // console.groupEnd()
 
@@ -97,26 +97,27 @@ export default function AddProjectCard() {
         const message = `${bouncedSlug} is already taken. Use letters, numbers and dash "-" to modify slug value.`
         setError('slug',{type:'validate',message})
       }
-
-      lastValidatedSlug = bouncedSlug
       setValidating(false)
     }
-    if (bouncedSlug && token && bouncedSlug !== lastValidatedSlug) {
+    if (bouncedSlug && token && bouncedSlug === slug) {
       validateSlug()
+    }else if (!slug){
+      // fix: remove validating/spinner when no slug
+      setValidating(false)
     }
     return ()=>{abort=true}
-  },[bouncedSlug,token,setError])
+  },[bouncedSlug,slug,token,setError])
 
   useEffect(()=>{
     // As soon as the slug value start changing we signal to user that we need to validate new slug.
     // New slug value is "debounced" into variable bouncedSlug after the user stops typing.
     // Another useEffect monitors bouncedSlug value and performs the validation.
-    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed (see line 115).
-    if (slug && slug !== lastValidatedSlug){
+    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed.
+    if (slug && !errors?.project_title && !errors?.slug){
       // debugger
       setValidating(true)
     }
-  },[slug])
+  },[slug,errors?.project_title,errors?.slug])
 
   function handleCancel() {
     // on cancel we send user back to previous page
@@ -192,6 +193,8 @@ export default function AddProjectCard() {
     if (state.loading === true) return true
     // during async validation we disable button
     if (validating === true) return true
+    // check for errors
+    if (Object.keys(errors).length > 0) return true
     // if isValid is not true
     return isValid===false
   }

diff --git a/frontend/components/software/add/AddSoftwareCard.tsx b/frontend/components/software/add/AddSoftwareCard.tsx
@@ -38,7 +38,7 @@ type AddSoftwareForm = {
   short_statement: string|null,
 }
 
-let lastValidatedSlug = ''
+// let lastValidatedSlug = ''
 const formId = 'add-software-form'
 
 export default function AddSoftwareCard() {
@@ -57,7 +57,6 @@ export default function AddSoftwareCard() {
   const bouncedSlug = useDebounce(slug, 700)
 
   // console.group('AddSoftwareCard')
-  // console.log('state...', state)
   // console.log('slug...', slug)
   // console.log('lastValidatedSlug...', lastValidatedSlug)
   // console.log('bouncedSlug...', bouncedSlug)
@@ -103,27 +102,28 @@ export default function AddSoftwareCard() {
         const message = `${bouncedSlug} is already taken. Use letters, numbers and dash "-" to modify slug value.`
         setError('slug',{type:'custom-slug-validation',message})
       }
-
-      lastValidatedSlug = bouncedSlug
       setValidating(false)
     }
     // debugger
-    if (bouncedSlug && token && bouncedSlug !== lastValidatedSlug) {
+    if (bouncedSlug && token && bouncedSlug === slug) {
       validateSlug()
+    } else if (!slug){
+      // fix: remove validating/spinner when no slug
+      setValidating(false)
     }
     return ()=>{abort=true}
-  },[bouncedSlug,token,setError])
+  },[bouncedSlug,slug,token,setError])
 
   useEffect(()=>{
     // As soon as the slug value start changing we signal to user that we need to validate new slug.
     // New slug value is "debounced" into variable bouncedSlug after the user stops typing.
     // Another useEffect monitors bouncedSlug value and performs the validation.
-    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed (see line 115).
-    if (slug && slug !== lastValidatedSlug){
+    // Validating flag disables Save button from the moment the slug value is changed until the validation is completed.
+    if (slug && !errors?.brand_name && !errors?.slug){
       // debugger
       setValidating(true)
     }
-  },[slug])
+  },[slug,errors?.brand_name,errors?.slug])
 
   function handleCancel() {
     // on cancel we send user back to previous page
@@ -202,6 +202,8 @@ export default function AddSoftwareCard() {
     if (state.loading === true) return true
     // during async validation we disable button
     if (validating === true) return true
+    // check for errors
+    if (Object.keys(errors).length > 0) return true
     // if isValid is not true
     return isValid===false
   }