DSM5tool: Usando custom hooks

La complejidad de algunas partes del código está aumentando excesivamente y eso me ha motivado a empezar, en paralelo con el progreso del proyecto, tareas de refactorización del código para intentar simplifcarlo.

Una de las primeras cosas que he conseguido hacer es reducir la cantidad de hooks que utilizaba a la hora de definir el objeto trastorno.

Inicialmente definía un estado para cada propiedad del objeto. En lugar de eso, ahora, tengo custom hook definido específicamente para ello, de forma que toda manipulación del objeto Trastorno se realiza directamente ahí:

import { useState } from "react";

const useTrastornos = (valor) => {
  const [trastornos, setTrastornos] = useState(valor);

  const changeTrastornos = (valor, parametro) => {
    const newTrastornos = trastornos
    newTrastornos[parametro] = valor
    setTrastornos(newTrastornos);
    
  }

  const updateTrastorno = (trastorno) => {
      setTrastornos(trastorno)
  }
return { trastornos, updateTrastorno, changeTrastornos };
};

export default useTrastornos;

Exporto simultáneamente el objeto Trastorno y las funciones que me sirven para actualizar el objeto al completo y una de sus propiedades en particular.

De esta forma, en el componente TrastornoEdit puedo acceder directamente a las funciones haciendo la llamada al hook correspondiente:

const trastornoHook = useTrastornos(trastornoProp);

const trastornoEdit = async (event) => {
    event.preventDefault();
    const nuevoTrastorno = {
      id: id,
      Trastorno: trastornoHook.trastornos.Trastorno,
      Codigo: trastornoHook.trastornos.Codigo,
      Indice: trastornoHook.trastornos.Indice,
      Categoria: trastornoHook.trastornos.Categoria,
      Tipo: trastornoHook.trastornos.Tipo,
      Descripcion: trastornoHook.trastornos.Descripcion,
      Criterios: trastornoCriterios,
    };
    setIsLoading(true);
    const updatedTrastorno = await trastornoServices.update(nuevoTrastorno);
    trastornoHook.updateTrastorno(updatedTrastorno);
    setTrast(updatedTrastorno);
    setIsLoading(false);
    setEdit(false);
  };

Esto formaría ya parte del progreso de la version 0.2.3, que por cierto, ya tiene nueva iteración, con la 0.2.4 y su gestión de usuarios.

Ya os contaré más de ello en la siguiente entrada.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *