Completed small to do list app...#7
Conversation
|
The tests are not testing the app's funcitonality (create, edit, toggle completed, delete), they are only testing that the correct elements are rendered. |
| key={value} | ||
| value={value} | ||
| labelId={labelId} | ||
| itemId={item._id} |
There was a problem hiding this comment.
A lot of props are being sent into this component. You could have sent item={item} and thus could have avoided sending itemId={item._id} itemTask={item.task} itemStatus={item.status}
|
|
||
| return ( | ||
| <UILayout text="Today's To-Do List"> | ||
| <AddNewItemForm |
There was a problem hiding this comment.
It's a little confusing that this component is named AddNewItemForm, but it's also used for editing todos.
| const [editId, setEditId] = useState(""); | ||
|
|
||
| const allTodos = useSelector((state: any) => state.allTodos?.allTodos); | ||
| const sortedItems = [...allTodos].reverse(); |
There was a problem hiding this comment.
Instead of using reverse here, you could add new todos at the top of the array in the reducer
return {
...state,
allTodos: [
{ _id: uniqueId, task: action.payload, status: false },
...state.allTodos,
],
};
| // To get all todo items from the state hook called useSelector from react-redux is used | ||
| // useState hook is used to store data of the selected item which is later on used for its updating | ||
| interface ItemProps { | ||
| status: boolean; |
There was a problem hiding this comment.
status: boolean is understandable, but I think it could be better. For example:
status: 'PENDING' | 'COMPLETED' or completed: boolean
| interface ItemProps { | ||
| status: boolean; | ||
| task: string; | ||
| _id: string; |
|
The edit functionality is a little buggy... The user can delete a todo while it's being edited, then click edit and the text will just disappear from the input box. |
| ], | ||
| }, | ||
| reducers: { | ||
| addNewTodo(state: any, action: PayloadAction<string>) { |
2 participants
This app is made with React Typescript. For the design, I used MUI which helped me to implement my custom design system using their components. For routing, react-router dom is used. Redux and redux toolkit are applied for making the application's state. It allowed me to set up the store and make logic for creating reducers and actions.
In the end, to write a few tests for the functionality of this TO-DO app I chose testing-library react. Also, you can find initiated redux saga in my store as I have experience with that so you can find my way of implementing that functionality.