Building a Search, Sort, Filter & Pagination Feature in Next.js with Route Handlers

// pages/index.js
import { useState, useEffect } from 'react'; // Import useState and useEffect
import axios from 'axios'; // Import Axios for data fetching
import SearchBar from '../components/SearchBar'; // Import SearchBar component
import UserTable from '../components/UserTable'; // Import UserTable component
import Pagination from '../components/Pagination'; // Import Pagination component

export default function Home() {
  const [users, setUsers] = useState([]); // State to hold all user data
  const [filteredUsers, setFilteredUsers] = useState([]); // State to hold filtered user data
  const [searchTerm, setSearchTerm] = useState(''); // State to hold search term
  const [currentPage, setCurrentPage] = useState(1); // State to hold current page number
  const [usersPerPage] = useState(10); // State to hold number of users per page

  // Fetch data from API route handler
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/users'); // Fetch users from API route handler
        setUsers(response.data); // Set users state with fetched data
        setFilteredUsers(response.data); // Set filtered users state with fetched data
      } catch (error) {
        console.error('Error fetching data', error); // Log any error that occurs during data fetching
      }
    };
    fetchUsers(); // Call fetchUsers function
  }, []); // Empty dependency array ensures this useEffect runs once on mount

  // Filter users based on search term
  useEffect(() => {
    const results = users.filter(user =>
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) || // Check if name includes search term
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) || // Check if email includes search term
      user.phone.includes(searchTerm) || // Check if phone includes search term
      user.address.toLowerCase().includes(searchTerm.toLowerCase()) // Check if address includes search term
    );
    setFilteredUsers(results); // Set filtered users state with results
  }, [searchTerm, users]); // Dependency array to re-run effect when searchTerm or users change

  // Get current users for pagination
  const indexOfLastUser = currentPage * usersPerPage; // Calculate index of last user on current page
  const indexOfFirstUser = indexOfLastUser - usersPerPage; // Calculate index of first user on current page
  const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser); // Slice filtered users array to get current users

  // Change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber); // Function to set current page

  return (
    <div className="app">
      <h1>User Management</h1>
      <SearchBar setSearchTerm={setSearchTerm} /> {/* Render SearchBar component and pass setSearchTerm function as prop */}
      <UserTable users={currentUsers} /> {/* Render UserTable component and pass currentUsers as prop */}
      <Pagination 
        usersPerPage={usersPerPage} 
        totalUsers={filteredUsers.length} 
        paginate={paginate} 
        currentPage={currentPage} 
      /> {/* Render Pagination component and pass necessary props */}
    </div>
  );
}