Searching and Filtering Todos

import React, { useState, useEffect } from 'react';
import { List, CircularProgress, TextField } from '@mui/material';
import { getTodos } from './TodoService';
import TodoItem from './TodoItem';

function Todos() {
  const [todos, setTodos] = useState([]); // State to store the list of todos
  const [loading, setLoading] = useState(true); // State to manage loading status
  const [error, setError] = useState(null); // State to handle errors
  const [search, setSearch] = useState(''); // State to store the search term

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const data = await getTodos(); // Fetch todos from the service
        setTodos(data); // Set the fetched todos to state
      } catch (error) {
        setError(error); // Set error if fetching fails
      } finally {
        setLoading(false); // Set loading to false after fetching
      }
    };

    fetchTodos(); // Call the fetch function
  }, []);

  // Filter todos based on the search term
  const filteredTodos = todos.filter((todo) =>
    todo.title.toLowerCase().includes(search.toLowerCase())
  );

  if (loading) {
    return <CircularProgress />; // Show loading indicator
  }

  if (error) {
    return <div>Error: {error.message}</div>; // Show error message
  }

  return (
    <div>
      <h1>Todo List</h1>
      <TextField
        label="Search"
        value={search}
        onChange={(e) => setSearch(e.target.value)} // Update search term on input change
      />
      <List>
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} /> // Render filtered todos
        ))}
      </List>
    </div>
  );
}

export default Todos;

import React, { useState, useEffect } from 'react';
import { List, CircularProgress, TextField } from '@mui/material';
import TodoItem from './TodoItem';

function Todos() {
  const [todos, setTodos] = useState([]); // State to store the list of todos
  const [loading, setLoading] = useState(true); // State to manage loading status
  const [error, setError] = useState(null); // State to handle errors
  const [search, setSearch] = useState(''); // State to store the search term

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        // Fetch todos with search query parameter
        const response = await fetch(`/api/todos?search=${encodeURIComponent(search)}`);
        if (!response.ok) {
          throw new Error('Network response was not ok'); // Handle network errors
        }
        const data = await response.json(); // Parse JSON response
        setTodos(data); // Set the fetched todos to state
      } catch (error) {
        setError(error); // Set error if fetching fails
      } finally {
        setLoading(false); // Set loading to false after fetching
      }
    };

    fetchTodos(); // Call the fetch function whenever search term changes
  }, [search]);

  if (loading) {
    return <CircularProgress />; // Show loading indicator
  }

  if (error) {
    return <div>Error: {error.message}</div>; // Show error message
  }

  return (
    <div>
      <h1>Todo List</h1>
      <TextField
        label="Search"
        value={search}
        onChange={(e) => setSearch(e.target.value)} // Update search term on input change
      />
      <List>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} /> // Render todos
        ))}
      </List>
    </div>
  );
}

export default Todos;