diff --git a/frontend/components/news/add/AddNewsCard.tsx b/frontend/components/news/add/AddNewsCard.tsx index c95252b69..f4fd2774c 100644 --- 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({ + const {register, control, handleSubmit, watch, formState, setError, setValue,clearErrors} = useForm({ 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 index 504ed75ab..1ed9b54bf 100644 --- 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 index 6a7999b67..6e787de82 100644 --- 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 }