adding functionality of Todo list filter and mark all complete

Todo/src/components/FilterButtons.jsx

@@ -1,7 +1,7 @@
 // FilterButtons.jsx
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { filterTodos } from '../redux/actions';
+import { filterTodos , markAllCompleted } from '../redux/actions';
 
 const FilterButtons = () => {
   const dispatch = useDispatch();
@@ -19,12 +19,12 @@ const FilterButtons = () => {
         onChange={(e) => handleFilter(e.target.value)}
       >
         <option value="ALL">Default</option>
-
+        <option value="COMPLETED">Completed</option>
+        <option value="INCOMPLETE">Incomplete</option>
       </select>
-
       <button
         className="text-sm px-2 py-1 bg-purple-500 text-white rounded ml-2"
-        onClick={() => {}}
+        onClick={() => dispatch(markAllCompleted())}
       >
         Mark All Completed
       </button>

Todo/src/components/Todo.jsx

@@ -25,7 +25,8 @@ const Todo = () => {
   };
 
   const handleSearchChange = (value) => {
-
+       setSearchTerm(value);
+       dispatch(updateSearchTerm(value));
   };
 
   return (
@@ -56,7 +57,7 @@ const Todo = () => {
             type="text"
             placeholder="Search Todos"
             value={searchTerm}
-            onChange={(e) => handleSearchChange()}
+            onChange={(e) => handleSearchChange(e.target.value)}
           />
           <button className="ml-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none">
             <BsSearch size={20} />

Todo/src/components/TodoItem.jsx

@@ -1,8 +1,8 @@
 import { useDispatch } from 'react-redux';
 import {
-
+  toggleTodo,
   removeTodo,
-
+  markCompleted,
   markIncomplete,
 } from '../redux/actions';
 import { FaToggleOn, FaToggleOff, FaTrash, FaCheck, FaTimes } from 'react-icons/fa';
@@ -23,7 +23,7 @@ const TodoItem = ({ todo, index }) => {
       <div className='space-x-3 ml-8'>
         <button
           className="mr-2 text-sm bg-blue-500 text-white sm:px-2 px-1 py-1 rounded"
-          onClick={() => {}}
+          onClick={() => dispatch(toggleTodo(index))}
         >
           {todo.completed ? <FaToggleOff /> : <FaToggleOn />}
         </button>
@@ -36,7 +36,7 @@ const TodoItem = ({ todo, index }) => {
         {!todo.completed && (
           <button
             className="text-sm bg-green-500 text-white sm:px-2 px-1 py-1 rounded"
-            onClick={() => {}}
+            onClick={() => dispatch(markCompleted(index))}
           >
             <FaCheck />
           </button>

Todo/src/redux/reducer.js

@@ -35,13 +35,13 @@ const todoReducer = (state = initialState, action) => {
         todos: state.todos.filter((todo, index) => index !== action.payload.id),
         filter: state.filter,
         searchTerm: state.searchTerm,
+
       };
 
     case MARK_COMPLETED:
       return {
         todos: state.todos.map((todo, index) =>
-          index === action.payload.id ? { ...todo, completed: true } : todo
-        ),
+          index === action.payload.id ? { ...todo, completed: true} : todo ),
         filter: state.filter,
         searchTerm: state.searchTerm,
       };