Overview

In a time where we delegate repetitive tasks to AI, writing simple code like this manually every now and then keeps us sharp. This challenge is a plain fetch with pagination and manual loading and error handling — exactly what so many job interviews ask for, and the kind of thing we forget if we don't practice it once in a while.

Requirements

• Fetch users from https://example/users?page={page} and display the response in a table with columns: ID, Name, and Last name. The API returns up to 10 users per page.
• Show TableSkeleton while fetching.
• Display a page info text: Page {page} of {totalPages} ({count} users).
• Pagination buttons:
  • First: goes to page 0. Disabled when on page 0.
  • Previous: goes to the previous page. Disabled when on page 0.
  • Next: goes to the next page. Disabled when on the last page.
  • Last: goes to the last page. Disabled when on the last page.
• All buttons must be disabled when the response has count: 0 (no users) or loading
• Display an error message when the request fails. Use data-testid="error-message" on the error element.

Notes

• The API response shape is

{
  count: number;
  users: {
    id: number;
    name: string;
    lastName: string;
  }
  [];
}

• count is the total number of users, not the page size.
• Pages are 0-based: ?page=0 returns the first 10 users.
• The mock API randomly fails ~20% of requests (1 in 5) and a delay of 500ms to simulate real-world server errors.
• The data-testid attributes on buttons and the page info are used by the tests — keep them.
• Clear the error state when starting a new fetch so it doesn't stick around after a successful retry.

Tests

1. renders the app title
2. shows skeleton rows while loading
3. renders first page of users after loading
4. disables First and Previous on first page, enables Next and Last
5. navigates to next page
6. navigates back with Previous
7. navigates to last page
8. navigates to first page from another page
9. disables Next and Last on the last page
10. cannot navigate before page 0
11. cannot navigate past the last page
12. disables all buttons when there are no users
13. shows last 4 users on the last page
14. shows error message when fetch fails
15. recovers from error on retry