pages.js
import { useState, useEffect } from 'react';
import { fetchItems } from '../../utils/api';
import DashboardLayout from '../../components/DashboardLayout';
const ItemsPage = () => {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const loadItems = async () => {
setIsLoading(true);
setError(null);
try {
const data = await fetchItems(page);
setItems(data.items); // Assuming the API returns an `items` array
} catch (error) {
setError(error.message);
} finally {
setIsLoading(false);
}
};
loadItems();
}, [page]);
const handleNextPage = () => setPage((prevPage) => prevPage + 1);
const handlePrevPage = () => setPage((prevPage) => Math.max(prevPage - 1, 1));
return (
Items List
{isLoading ? (
Loading...
) : error ? (
Error: {error}
) : (
- {items.map((item) => (
- {item.name}
))}
)}
Page {page}
);
};
export default ItemsPage;
helper function for api