App.tsx

import React, {useReducer} from 'react';
import {Button} from './components/common/Button';
import {ErrorLabel} from './components/common/ErrorLabel';
import {InputField} from './components/common/InputField';
import {driverReducer} from './reducers/driverReducer';
import {create, driverEndpoint} from './utils/request';

export const App = () => {
  const [state, dispatch] = useReducer(driverReducer, {
    username: '',
    firstName: '',
    lastName: '',
    phoneNumber: '',
    socialSecurityNumber: '',
    taxPayerNumber: '',
    isError: false,
    isLoading: false,
    errors: null,
  });

  const onSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();

    create(driverEndpoint, state)
      .then(() => {
        dispatch({type: 'SUCCESS', message: 'Operario creado con exito'});
        dispatch({type: 'RESET_FIELDS'});
      })
      .catch(err => {
        console.log(err.response.data.errors);
        dispatch({type: 'SET_ERROR', errors: err.response.data.errors});
      });
  };

  const onClear = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    dispatch({type: 'RESET_FIELDS'});
  };

  return (
    <>
      <form>
        <InputField
          label='Usuario'
          nameId='username'
          type='text'
          value={state.username}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && <ErrorLabel>Usuario Invalido</ErrorLabel>}
        <InputField
          label='Nombre'
          nameId='firstName'
          type='text'
          value={state.firstName}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && <ErrorLabel>Nombre Invalido</ErrorLabel>}
        <InputField
          label='Apellido(s)'
          nameId='lastName'
          type='text'
          value={state.lastName}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && <ErrorLabel>Apellido(s) Invalido(s)</ErrorLabel>}
        <InputField
          label='RFC'
          nameId='taxPayerNumber'
          type='text'
          value={state.taxPayerNumber}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && <ErrorLabel>RFC Invalido</ErrorLabel>}
        <InputField
          label='Numero de seguro social'
          nameId='socialSecurityNumber'
          type='text'
          value={state.socialSecurityNumber}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && (
          <ErrorLabel>Numero de Seguro Social Invalido</ErrorLabel>
        )}
        <InputField
          label='Telefono'
          nameId='phoneNumber'
          type='text'
          value={state.phoneNumber}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({
              type: 'ON_CHANGE',
              payload: {
                name: e.currentTarget.name,
                value: e.currentTarget.value,
              },
            });
          }}
        />
        {state.isError && <ErrorLabel>Telefono Invalido</ErrorLabel>}
        <hr />
        <Button
          onClick={onSubmit}
          label='Agregar Operario'
          disabled={state.isLoading}
          name='addDriver'
          type='submit'
        />
        <Button
          onClick={onClear}
          label='Limpiar Campos'
          name='cleanFields'
          type='submit'
          disabled={state.isLoading}
        />
      </form>
    </>
  );
};