No tienes acceso a esta clase

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

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

7 D铆as
20 Hrs
23 Min
48 Seg

Obtener y editar TODOs

23/30
Recursos

Aportes 5

Preguntas 1

Ordenar por:

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

Si pruebas agregar otro elemento. Problabemente, ver谩s la sobreescritura de un anterior elemento.

Habia debugueado con muchos console.log hasta darme cuenta que en la asignaci贸n de nuevo ID llegaba vac铆o. Pens茅 que la variable todos se encontraba en otro scope y habia un error鈥 馃槚馃槚馃槚 estuve horas as铆 sabiendo el porque, pero sin saber como. Para nuestra buena suerte la soluci贸n y explicaci贸n a ese error se encuentran en el siguiente video.

En el proceso de editar un todo me sal铆a un error de compilaci贸n que no identificaba el id, me ayud贸 utilizar lo siguiente en la p谩gina de EditTodo Page:

const {id} = useParams()

Que extrae el id de los par谩metros, pero como string, de tal modo que en el useTodos en el editTodo habr铆a que hacerle un parseInt a ese id para que funcione

Hola a todos, les dejo el c贸digo de la clase en TS por si alguien se aventuro como yo en TS y quiere comparar o tambien agregar:

import { TodoForm } from "../components/TodoForm"
import { useTodos } from "../hooks/useTodos"

const NewTodo = () => {

    const { addTodo } = useTodos().stateUpdaters;

    return (
        <div className="form-container">
            <TodoForm 
                submitEvent={(newTodoText)=>{addTodo(newTodoText)}}
            />
        </div>
    )
}

export { NewTodo }

import { useParams } from "react-router-dom";
import { TodoForm } from "../components/TodoForm"
import { useTodos } from "../hooks/useTodos";

const EditTodo = () => {

    const { id } = useParams();
    const { editTodo } = useTodos().stateUpdaters;   

    return (
        <div className="form-container">
            <TodoForm 
                submitEvent={(newTodoText)=>{editTodo((id as string), newTodoText)}}
            />
        </div>
    )
}

export { EditTodo }

import { Dispatch, SetStateAction, useState } from "react";
import { useLocalStorege } from "./useLocalStorage";

export interface ITodo {
  text:string,
  completed:boolean,
  id: string
}

interface State {
  searchedTodos: ITodo[]
  completedTodos: number,
  totalTodos: number,
  searchValue: string,
  loading: boolean,
  error: boolean,
  openModal: boolean,
}

interface StateUpdaters {
  setSearchValue: Dispatch<SetStateAction<string>>
  addTodo: (v:string)=>void
  completeTodo: (v:string)=>void,
  editTodo: (id:string, v:string)=>void
  deleteTodo: (v:string)=>void,
  setOpenModal: Dispatch<SetStateAction<boolean>>
  sincronizeTodos: ()=>void
}

const useTodos = (): { state: State, stateUpdaters: StateUpdaters } => {
  
  const {
    item: todos,
    saveItem: saveTodos,
    loading,
    error,
    sincronizeItem:  sincronizeTodos,
  } = useLocalStorege<ITodo[]>('TODOS_V2', []);

  const completedTodos:number = todos.filter(todo=>todo.completed).length;
  const totalTodos:number = todos.length;
  const [searchValue, setSearchValue] = useState<string>('');
  const [openModal, setOpenModal] = useState(false);

  const searchedTodos = todos.filter(todo=> todo.text.toLowerCase().includes(searchValue.toLowerCase()));

  const addTodo = (text:string) => {
    const id = crypto.randomUUID();
    const newTodos = [...todos]
    newTodos.push({
      text,
      completed: false,
      id
    })
    saveTodos(newTodos)
  }

  const editTodo = (id: string, text:string) => {
    const newTodos = todos.map(todo=>{
      if(todo.id === id) return {
        ...todo,
        text
      };
      return todo;
    })
    saveTodos(newTodos)
  }
  
  const completeTodo = (id: string) =>{
    const newTodos = todos.map(todo=>{
      if(todo.id === id) todo.completed = !todo.completed;
      return todo;
    })
    saveTodos(newTodos);
  }

  const deleteTodo = (id: string) => {
    const newTodos = todos.filter(todo=>todo.id !== id);
    saveTodos(newTodos);
  }

  const state = {
    searchedTodos,
    completedTodos,
    totalTodos,
    searchValue,
    loading,
    error,
    openModal,
  }

  const stateUpdaters = {
    addTodo,
    setSearchValue,
    completeTodo,
    editTodo,
    deleteTodo,
    setOpenModal,
    sincronizeTodos,
  }

  return {
    state,
    stateUpdaters,
  }
}

export { useTodos }
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 }
Reto futuro solucionado con unas mejoras, cuando el usuario borre por completo el texto vuelve y muestra su texto anterior, una vez lo guarde el nuevo texto este pasa a ser el texto que tiene el usuario y si borra todo aparecer谩 este, PD intenten publicar un gift pero parece que no se puede y si no seria mas entendible mi explicacion![]() ![](https://www.canva.com/design/DAGC6Lljlwk/TjcDCwi7fpVStjffRBjm4g/edit?utm_content=DAGC6Lljlwk\&utm_campaign=designshare\&utm_medium=link2\&utm_source=sharebutton)![]()![]()![](https://static.platzi.com/media/user_upload/image-f64b70c5-28bb-4baf-a7d4-ff5f115d7032.jpg)![](https://static.platzi.com/media/user_upload/image-60a41a02-56e9-4771-9759-fa5ad489dd07.jpg) ![](https://static.platzi.com/media/user_upload/image-e03d4400-1660-4067-ab27-5b8b18b27490.jpg) ![](https://static.platzi.com/media/user_upload/image-85a544e0-1244-4bc8-97e5-8c1a866e18b5.jpg) ![](https://static.platzi.com/media/user_upload/image-59e8e2ba-5dcb-4a41-b9ef-f0d21947965b.jpg) ![](https://static.platzi.com/media/user_upload/image-68811026-6c55-42bf-ae2f-422bbda1b237.jpg)![](https://static.platzi.com/media/user_upload/image-388d0c6b-315a-4698-987a-4f156b5c7538.jpg)

Esa parte, la de rellenar el textarea con el texto previo de todo es la que no he terminado. El resto lo pude hacer antes de ver la clase.