Crear TODOs: React Context dentro de React Portals

juan te chorearon la taza

Probando la app me conseguí un bug.

Si abres el modal y le das añadir, se agregará un TODO sin texto. Pero tengo la solución.

Existen muchas formas de validación para indicarle al usuario lo que falta. En nuestro caso, por ser un formulario sencillo, basta con agregarle la propiedad required al <textarea /> de TodoForm. quedando así:

<textarea
  placeholder="Cortar cebolla para el almuerzo"
  value={newTodoValue}
  onChange={onChange}
  required
/>

Con eso, el evento submit del formulario no se ejecutará si el textarea está vacío.

Para evitar que en la descripcion se guarden con espacios vacios al inicio y al final podemos utilizar la funcion trim() ademas se puede hacer una validacion para que la descripcion del todo no este vacia

desabilite el boton de anadir y agregue unos estilos si no es una descripcion de todo valida

la única duda que tengo es… ¿qué pasó con la taza? jajajaja

Algo que es ⚠️PELIGROSO⚠️ y que sucede con nuestro Todo-List es que crashea si insertamos dos tareas con exactamente el mismo texto. Esto sucede porque en nuestro listado no usamos Números Id únicos. Nuestro “id” es la key del texto. Pero cuando agregamos algo igual, nuestro código no esta preparado para luchar contra eso.
Por eso Agregué una validación con la misma filosofía del buscador, para que a la hora de ingresar un TODO, valida si este ya existe. Funciona así:

Al agregar exactamente el mismo texto. Se dispara un alerta (lo sé, es el alerta default, más adelante lo agregaré estilos xd) y esto evita que se pueda agregar esa tarea. Muestra el aviso, bloquea el botón de agregar, y limpia el input. Aún tiene unos fallos, pero ya cumple con su función.

Lo hice de la siguiente manera:

Cree un nuevo estado en el TodoContextg, el cual funciona igual que nuestro searchValue. También cree un método validatting, que recibe el text del input de agregar, lo valida con nuestro array existente y si encuentra un resultado similar, dispara un cambio de status, la alerta y agrega un nuevo value al input. y abajo del archivo retorno las funciones.

Después, en el formulario, paso mediante el todo context la función validatting y validstatus para poder usarlas de la siguiente manera:

En el onChange llamo a validatting, y le digo al textarea que cuando se active su funcion onFocus, mande a llamar también a validatting.

Y por último, en appUI:

Estoy llamando también a validatting. Esto para que se active desde el momento de la rederización. Me pasaba que si lo activaba desde que se empezaba a escribir, llevaba un delay de un caracter, y no validaba de forma precisa, por eso lo implementé de esa manera.

Es algo confuso, si gustan ver todo el código acá les dejo mi repo: https://github.com/Alvarenga144/TodoList-Reactjs18 🫡

Lo hice sin usar el Usecontex, pero la termine

me corto un poquito el ritmo que a mitad del proceso, realizara un orden, yo desde un principio tenia otro orden, y clases como el contex y el usecontext no lo hice porque era muy abrumador tantos cambios. y ahora estoy sufriendo porque no se como ejecutar el addTodo cuando se le da al boton crear, agregue una pregunta mostrando como lo tengo por si se apiadan y me quieren ayudar, gracias

opte por usar React Hook Form para ahorrar un poco de tiempo

Tengo que admitir que el proyecto lo hice de una manera un poco distinta, pero siguiendo el curso a su ritmo, en mi caso no utilice un modal para agregar las tareas porque me fue un poco confuso pero de todas maneras pongo el código para quienes quieran agregar de manera directa las tareas

lo que yo vi … 😄

Observando esta manera de pasar nuevos estados al useState(), habia una forma en la que se realizaba la operacion dentro de una funcion -> (previous_value) => { return [...previous_value, valor_a_agregar]}. Hay alguna implicacion, o mejor practica para actualizar este estado de variables?

Jejeje “Juan toca cortar”. jejeje