Maquetación de Botón Editar en Lista de Tareas con React

Clase 20 de 30 • Curso de React.js: Navegación con React Router

Resumen


<svg
  viewBox = "0 0 24 24"
  fill = "none"
  xmlns = "http://www.w3.org/2000/svg"
>
  <path
    d ="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.
    9993Z"
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.
    130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099
    5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
  </svg>

Juan Pablo Cortés

student•

Dejo el codigo del edit icon, en los recursos aparece incompleto.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns="https://www.w3.org/2000/svg"
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

Rubén Ernesto Aragón Gil

student•

Gracias, master.

Jose Ever Muñoz Muñoz

student•

grande!

Omar Díaz Hernández

student•

Si tienen problemas con los iconos, les recomiendo usar react icons. Es muy sencillo y práctico de usar

Sebastian Carballo

student•

Totalmente. 1. Instalar libería. 2. Importar icono.

Dejo el link de la página donde pueden explorar todos los íconos disponibles:

David Espino

student•

Para quien tenga errores relacionados al edit.svg: en mi caso, lo solucioné eliminando los saltos de línea de la propiedad "d" de la etiqueta <path/> 😉

Josue Tapia Linarez

student•

El .SVG para editar que use de: heroicons

<svg 

   xmlns='https://www.w3.org/2000/svg'
   fill='none' viewBox='0 0 24 24' 
   strokeWidth={1.7} 
   stroke='currentColor' 
   className='w-6 h-6'>

   <path strokeLinecap='round' strokeLinejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' />

</svg>

Harold Zurita Simon

student•

Botón de editar TODOs

. Dentro de la carpeta src/ui/TodoIcon crearemos un archivo edit.svg de la siguiente manera. .

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

. Posteriormente, dentro del archivo index.js en el mismo directorio, vamos a añadir este svg al objeto de iconTypes del componente TodoIcon. .

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypestype}
    </span>
  );
}

export { TodoIcon };

. Creamos un archivo EditIcon.js donde llamamos a TodoIcon pasandole el tipo edit y la función onEdit en onClick como propiedades. .

import React from 'react';
import { TodoIcon } from './';

function EditIcon({ onEdit }) {
  return (
    <TodoIcon
      type="edit"
      onClick={onEdit}
    />
  );
}

export { EditIcon };

. En el archivo TodoIcon.css agregamos la clase Icon-container--edit y Icon-container:hover .Icon-svg--edit. .

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

. Finalmente, solo queda renderizar este botón desde el componente TodoItem de la siguiente manera. .

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon
        completed={props.completed}
        onComplete={props.onComplete}
      />
      <p
        className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}
      >
        {props.text}
      </p>
      <EditIcon
        onEdit={props.onEdit}
      />
      <DeleteIcon
        onDelete={props.onDelete}
      />
    </li>
  );
}

export { TodoItem };

. Por lo que tendremos que añadir la render prop onEdit desde el llamado a TodoItem en el componente HomePage, donde en este caso solo mostrará un mensaje que indica que se editará un TODO. .

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };

milton coronado

student•

parece que falto algo en esta clase, aca les dejo el codigo de mi solucion para la funcionalidad del boton de editar en el componente "TodoIcom".

import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css'

const iconTypes = {
  'check': color => <CheckSVG className='Icon-svg Icon-svg--check' fill={color} />,
  'delete': color => <DeleteSVG className='Icon-svg Icon-svg--delete' fill={color} />,
  'edit':  (color, onEditTwo) => <EditSVG className='Icon-svg icon-svg--edit' fill={color} onClick={onEditTwo}/>,
};

const TodoIcon = ({ type, color = 'gray', joinCrossOutEliminate, onEditTwo }) => {
  return (
    <span
    className={`Icon-container Icon-container-${type}`}
    onClick={joinCrossOutEliminate}
    > 
    {iconTypestype}
    </span>
  )
};


export { TodoIcon };

Max Andy Diaz Neyra

student•

Código de la clase con typescript y react icons

import { FC } from "react"
import { BiCheckCircle, BiEdit } from 'react-icons/bi'
import { TiDelete } from 'react-icons/ti'

import './TodoItem.css'

interface Props {
  text:string,
  completed: boolean,
  onComplete: ()=>void,
  onEdit: ()=>void,
  onDelete: ()=>void
}

const TodoItem:FC<Props> = ({
  text,
  completed,
  onComplete,
  onEdit,
  onDelete
}) => {
  return (
    <li className="TodoItem">
      <BiCheckCircle
        className={`Icon Icon-check ${completed && "Icon-check--active"}`}
        onClick={onComplete}
      />
      <p className={`TodoItem-p ${completed && "TodoItem-p--complete"}`}>{text}</p>
      <BiEdit
        className={`Icon Icon-edit`}
        onClick={onEdit}
      />
      <TiDelete 
        className="Icon Icon-delete"
        onClick={onDelete}
      />
    </li>
  )
}

