Conversation
…es the list of tasks
AntoniaGranit
left a comment
AntoniaGranit
left a comment
There was a problem hiding this comment.
Hi Annika! I loved your design this week, it also scales super well. I like the fact that you've implemented a deadline date-picker feature. Your code is smooth to read and the comments make it easy to understand what's happening where. I know you had trouble with the location of the TaskListStyles-styled component for some reason but I don't think it's a huge deal (even though I totally understand wanting everything in the right folder). The checkmark animation is particularly impressive, and I like that you managed to put the styling for it in its own component. Great job!
| // this is an object that I call newTask that is sent into the items array (that contains all the tasks). | ||
|
|
||
| dispatch(tasks.actions.addTask(newTask)); | ||
| // dispatching the addPokemon with the newPokemon as the argument |
There was a problem hiding this comment.
This comment is still from when we had a pokémon list! Haha
| if (items.length === completedTasks.length) { | ||
| return ` ${completedTasks.length} / ${items.length}` | ||
| } else { | ||
| return `${completedTasks.length} / ${items.length} done` |
There was a problem hiding this comment.
I like this little detail that adds the word "done" if you haven't checked all your tasks yet.
| // clearTask function calls the clearTasks-reducerfunction in the store. | ||
| return ( | ||
| <HeaderWrapper> | ||
| <HeaderTitle>Stuff to do</HeaderTitle> |
| const taskList = useSelector((store) => store.tasks.items) | ||
| const dispatch = useDispatch() | ||
| const onTaskToggle = (taskId) => { | ||
| dispatch(tasks.actions.toggleTask({ taskId })); |
There was a problem hiding this comment.
I'm not a hundred percent sure but I don't think you have to do object destructuring here, I think "toggleTask(taskId)" would be enough.
| return ( | ||
| <TaskListWrapper> | ||
| <ul> | ||
| {taskList.map((singleTask) => { |
There was a problem hiding this comment.
One thing I noticed is that when you have a list of several tasks and you want to add a new one with a deadline, the calendar shows up underneath the list of tasks. Perhaps something that can be fixed with z-index?
| @@ -0,0 +1,108 @@ | |||
| /* eslint-disable jsx-a11y/label-has-associated-control */ | |||
There was a problem hiding this comment.
The checkbox animation is fantastic!!
| @@ -0,0 +1,20 @@ | |||
| import styled from 'styled-components'; | |||
There was a problem hiding this comment.
I looove this background! Very calm and a bit Twin Peaks
There was a problem hiding this comment.
I didn't realize this is how you created the background image, super cool idea!!
2 participants
No description provided.