Solution: Brahim Benalia & Marc Solà Ramos #8
Conversation
| if (!prevItems || !prevItems.todos.length) { | ||
| api.getProducts().then((data) => { | ||
| this.setState({ todos: data }); | ||
| }); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Muy interesante el check para ver si el localstorage tiene todos o no.
| const { todos } = this.state; | ||
|
|
||
| const newTodo = { | ||
| id: uuidv4(), |
There was a problem hiding this comment.
Muy buen uso de uuid para crear ids 👏🏻
| const { todos } = this.state; | ||
| const arr = todos.map((todo) => { | ||
| return todo.id === id ? { ...todo, complete: !todo.complete } : todo; | ||
| // return obj; |
There was a problem hiding this comment.
Este código comentado se debería eliminar ya que no se usa
| handleEdit(id) { | ||
| const { todos } = this.state; | ||
| const todoToEdit = todos.map((todo) => { | ||
| return todo.id === id ? { ...todo, edit: true } : todo; |
There was a problem hiding this comment.
Muy bueno uso del operador ternario para la comprobación 👏🏻
| letter-spacing: 10px; | ||
| color: white; | ||
| } | ||
| .TODO__Header__DarkMode { |
There was a problem hiding this comment.
Si se sigue BEM como nomenclatura esta clase debería como: TODO__Header--DarkMode
Block__Element--Modifier
| /* eslint-disable jsx-a11y/no-static-element-interactions */ | ||
| /* eslint-disable jsx-a11y/click-events-have-key-events */ |
There was a problem hiding this comment.
Estas reglas ya indican que este componente se debería haber hecho con un input y aplicando los estilos gráficos. Normalmente se aplica al label del checkbox para conseguir unos estilos propios y mantener la posibilidad de que siga siendo un elemento de formulario.
| }} | ||
| hasErrorMessage={touched.name} | ||
| errorMessage={errors.name} | ||
| autoFocus={true} |
There was a problem hiding this comment.
Los siguientes props en React son equivalentes, consiguen el mismo resultado (indicar que el valor del prop es true), por tanto se recomienda usar la versión más corta:
// evitar
autoFocus={true}// Ok
autoFocus| <div className="switchHandle" /> | ||
| </div> | ||
| </button> | ||
| <span aria-label="" role="img"> |
There was a problem hiding this comment.
El atributo aria-label se usa para indicar el nombre que usarán los lectores de pantalla. Un ejemplo válido para este botón sería: aria-label = "change theme"
| todo = {}, | ||
| handleRemove = () => {}, | ||
| handleChangeCheck = () => {}, | ||
| handleEdit = () => {}, | ||
| handleEditSubmit = () => {}, | ||
| handleResetEdit, | ||
| currentTheme, |
There was a problem hiding this comment.
Muy buen uso de los valores por defecto pero habría que añadirlos a todos los props.
No description provided.