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


2000/svg"
>
  18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.
    9993Z"
  />
  23.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"
  />

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:

https://react-icons.github.io/react-icons/search/#q=edit

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}
    >
      {iconTypes[type](color)}
    </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}
    > 
    {iconTypes[type](color, onEditTwo)}
    </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: https://github.com/SebaMat3/react-todo/tree/feat/add-edit-todo-icon

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.