Piyush's Blog

Day-12 React with Me

Piyush's photo
Piyush
·

3 min read

Implementing Filter Logic and Functional Search Bar in Our Food App

Today, we achieved significant progress in our food app development by implementing the filter logic for all three filters and making the search bar functional. Let's delve into the details of these enhancements:

1. Fetching Restaurant Data

We continue to fetch restaurant data from the API endpoint to populate our restaurant list. This data serves as the basis for our filtering and search functionalities.

2. Applying Filters

We have implemented filters for "Top Rated" and "Delivery time". The applyFilter function filters the restaurant list based on the selected tab and updates the filteredList state accordingly. The "Reset" filter resets the filters to their initial state, showing all restaurants.

The search bar allows users to search for restaurants by name. As the user types in the search bar, the searchText state is updated, and the filteredList is updated to show only restaurants that match the search query.

  const [list, setList] = useState([]);
  const [filteredList, setFilteredList] = useState([]);
  const [tab, setTab] = useState("all");
  const [searchText, setSearchText] = useState(""); // Add searchText state

    useEffect(() => {
    applyFilter(tab); // Apply filter when tab changes
  }, [tab, list]);

  const applyFilter = (tab) => {
    if (tab === "Top Rated") {
      setFilteredList(list.filter((item) => item.info.avgRating > 4.4));
    } else if (tab === "Delivery time") {
      setFilteredList(list.filter((item) => item.info.sla.deliveryTime < 30));
    } else {
      setFilteredList(list);
    }
  };

 <div className="flex gap-2">
          <input
            className="p-1 border border-gray-300 rounded-lg text-sm focus:outline-none"
            value={searchText}
            onChange={(e) => {
              setSearchText(e.target.value);
            }}
            placeholder="Search..."
          />
          <button
            onClick={() => {
              const filteredRestaurants = list.filter((res) =>
                res.info.name.toLowerCase().includes(searchText.toLowerCase())
              );
              setFilteredList(filteredRestaurants);
            }}
            className="bg-yellow-500 hover:bg-black hover:text-yellow-500 text-white font-bold text-sm py-1 px-2 rounded-lg"
          >
            Search
          </button>

    </div>

Overcoming Challenges in Filter Logic and Search Bar Implementation

1. Filtering from the Original List

Initially, we faced an issue where the filter logic was not applying to the original list of restaurants. Instead, it was filtering from the already filtered list, leading to incorrect results. To resolve this, we ensured that the applyFilter function filters from the original list (list) rather than the filtered list (filteredList).

2. Search Bar Not Taking Input

Another issue we encountered was with the search bar not taking input from the user. This was due to the value prop of the input field being set to searchText, but the onChange event was not updating the searchText state correctly. We fixed this by ensuring that the onChange event updates the searchText state with the new input value.

3. Reset Function Not Resetting the List

The reset function, which is triggered when the "Reset" filter is clicked, was not resetting the list of restaurants to its initial state. This was because the setFilteredList function was being called with the list state instead of the original list of restaurants. We corrected this by setting the filteredList state to the original list state and resetting the searchText state to an empty string.

React