Pagination

Problem Statement

Show images from the Picsum API five at a time, with page buttons under the grid to move between pages.

Functional Requirements

1. Fetch per page: Load https://picsum.photos/v2/list?page=<n>&limit=5 whenever the page number changes, starting at page 1.
2. Page numbers: Show up to three pages before the current page and the current page plus the next three.
3. Active page: Highlight the current page button with the active class.
4. Previous and next: The < button shows only when the page is above 1. The > button is always shown.
5. Jump to page: Clicking a number loads that page.

Technical Constraints

• Keep pageNo in the parent Post component and pass setPageNo down to Pagination.
• Ignore a response that arrives after the page has already changed, so a slow request cannot overwrite newer data.

Code Flow Overview

1. Initial Load

   • Post component mounts
   • Initial state setup with empty data array and pageNo = 1
   • useEffect triggers initial API call
   • Images render and pagination controls display

2. Page Navigation

   • User clicks pagination button
   • pageNo state updates
   • useEffect triggers with new pageNo
   • New images fetch and display
   • Pagination numbers update based on new pageNo

Function Explanations

Post Component Functions:

1. fetchData
   • Async function that calls Picsum API
   • Takes current page number as parameter
   • Updates data state with new images
   • Handles API response with axios

Pagination Component Functions:

1. prevThreeNo Generation

   • Creates array of three previous page numbers
   • Filters out negative numbers
   • Example: If current page is 5, generates [2,3,4]

2. nextFourNo Generation

   • Creates array of next four page numbers
   • Example: If current page is 5, generates [5,6,7,8]

3. handleNext

   • Increments page number by 1
   • Triggers new data fetch

4. handlePrev

   • Decrements page number by 1
   • Only active when page > 1
   • Triggers new data fetch

Key Concepts Explained

Array.from()

1. Basic Syntax

   Array.from(arrayLike, mapFunction)
   

   Copy

2. Common Use Cases

   • Converting array-like objects to arrays
   • Creating numeric sequences
   • Generating arrays with computed values

3. Examples:

   // Generate 1 to 5
   Array.from({length: 5}, (_, i) => i + 1)
   // Result: [1,2,3,4,5]
   
   // Generate multiples of 3
   Array.from({length: 4}, (_, i) => i * 3)
   // Result: [0,3,6,9]
   
   // Generate custom sequence
   Array.from({length: 3}, (_, i) => `Item ${i+1}`)
   // Result: ['Item 1', 'Item 2', 'Item 3']
   

   Copy

State Management Concepts:

1. useState Hook

   • Manages component local state
   • Triggers re-renders on updates
   • Maintains state between renders

2. useEffect Hook

   • Handles side effects (API calls)
   • Dependency array controls when effect runs
   • Cleans up previous effects

Array Methods Used:

1. map()

   • Transforms array elements
   • Creates new array
   • Used for rendering lists

2. filter()

   • Removes unwanted elements
   • Creates new filtered array
   • Used in pagination logic

3. reverse()

   • Reverses array order
   • Used for page number display

Props Pattern:

1. State Lifting

   • pageNo managed in parent
   • Passed down via props
   • Child components update via callbacks

2. Controlled Components

   • Page navigation controlled by parent
   • State changes trigger re-renders
   • Maintains single source of truth

API Integration:

1. Axios Usage

   • Promise-based HTTP client
   • Handles API requests
   • Manages response data

2. Dynamic URL Construction

   • URL changes with page number
   • Limit parameter controls items per page
   • Response handling with async/await