Crear TODOs: React Context dentro de React Portals

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.

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 🫡

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

lo que yo vi … 😄

Para cerrar la ventana modal clicando fuera yo lo he conseguido hacer así:
.
El el archivo Modal.jsx he agregado el useContext y en el evento onClick del div cierro la modal:

function Modal({ children }) {
    const {setOpenModal} = useContext(TodoContext)

    return ReactDOM.createPortal(
        <div className="ModalBackground" onClick={() => setOpenModal(false)}>
            {children}
        </div>,
        document.getElementById("modal")
    )
}

.
Luego en el archivo TodoForm.jsx he añadido un div por encima del formulario y a su evento onClick le he añadido e.stopPropagation() para que al clicar aquí no se cierre la modal

function TodoForm() {
    const {addTodo, setOpenModal} = useContext(TodoContext)
    const [textValue, setTextValue] = useState("")

    function onSubmit(e) {
        e.preventDefault()
        addTodo(textValue)
        setOpenModal(false)
    }

    return (
        <div onClick={(e) => e.stopPropagation()}>
            <form onSubmit={onSubmit}>
                <label>Escribe tu nuevo TODO</label>
                <textarea 
                    placeholder="Cortar cebolla..." 
                    value={textValue} 
                    required
                    onChange={(e) => setTextValue(e.target.value)} 
                />
                <div className="TodoForm-buttonContainer">
                    <button 
                        type="button" 
                        className="TodoForm-button TodoForm-button--cancel"
                        onClick={() => setOpenModal(false)}
                    >
                        Cancelar
                    </button>
                    <button 
                        type="submit" 
                        className="TodoForm-button TodoForm-button--add"
                    >
                        Añadir
                    </button>
                </div>
            </form>
        </div>
    )
}

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

Hola, en el punto en donde esta la app aqui en esta clase, se le puede añadir que descomplete una Todo, con esta linea

newTodos[todoIndex].completed = !newTodos[todoIndex].completed;

aqui

  const completeTodo = (text) => {
    const newTodos = [...todos];
    const todoIndex = newTodos.findIndex(todo => todo.text === text);
    // newTodos[todoIndex].completed = true;
    newTodos[todoIndex].completed = !newTodos[todoIndex].completed;
    saveTodos(newTodos);
  };

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

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

No se si alguien se dió cuenta que hasta este punto Juan no agregó el segundo argumento al React.useEffect, es decir debió agregar [itemName, initialValue], porque de lo contrario está teniendo un ciclo infinito, la app con el tiempo se le va colgar…