Fix isValid state expression

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/use-ajv-form",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Custom React Hook that integrates with Ajv JSON Schema Validator",
   "main": "dist/use-ajv-form.es.js",
   "author": "Aleksandar Grbic",

src/index.ts

@@ -1,16 +1,16 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { getInitial, getValue, getErrors, addUserDefinedKeywords } from './utils';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { addUserDefinedKeywords, getErrors, getInitial, getValue } from './utils';
 import { ajv } from './utils/validation';
 
+import { ErrorObject, JSONSchemaType, KeywordDefinition } from 'ajv';
+import { useDebounce } from './Hooks/useDebounce';
 import {
   AJVMessageFunction,
   FormField,
   IState,
-  useFormErrors,
   UseFormReturn,
+  useFormErrors,
 } from './utils/types';
-import { ErrorObject, JSONSchemaType, KeywordDefinition } from 'ajv';
-import { useDebounce } from './Hooks/useDebounce';
 
 const useAJVForm = <T extends Record<string, any>>(
   initial: T,
@@ -41,17 +41,7 @@ const useAJVForm = <T extends Record<string, any>>(
   const AJVValidate = ajv.compile(schema);
 
   const resetForm = () => {
-    setState(
-      Object.keys(state).reduce((acc, name) => {
-        return {
-          ...acc,
-          [name]: {
-            value: '',
-            error: '',
-          },
-        };
-      }, {} as IState<T>),
-    );
+    setState(initialStateRef.current);
   };
 
   const validateField = (fieldName: keyof T) => {
@@ -93,6 +83,7 @@ const useAJVForm = <T extends Record<string, any>>(
         name: Object.keys(form)[0] as keyof T,
         editId: editCounter,
       });
+
       setEditCounter(editCounter + 1);
 
       return newState;
@@ -144,6 +135,11 @@ const useAJVForm = <T extends Record<string, any>>(
 
         return { isValid: false, data: null };
       }
+
+      if (!isFormValid(state, initialStateRef.current)) {
+        return { isValid: false, data: null };
+      }
+
       return { isValid: true, data };
     } catch (error) {
       return { isValid: false, data: null };
@@ -159,10 +155,23 @@ const useAJVForm = <T extends Record<string, any>>(
     );
   };
 
-  const isFormValid = (currentState: IState<T>): boolean => {
-    return !Object.keys(currentState).some((key) => currentState[key].error !== '');
+  const isFormValid = (
+    currentState: IState<T>,
+    initialState: IState<T>,
+  ): boolean => {
+    const hasErrors = Object.keys(currentState).some(
+      (key) => currentState[key].error !== '',
+    );
+
+    const formIsDirty = isFormDirty(currentState, initialState);
+
+    return !hasErrors && formIsDirty;
   };
 
+  const isValid = useMemo(() => {
+    return isFormValid(state, initialStateRef.current);
+  }, [state]);
+
   const isDirty = useMemo(
     () => isFormDirty(state, initialStateRef.current),
     [state],
@@ -172,8 +181,6 @@ const useAJVForm = <T extends Record<string, any>>(
     setState(_setErrors(getErrors(errors, options?.userDefinedMessages)));
   };
 
-  const isValid = useMemo(() => isFormValid(state), [state]);
-
   useEffect(() => {
     if (options?.shouldDebounceAndValidate === false || !debouncedField) {
       return;

src/useAjvForm.test.tsx

@@ -1,7 +1,7 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-import useAJVForm from '.';
 import { JSONSchemaType } from 'ajv';
 import { vi } from 'vitest';
+import useAJVForm from '.';
 
 // @ts-expect-error - Currently, there is no type definition for this package.
 import programmerNetworkAjv from 'programmer-network-ajv';
@@ -106,7 +106,7 @@ describe('useAJVForm', () => {
 
     result.current.reset();
 
-    expect(result.current.state.title.value).toBe('');
+    expect(result.current.state.title.value).toBe('Hello');
   });
 
   it('validates the form correctly', () => {
@@ -121,13 +121,36 @@ describe('useAJVForm', () => {
 
     const { result } = renderHook(() => useAJVForm(initialData, schema));
 
-    result.current.set({ title: '' });
+    result.current.set({ title: 'Foo' });
 
     const validation = result.current.validate();
 
     expect(validation.isValid).toBe(true);
   });
 
+  it('isValid should be false when the initial state is set or when reset is called', () => {
+    const initialData = { title: 'Foo' };
+    const schema: JSONSchemaType<{ title: string }> = {
+      type: 'object',
+      required: ['title'],
+      properties: {
+        title: { type: 'string' },
+      },
+    };
+
+    const { result } = renderHook(() => useAJVForm(initialData, schema));
+
+    expect(result.current.validate().isValid).toBe(false);
+
+    result.current.set({ title: 'Bar' });
+
+    expect(result.current.validate().isValid).toBe(true);
+
+    result.current.reset();
+
+    expect(result.current.validate().isValid).toBe(false);
+  });
+
   it('validates minLength and maxLength for title', () => {
     const initialData = { title: '' };
     const schema: JSONSchemaType<{