export { TodoItem }

Felipe Morales Torres

student•

A mi me pasó que cuando quería cambiarle el color al seg que exporté de Figma no me dejaba. Al editar el icono svg en VS me di cuenta que tenía una propiedad fill, por lo que se la quité y con eso ya funcionó :)

Sebastian Carballo

student•

My dear colleagues, here I leave you my english version commit and branch for the class. Keep rocking it 🚀

- My english ver. branch:

Branch name:

feat/add-edit-todo-icon

Commit message:

git commit -m "feat: add edit icon functionality to todo items

- Add EditIcon component for todo items

- Implement edit icon styling in TodoIcon.css

- Add edit SVG icon from react-icons

- Update TodoItem to include edit functionality"

Frank Alberto Broche Gómez

student•

@Profeee porfaaa el Curso de optimización y debugging del render de componentes en React.js, creo que seria muy interesante poder entender como funciona React por debajo, entender cuando una data presiste entre render, cuando algo va a provocar uno o mas rerenders, comprender porque es necesario usar useRef para poder implementar lazy loading con observers de javascript. Realmente me atrae muchisimo la idea de poder comprender todo esto. No se diganme ustedes chicos.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns="https://www.w3.org/2000/svg"
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

<svg 

   xmlns='https://www.w3.org/2000/svg'
   fill='none' viewBox='0 0 24 24' 
   strokeWidth={1.7} 
   stroke='currentColor' 
   className='w-6 h-6'>

   <path strokeLinecap='round' strokeLinejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' />

</svg>

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypestype}
    </span>
  );
}

export { TodoIcon };

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon
        completed={props.completed}
        onComplete={props.onComplete}
      />
      <p
        className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}
      >
        {props.text}
      </p>
      <EditIcon
        onEdit={props.onEdit}
      />
      <DeleteIcon
        onDelete={props.onDelete}
      />
    </li>
  );
}

export { TodoItem };

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };

import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css'

const iconTypes = {
  'check': color => <CheckSVG className='Icon-svg Icon-svg--check' fill={color} />,
  'delete': color => <DeleteSVG className='Icon-svg Icon-svg--delete' fill={color} />,
  'edit':  (color, onEditTwo) => <EditSVG className='Icon-svg icon-svg--edit' fill={color} onClick={onEditTwo}/>,
};

const TodoIcon = ({ type, color = 'gray', joinCrossOutEliminate, onEditTwo }) => {
  return (
    <span
    className={`Icon-container Icon-container-${type}`}
    onClick={joinCrossOutEliminate}
    > 
    {iconTypestype}
    </span>
  )
};


export { TodoIcon };

import { FC } from "react"
import { BiCheckCircle, BiEdit } from 'react-icons/bi'
import { TiDelete } from 'react-icons/ti'

import './TodoItem.css'

interface Props {
  text:string,
  completed: boolean,
  onComplete: ()=>void,
  onEdit: ()=>void,
  onDelete: ()=>void
}

const TodoItem:FC<Props> = ({
  text,
  completed,
  onComplete,
  onEdit,
  onDelete
}) => {
  return (
    <li className="TodoItem">
      <BiCheckCircle
        className={`Icon Icon-check ${completed && "Icon-check--active"}`}
        onClick={onComplete}
      />
      <p className={`TodoItem-p ${completed && "TodoItem-p--complete"}`}>{text}</p>
      <BiEdit
        className={`Icon Icon-edit`}
        onClick={onEdit}
      />
      <TiDelete 
        className="Icon Icon-delete"
        onClick={onDelete}
      />
    </li>
  )
}

export { TodoItem }

Maquetación de Botón Editar en Lista de Tareas con React

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Mejorando la Redirección Post-Login en Aplicaciones Web

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

Migración de Todo Machine a React Router 6

Organización de carpetas y rutas en React con React Router DOM 6

Maquetación de Botón Editar en Lista de Tareas con React

Generación de IDs únicos para gestionar tareas en React

Migración de modales a rutas en React: implementación práctica

Editar ToDos en React con Custom Hook y URL Parameters

Mejora de la Experiencia del Usuario al Editar To Do's en React

Implementación de React Router en Proyectos Legacy

Próximos pasos

Filtrado de Búsquedas en URL con React Router

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

Clonación de Platzi Movies usando React y React Router

Clonación de React Router en Componentes React

Navegación Avanzada con React Router DOM 6