[0.3.x] Ensure marked as valid once response returns (#19)

* Ensure marked as valid once response returns

* Update packages

* lint

* Update handler

Author: timacdonald

packages/alpine/src/index.ts

@@ -40,14 +40,13 @@ export default function (Alpine: TAlpine) {
             .on('validatingChanged', () => {
                 form.validating = validator.validating()
             })
-            .on('touchedChanged', () => {
+            .on('validatedChanged', () => {
                 state.valid = validator.valid()
-
+            })
+            .on('touchedChanged', () => {
                 state.touched = validator.touched()
             })
             .on('errorsChanged', () => {
-                state.valid = validator.valid()
-
                 form.hasErrors = validator.hasErrors()
 
                 form.errors = toSimpleValidationErrors(validator.errors())

packages/core/src/client.ts

@@ -66,19 +66,27 @@ const request = (userConfig: Config = {}): Promise<unknown> => {
 
     (config.onStart ?? (() => null))()
 
-    return axiosClient.request(config).then(response => {
+    return axiosClient.request(config).then(async response => {
         if (config.precognitive) {
             validatePrecognitionResponse(response)
         }
 
-        if (config.precognitive && config.onPrecognitionSuccess && successResolver(response)) {
-            return config.onPrecognitionSuccess(response)
+        const status = response.status
+
+        let payload: any = response
+
+        if (config.precognitive && config.onPrecognitionSuccess && successResolver(payload)) {
+            payload = await Promise.resolve(config.onPrecognitionSuccess(payload) ?? payload)
+        }
+
+        if (config.onSuccess && isSuccess(status)) {
+            payload = await Promise.resolve(config.onSuccess(payload) ?? payload)
         }
 
-        const statusHandler = resolveStatusHandler(config, response.status)
+        const statusHandler = resolveStatusHandler(config, status)
             ?? ((response) => response)
 
-        return statusHandler(response)
+        return statusHandler(payload) ?? payload
     }, error => {
         if (isNotServerGeneratedError(error)) {
             return Promise.reject(error)
@@ -117,6 +125,11 @@ const resolveConfig = (config: Config): Config => ({
     },
 })
 
+/**
+ * Determine if the status is successful.
+ */
+const isSuccess = (status: number) => status >= 200 && status < 300
+
 /**
  * Abort an existing request with the same configured fingerprint.
  */

packages/core/src/types.ts

@@ -12,6 +12,7 @@ export type Config = AxiosRequestConfig&{
     fingerprint?: string|null,
     onBefore?: () => boolean|undefined,
     onStart?: () => void,
+    onSuccess?: (response: AxiosResponse) => unknown,
     onPrecognitionSuccess?: (response: AxiosResponse) => unknown,
     onValidationError?: StatusHandler,
     onUnauthorized?: StatusHandler,
@@ -64,6 +65,7 @@ export interface ValidatorListeners {
     errorsChanged: Array<() => void>,
     validatingChanged: Array<() => void>,
     touchedChanged: Array<() => void>,
+    validatedChanged: Array<() => void>,
 }
 
 export type RequestMethod = 'get'|'post'|'patch'|'put'|'delete'

packages/core/src/validator.ts

@@ -16,6 +16,7 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         errorsChanged: [],
         touchedChanged: [],
         validatingChanged: [],
+        validatedChanged: [],
     }
 
     /**
@@ -36,6 +37,26 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         }
     }
 
+    /**
+     * Inputs that have been validated.
+     */
+    let validated: Array<string> = []
+
+    const setValidated = (value: Array<string>) => {
+        const uniqueNames = [...new Set(value)]
+
+        if (validated.length !== uniqueNames.length || ! uniqueNames.every(name => validated.includes(name))) {
+            validated = uniqueNames
+
+            listeners.validatedChanged.forEach(callback => callback())
+        }
+    }
+
+    /**
+     * Valid validation state.
+     */
+    const valid = () => validated.filter(name => typeof errors[name] === 'undefined')
+
     /**
      * Touched input state.
      */
@@ -79,11 +100,6 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
      */
     const hasErrors = () => Object.keys(errors).length > 0
 
-    /**
-     * Valid validation state.
-     */
-    const valid = () => touched.filter(name => typeof errors[name] === 'undefined')
-
     /**
      * Debouncing timeout state.
      */
@@ -134,12 +150,17 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
             validate,
             timeout: config.timeout ?? 5000,
             onValidationError: (response, axiosError) => {
+                setValidated([...validated, ...validate])
+
                 setErrors(merge(omit({ ...errors }, validate), response.data.errors))
 
                 return config.onValidationError
                     ? config.onValidationError(response, axiosError)
                     : Promise.reject(axiosError)
             },
+            onSuccess: () => {
+                setValidated([...validated, ...validate])
+            },
             onPrecognitionSuccess: (response) => {
                 setErrors(omit({ ...errors }, validate))
 

packages/core/tests/validator.test.js

@@ -203,28 +203,6 @@ it('does not validate if the field has not been changed', async () => {
     expect(requestMade).toBe(false)
 })
 
-it('is valid after field has changed and successful validation has triggered', async () => {
-    let requestMade = false
-    let promise = Promise.resolve(null)
-    axios.request.mockImplementation(() => {
-        requestMade = true
-        return promise = Promise.resolve({
-            status: 201,
-            headers: { precognition: 'true' },
-            data: {},
-        })
-    })
-    const validator = createValidator((client) => client.post('/foo', {}), {
-        name: 'Tim',
-    })
-
-    validator.validate('name', 'Taylor')
-    await promise
-
-    expect(requestMade).toBe(true)
-    expect(validator.valid()).toEqual(['name'])
-})
-
 it('filters out files', () => {
     let config
     axios.request.mockImplementationOnce((c) => {
@@ -289,3 +267,111 @@ it('filters out files', () => {
         }
     })
 })
+
+it('doesnt mark fields as validated while response is pending', async () => {
+    expect.assertions(10)
+
+    let resolver = null
+    let promise = null
+    let onValidatedChangedCalledTimes = 0
+    axios.request.mockImplementation(() => {
+        promise = new Promise(resolve => {
+            resolver = resolve
+        })
+
+        return promise
+    })
+    let data = {}
+    const validator = createValidator((client) => client.post('/foo', data))
+    validator.on('validatedChanged', () => onValidatedChangedCalledTimes++)
+
+    expect(validator.valid()).toEqual([])
+    expect(onValidatedChangedCalledTimes).toEqual(0)
+
+    data = { app: 'Laravel' }
+    expect(validator.valid()).toEqual([])
+
+    validator.validate('app', 'Laravel')
+    expect(validator.valid()).toEqual([])
+
+    resolver({ headers: { precognition: 'true' }, status: 204 })
+    await vi.runAllTimersAsync()
+    expect(validator.valid()).toEqual(['app'])
+    expect(onValidatedChangedCalledTimes).toEqual(1)
+
+    data = { app: 'Laravel', version: '10' }
+    expect(validator.valid()).toEqual(['app'])
+
+    validator.validate('version', '10')
+    expect(validator.valid()).toEqual(['app'])
+
+    axios.isAxiosError.mockReturnValueOnce(true)
+    resolver({ headers: { precognition: 'true' }, status: 422, data: { errors: {}} })
+    await vi.runAllTimersAsync()
+    expect(validator.valid()).toEqual(['app', 'version'])
+    expect(onValidatedChangedCalledTimes).toEqual(2)
+})
+
+it('doesnt mark fields as validated on error status', async () => {
+    expect.assertions(6)
+
+    let resolver = null
+    let promise = null
+    let onValidatedChangedCalledTimes = 0
+    axios.request.mockImplementation(() => {
+        promise = new Promise(resolve => {
+            resolver = resolve
+        })
+
+        return promise
+    })
+    let data = {}
+    const validator = createValidator((client) => client.post('/foo', data))
+    validator.on('validatedChanged', () => onValidatedChangedCalledTimes++)
+
+    expect(validator.valid()).toEqual([])
+    expect(onValidatedChangedCalledTimes).toEqual(0)
+
+    data = { app: 'Laravel' }
+    expect(validator.valid()).toEqual([])
+
+    validator.validate('app', 'Laravel')
+    expect(validator.valid()).toEqual([])
+
+    resolver({ headers: { precognition: 'true' }, status: 401 })
+    await vi.runAllTimersAsync()
+    expect(validator.valid()).toEqual([])
+    expect(onValidatedChangedCalledTimes).toEqual(0)
+})
+
+it('does mark fields as validated on success status', async () => {
+    expect.assertions(6)
+
+    let resolver = null
+    let promise = null
+    let onValidatedChangedCalledTimes = 0
+    axios.request.mockImplementation(() => {
+        promise = new Promise(resolve => {
+            resolver = resolve
+        })
+
+        return promise
+    })
+    let data = {}
+    const validator = createValidator((client) => client.post('/foo', data))
+    validator.on('validatedChanged', () => onValidatedChangedCalledTimes++)
+
+    expect(validator.valid()).toEqual([])
+    expect(onValidatedChangedCalledTimes).toEqual(0)
+
+    data = { app: 'Laravel' }
+    expect(validator.valid()).toEqual([])
+
+    validator.validate('app', 'Laravel')
+    expect(validator.valid()).toEqual([])
+
+    resolver({ headers: { precognition: 'true' }, status: 200 })
+    await vi.runAllTimersAsync()
+    expect(validator.valid()).toEqual(['app'])
+    expect(onValidatedChangedCalledTimes).toEqual(1)
+})

packages/react/src/index.ts

@@ -77,16 +77,15 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             .on('validatingChanged', () => {
                 setValidating(validator.current!.validating())
             })
+            .on('validatedChanged', () => {
+                setValid(validator.current!.valid())
+            })
             .on('touchedChanged', () => {
                 setTouched(validator.current!.touched())
-
-                setValid(validator.current!.valid())
             })
             .on('errorsChanged', () => {
                 setHasErrors(validator.current!.hasErrors())
 
-                setValid(validator.current!.valid())
-
                 // @ts-expect-error
                 setErrors(toSimpleValidationErrors(validator.current!.errors()))
             })

packages/vue/src/index.ts

@@ -37,19 +37,17 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         .on('validatingChanged', () => {
             form.validating = validator.validating()
         })
+        .on('validatedChanged', () => {
+            // @ts-expect-error
+            valid.value = validator.valid()
+        })
         .on('touchedChanged', () => {
             // @ts-expect-error
             touched.value = validator.touched()
-
-            // @ts-expect-error
-            valid.value = validator.valid()
         })
         .on('errorsChanged', () => {
             form.hasErrors = validator.hasErrors()
 
-            // @ts-expect-error
-            valid.value = validator.valid()
-
             // @ts-expect-error
             form.errors = toSimpleValidationErrors(validator.errors())
         })