No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Cambiando modales por navegaci贸n

22/30
Recursos

Aportes 9

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

umm, mi lado radical elimin贸 todo lo que ten铆a delineado amarillo, pero mi lado prudente hizo commit antes de eso.

隆Hola, comunidad! 馃憢

馃憖 Yo cree un div que encierre o agrupe el formulario para poder centrarlo, ya que si lo hacemos de la forma normal con el margin auto, en responsive se rompe un poco la ui

const NewPage = () => {
  return (
    <div className='new-todo-container'>
      <TodoForm
        title="Write your new TODO"
        submitText="Add"
        submitEvent={() => console.log('llamar a add todo')}
      />
    </div>
  )
}

Y el css

.new-todo-container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Espero les sirva.

Saludos.

Una alternativa a la funcionalidad creada en la clase para los textos dinamicos, es usar el hook de React Router DOM 鈥榰seLocation鈥 que devuelve la ruta actualmente usada y con esto hacer la validaci贸n necesaria.

Creo que as铆, nos evitamos el tener que mandar props adicionales.

const location = useLocation();
<label>{(location.pathname === '/new') ? 'Escribe tu TODO' : 'Edita tu TODO'}</label>

Yo el bot贸n de CreateTodo lo cambiar铆a por un componente Link.
Esto dice la documentaci贸n 馃憞:

Adem谩s, un componente Link es una etiqueta <a href=""> por detr谩s, lo cual es necesario para tener un buen SEO.
.
Es el equivalente a usar un <button> en vez de un <a> para cambiar de URLs en HTML puro.

Estaba pensando otra manera que se podr铆a hacer es que al agregar tareas, en lugar de navegar a una p谩gina de Edit o New Todo, se a帽ada un nuevo input al final de los todos y deshabilitar su uso modificaci贸n hasta que se haga click en Edit.

Me pas贸 que justo cuando hice los cambios con el profe no ten铆a TODOS para confirmar si lo que hice estaba bien, as铆 que tuve que hacer por adelantado el a帽adir TODOS (Aunque no s茅 si es la mejor forma, me funcion贸)

import React from "react";
import { TodoForm } from "../../ui/TodoForm";
import { useTodos } from "../useTodos";


function NewTodoPage() {
    const { stateUpdaters } = useTodos();

    const { addTodo } = stateUpdaters;
    return(
       <TodoForm 
       label="Escribe tu nuevo TO DO"
       submit="A帽adir"
       submitEvent={addTodo}
       />
    )
}


export { NewTodoPage }

Hola papus, dejo el codigo de la clase en TS:

import { FC, FormEvent, useState } from "react"
import { useLocation, useNavigate } from "react-router-dom";
import './TodoForm.css'

interface Props {
    submitEvent: (v:string)=>void,
}

const TodoForm:FC<Props> = ({ submitEvent }) =>{

    const navigate = useNavigate();
    const location = useLocation();
    const [newTodoText, setNewTodoText] = useState('');

    const onCancel = ()=>{
        navigate('/');
    }

    const onSubmit = (e:FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        submitEvent(newTodoText);
        navigate('/');
    }

    return(
        <form onSubmit={onSubmit}>
            <label>{location.pathname === '/new'? 'Escribe tu nueva tarea pendiente':'Edita tu tarea pendiente'}</label>
            <textarea 
                placeholder="Hola, que haremos hoy?"
                value={newTodoText}
                onChange={(event)=>{
                    setNewTodoText(event.target.value)
                }}
            />
            <div className="TodoForm-buttonContainer">
                <button
                    type="button"
                    onClick={onCancel}
                    className="TodoForm-button TodoForm-button--cancel"
                >
                    Cancelar
                </button>
                <button
                    type="submit"
                    className="TodoForm-button TodoForm-button--add"
                >
                    {location.pathname === '/new'? 'A帽adir':'Editar'}
                </button>
            </div>
        </form>
    )
}

export { TodoForm }

ser铆a bueno haber dejado el modal como para no perder la funcionalidad de los portales y hacer el edit en una nueva ventana

Tengo una duda existencial con los portales 驴Vale la pena tener portales cuando se usan microfrontends? Porque entiendo el porque se usan ac谩 y el porque se remueven pero me causa curiosidad como entre un router + portales bajo esa arquitectura o 驴En ese caso no se usan?