React Pagination: Front End Machine Coding Interview Question

import React from "react";

const Pagination = React.memo(({ totalPages, currentPage, onPageChange }) => {
  // Step 1: Create an array of page numbers based on the total number of pages.
  const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);

  return (
    <div className="pagination">
      {/* Step 2: Previous Button */}
      <button
        disabled={currentPage === 1} // Disable the button if the current page is the first page.
        onClick={() => onPageChange(currentPage - 1)} // Go to the previous page.
      >
        Previous
      </button>

      {/* Step 3: Page Numbers */}
      {pageNumbers.map((num) => (
        <button
          key={num} // Unique key for each button.
          className={currentPage === num ? "active" : ""} // Highlight the active page.
          onClick={() => onPageChange(num)} // Change to the selected page.
        >
          {num}
        </button>
      ))}

      {/* Step 4: Next Button */}
      <button
        disabled={currentPage === totalPages} // Disable the button if the current page is the last page.
        onClick={() => onPageChange(currentPage + 1)} // Go to the next page.
      >
        Next
      </button>
    </div>
  );
});

export default Pagination;

import React, { useEffect, useState, useCallback } from "react";
import axios from "axios";
import Pagination from "./Pagination";
import "./styles.css"; // Importing the styles

const App = () => {
  // Step 1: Initialize state variables.
  const [data, setData] = useState([]); // Holds the data fetched from the API.
  const [currentPage, setCurrentPage] = useState(1); // Tracks the current page number.
  const [totalPages, setTotalPages] = useState(0); // Stores the total number of pages.
  const [loading, setLoading] = useState(false); // Indicates whether data is being fetched.
  const itemsPerPage = 10; // Number of items to display per page.

  // Step 2: Define a debounce function to delay rapid updates.
  const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer); // Clear the previous timer.
      timer = setTimeout(() => func(...args), delay); // Set a new timer.
    };
  };

  // Step 3: Debounced handler for page changes.
  const handlePageChange = useCallback(
    debounce((page) => {
      setCurrentPage(page); // Update the current page.
    }, 300),
    []
  );

  // Step 4: Fetch data whenever the current page changes.
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // Set loading state to true.
      try {
        // Fetch data from the API with pagination parameters.
        const res = await axios.get(
          `https://dummyjson.com/products?limit=${itemsPerPage}&skip=${(currentPage - 1) * itemsPerPage}`
        );
        setData(res.data.products); // Update the data state.
        setTotalPages(Math.ceil(res.data.total / itemsPerPage)); // Calculate and update total pages.
      } catch (error) {
        console.error("Error fetching data:", error); // Handle errors.
      } finally {
        setLoading(false); // Reset loading state.
      }
    };

    fetchData();
  }, [currentPage]); // Re-run the effect whenever `currentPage` changes.

  return (
    <div className="App">
      <h1>React Pagination Example</h1>

      {/* Step 5: Display loading message or data. */}
      {loading ? (
        <p>Loading...</p> // Show loading message.
      ) : (
        <ul className="product-list">
          {/* Render the list of products. */}
          {data.map((item) => (
            <li key={item.id} className="product-item">
              <img src={item.thumbnail} alt={item.title} className="product-image" />
              <div className="product-details">
                <h3 className="product-title">{item.title}</h3>
                <p className="product-price">${item.price}</p>
              </div>
            </li>
          ))}
        </ul>
      )}

      {/* Step 6: Render the Pagination component. */}
      <Pagination
        totalPages={totalPages} // Pass total pages to the component.
        currentPage={currentPage} // Pass the current page to the component.
        onPageChange={handlePageChange} // Pass the page change handler.
      />
    </div>
  );
};

export default App;

`https://dummyjson.com/products?limit=${itemsPerPage}&skip=${(currentPage - 1) * itemsPerPage}`

<ul className="product-list">
  {data.map((item) => (
    <li key={item.id} className="product-item">
      <img src={item.thumbnail} alt={item.title} className="product-image" />
      <div className="product-details">
        <h3 className="product-title">{item.title}</h3>
        <p className="product-price">${item.price}</p>
      </div>
    </li>
  ))}
</ul>

/* General Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

/* Pagination Styles */
.pagination {
  display: flex;
  flex-wrap: wrap; /* Ensures the buttons wrap on smaller screens */
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.pagination button:hover {
  background-color: #f0f0f0;
}

.pagination button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Responsive Styles for Pagination */
@media (max-width: 768px) {
  .pagination button {
    flex: 1 1 100%;
    max-width: 150px;
    text-align: center;
  }

  .pagination {
    gap: 4px;
  }
}

/* Product List Styles */
.product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 16px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 12px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-price {
  font-size: 14px;
  color: #555;
}

/* Responsive Design */
@media (max-width: 600px) {
  .product-item {
    padding: 12px;
  }

  .product-title {
    font-size: 14px;
  }

  .product-price {
    font-size: 12px;
  }
}