Getting a Record of Customer Orders

Upon clicking a customer record, smoothly transition the user to a dedicated section or page displaying the order records associated with that customer.

Request URL:

https://api.eng-dev-1.trilloapps.com/ds/function/shared/GetCustomerOrders

Payload:

Customer Orders Payload

Preview:

Customer Orders Preview

Order Record Overview

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

  • Order No

  • Title

  • Description

  • Booking Date

  • Delivery Time

  • Status (Pending, Processing, Shipped, Delivered)

Order Record Overview

Back To Customer Record Button

Maintain a clear and easily navigable path back to the customer records screen, allowing users to switch between customer and order records effortlessly.

Back To Customer Record Button

Search Order By Title

Implement search options to help users quickly find specific order records based on their titles.

Search Order By Title

Order Record Code Snippet

const fetchOrders = async (page) => {
   try {
     setLoading(true);
     const response = await fetch(API_URL, {
       method: 'POST',
       headers: headers,
       body: JSON.stringify({
         customerId: paramValue,
         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;
     setOrdersData(data.data.orders);
     setTotalPages(Math.ceil(totalData / itemsPerPage));
   } catch (error) {
     console.error('Error during fetch:', error);
   }
   finally{
     setLoading(false);
   }
 };

Code Description

This function, fetchOrders, is designed to asynchronously fetch a list of orders based on a customer ID 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 customerId, start, and size based on the provided param value, 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 orders data using setOrdersData(data.data.orders).

• 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 final block to ensure that the loading state is set to false, whether the request is successful or encounters an error.