Almazatun/useForm.md

export const useForm = <C, S = { [key: string]: string }>
(
    callback: (C?: any) => void,
    initState: S,
    validator: (validationData: S) => { errors: Array<string>, valid: boolean }
) => {

    const [values, setValues] = useState<S>(initState)

    const [errors, setErrors] = useState<Array<string>>([])
    const [valid, setValid] = useState<boolean>(false)

    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
        event.persist();
        const {name} = event.target
        let value = event.currentTarget.value.trim() !== '' ? event.currentTarget.value : '';
        setValues({
            ...values,
            [name]: value
        })
    }

    const setEmptyValues = () => {
       let emptyData: S = {...initState}
        setValues(emptyData)
    }

    const onSubmit = (event: FormEvent) => {
        event.preventDefault();
        const {errors, valid} = validator(values)
        setErrors(errors)
        setValid(valid)

        setTimeout(() => {
            setErrors([])
        }, 10_000)
    }

    useEffect(() => {
        if (Object.keys(errors).length === 0 && valid) {
            callback()
            setEmptyValues()
        }

    }, [valid])

    return {
        onChange,
        onSubmit,
        values,
        errors
    }
    
    ```