Solution: Nacho Montoya & Armando Vieira #11
Conversation
armandovieirag
changed the title
danilucaci
left a comment
danilucaci
left a comment
There was a problem hiding this comment.
Muy buen proyecto! Tanto a nivel de funcionalidades como de diseño! Felicidades! 👏🏻👏🏻👏🏻
Seguimos!
| const LOCAL_STORAGE_KEY = "all-todos"; | ||
| const LOCAL_STORAGE_KEY_COMPLETED = "completed-todos"; | ||
| const LOCAL_STORAGE_KEY_ACTIVE = "active-todos"; |
There was a problem hiding this comment.
Muy bien pensado para que sea fácil de gestionar. También podríais tener todo en un objeto para tener solo una key en localStorage pero si os era más sencillo de gestionar así genial.
| handleSubmit={this.handleSubmit} | ||
| handleChange={this.handleChange} | ||
| handleRemove={this.handleRemove} | ||
| // handleChecked={this.handleChecked} |
There was a problem hiding this comment.
En este caso se ha dejado el prop comentado y si probamos de marca un todo como completado desde esta página fallará porque el prop handleChecked será ejecutado como función pero será undefined.
TypeError: handleChecked is not a function
onsetHandlecompleted
src/components/CompletedButton/CompletedButton.js:13
10 | handleAddToActive,
11 | }) {
12 | function onsetHandlecompleted() {
> 13 | handleChecked(id);
14 | handleAddToComplete(id);
15 | handleAddToActive(id);
16 | }
View compiled
| handleAddToActive(id); | ||
| } | ||
| return ( | ||
| <> |
There was a problem hiding this comment.
En este caso el Fragment no es necesario ya que el input no tiene elementos mostrados al mismo nivel.
| .todo__input { | ||
| font-family: 'Maven Pro', | ||
| sans-serif; | ||
| font-weight:800; | ||
| width: 100% !important; | ||
| border: none; | ||
| } | ||
| form{ | ||
| width: 90%; | ||
| } | ||
| .todo__input::placeholder { | ||
| opacity:0.5; | ||
| } | ||
|
|
||
|
|
||
| .todo__checkbox { | ||
| width: 25px; | ||
| height: 25px; | ||
| border-radius: 50%; | ||
| border: 1px solid #ddd; | ||
| -webkit-appearance: none; | ||
| outline: none; | ||
| cursor: pointer; | ||
| margin-top: 5px; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Los saltos de línea deberían ser más uniformes. Lo más común es tener un solo salto de línea entre cada bloque de CSS.
| allTodos, | ||
| handleRemove, | ||
| handleChecked, | ||
| handleEditTodo, | ||
| handleAddToComplete, | ||
| handleAddToActive, |
There was a problem hiding this comment.
Muy buenos nombres de funciones, queda muy bien ordenado y claro 👏🏻👏🏻👏🏻
| {isEmpty && <NoTodos />} | ||
| {!isEmpty && ( |
There was a problem hiding this comment.
Esto se podría refactorizar a un ternary operator:
Además, podemos quitar también el Fragment ya que en este caso no es necesario.
{isEmpty ? (
<NoTodos />
) : (
activeTodos.map((todo) => (
<TodosContainer
key={todo.id}
id={todo.id}
name={todo.name}
isComplete={todo.complete}
handleRemove={handleRemove}
handleChecked={handleChecked}
handleAddToComplete={handleAddToComplete}
handleAddToActive={handleAddToActive}
handleEditTodo={handleEditTodo}
/>
))
)}3 participants
No description provided.