react-clone-trello

1
import { ChangeEvent, FormEvent, useEffect, useState } from "react";
2
import { useAppDispatch } from "../services/store/hooks";
3
import { useNavigate } from "react-router";
4
import { ROUTE } from "../utils/constants";
5

6
interface IFormValues {
7
  email?: string;
8
  name?: string;
9
  password?: string;
10
}
11

12
export const useForm = <T extends IFormValues>(input: T) => {
13
  const [formState, setFormState] = useState(input);
14
  const [isFormValid, setIsFormValid] = useState(true);
15
  const dispatch = useAppDispatch();
16
  const navigate = useNavigate();
17

18
  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
19
    setFormState({
20
      ...formState,
21
      [e.target.name]: e.target.value,
22
    });
23
  };
24

25
  useEffect(() => {
26
    const isValid = Object.values(!formState).every((value) => !!value);
27
    setIsFormValid(isValid);
28
  }, [formState]);
29

30
  const onSubmit = (e: FormEvent<HTMLFormElement>, asyncThunk: any) => {
31
    e.preventDefault();
32
    dispatch(asyncThunk(formState))
33
      .then(() => navigate(`${ROUTE.home}`, { replace: true }))
34
      .catch((error: unknown) => console.error(error));
35
    setFormState(input);
36
  };
37

38
  return { formState, setFormState, onChange, onSubmit, isFormValid };
39
};
40