kindly review - Ravi Bhushan

package.json

@@ -11,12 +11,14 @@
  "dependencies": {
  "react": "^18",
  "react-dom": "^18",
- "next": "14.2.6"
+ "next": "14.2.6",
+ "react-toastify": "10.0.5"
  },
  "devDependencies": {
  "typescript": "^5",
  "@types/node": "^20",
  "@types/react": "^18",
- "@types/react-dom": "^18"
+ "@types/react-dom": "^18",
+ "react-toastify": "10.0.5"
  }
 }

src/components/AddTodoForm.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
+import {ToastContainer, Bounce, toast} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 interface AddTodoFormProps {
  addTodo: (title: string, desc: string) => void;
@@ -8,21 +10,35 @@ interface AddTodoFormProps {
  * AddTodoForm: Create two input fields for title, and description string fields
  * As well as a submit button which creates the new To Do via addTodo 
  */
-function AddTodoForm({ addTodo }: AddTodoFormProps) {
+function AddTodoForm({addTodo}: AddTodoFormProps) {
  const [title, setTitle] = useState<string>('');
  const [desc, setDesc] = useState<string>('');
 
  const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
  addTodo(title, desc);
  setTitle('');
  setDesc('');
+ var toasterMesage = "Added TODO with title [" + title + "]";
+ toast(toasterMesage, {
+ position: "top-right",
+ autoClose: 5000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: "light",
+ transition: Bounce,
+ });
  };
 
  return (
  <form onSubmit={handleSubmit}>
  <div>
  <label>Title:</label>
  <input
+ value={title}
  type="text"
  placeholder="Provide a title for the new To Do"
  onChange={(e) => setTitle(e.target.value)}
@@ -39,6 +55,7 @@ function AddTodoForm({ addTodo }: AddTodoFormProps) {
  />
  </div>
  <button type="submit">Add To Do</button>
+ <ToastContainer/>
  </form>
  );
 }

src/components/TodoList.tsx

@@ -17,6 +17,7 @@ function TodoList({ todos, deleteTodo, toggleComplete, toggleUrgent }: TodoListP
  <ul>
  {todos.map((todo) => (
  <TodoItem
+ key={todo.id}
  todo={todo}
  deleteTodo={deleteTodo}
  toggleComplete={toggleComplete}

src/pages/index.tsx

@@ -32,12 +32,11 @@ export default function Home() {
  isUrgent: false,
  };
 
- todos.push(newTodo);
- setTodos(todos);
+ setTodos([...todos, newTodo]);
  };
 
  const deleteTodo = (id: number) => {
- setTodos(todos.filter((todo) => todo.id === id));
+ setTodos(todos.filter((todo) => todo.id !== id));
  };
 
  const toggleProperty = useCallback((id: number, property: keyof Pick<Todo, 'isCompleted' | 'isUrgent'>) => {
@@ -48,7 +47,7 @@ export default function Home() {
  return todo;
  });
  setTodos(updatedTodos);
- }, [setTodos]);
+ }, [todos, setTodos]);
 
  const displayTodoList = (todoList:Todo[]) => {
  return (
@@ -62,13 +61,7 @@ export default function Home() {
  };
 
  const displayTodos = (displayUrgent: boolean) => {
- return displayTodoList(todos.filter((x) => {
- if (displayUrgent) {
- return !x.isCompleted && x.isUrgent === displayUrgent;
- } else {
- return !x.isCompleted && x.isUrgent !== displayUrgent;
- }
- }));
+ return displayTodoList(todos.filter((x) => !x.isCompleted && x.isUrgent === displayUrgent));
  };
 
  const displayComplete = () => {