Getting a List of Customer Records

If the access token is obtained successfully, redirect the user to the Customers screen of the application. When the customer's page is loaded, call the GET_CUSTOMERS API to get a list of all the customers.

Request URL: https://api.eng-dev-1.trilloapps.com/ds/function/shared/GetCustomers

Customer Records

Customer Record Overview

Showing customer records on the screen involves creating a user-friendly and secure experience. Below are key points to consider when implementing a "Customer Records" screen:

• Design the customer record screen to provide a concise and organized overview. Include key information, such as:

  • Customer names

  • Email, Phone

  • Address

  • Status (Active, Inactive)

Search Customer By Name

• Implement search options to help users quickly find specific customer records based on customer names.

Search Customer

Pagination

• If the customer record list is extensive, pagination is implemented to display records in smaller, more manageable chunks.

Pagination

Pagination

Customer Record Code Snippet

const fetchCustomers = async (page) => {
   try {
     setLoading(true)
     const response = await fetch(API_URL, {
       method: 'POST',
       headers: headers,
       body: JSON.stringify({
         start: (page - 1) * itemsPerPage + 1,
         size: itemsPerPage,
       }),
     });
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     const data = await response.json();
     const totalData = data.data.totalData;
     setCustomers(data.data.customers);
     setTotalPages(Math.ceil(totalData / itemsPerPage));
   } catch (error) {
     console.error('Error during fetch:', error);
   }
   finally{
     setLoading(false);
   }
 };

Code Description

This function, fetchCustomers, is designed to asynchronously fetch a list of customers from a specified API endpoint using the Fetch API. Here's a breakdown of its functionality:

Loading State

• Calls setLoading(true) to indicate that data is currently being fetched.

API Request

• Uses the Fetch API to send a POST request to the specified API_URL.

• Includes custom headers in the request, likely defined in the headers variable.

• The request body is a JSON string containing parameters such as start and size based on the provided page and items per page.

Response Handling

• Check if the response is successful using response.ok. If not, throw an error.

• If successful, parses the JSON response using response.json() and assigns it to the data variable.

• Extracts the total number of data points (totalData) from the response and sets the customer's data using setCustomers(data.data.customers).

• Calculates the total number of pages (totalPages) based on the total data and items per page, then sets it using setTotalPages.

Error Handling

• In the catch block:

Logs the error to the console using console.error.

This block handles errors during the API request or JSON parsing.

Finally Block

Calls setLoading(false) in the finally block to ensure that the loading state is set to false, whether the request is successful or encounters an error.