Getting a Record of Order Items

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

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

Payload:

Order Items Payload

Preview:

Order Items Preview

Item Record Overview

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

  • Name

  • Item Description

  • Code

  • Weight

  • Quantity

Back To Order Record Button

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

Back To Order Record Button

Search Order Item By Name

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

Search Order Item By Name

Item Record Code Snippet

useEffect(() => {
       const fetchItemDetails = async () => {
         try {
           if (itemId) {
             // Make an API call
             setLoading(true)
             const response = await fetch(GET_DETAILS_API_URL, {
               method: 'POST',
               headers: headers,
               body: JSON.stringify({ "itemId": itemId }),
             });
             const data = await response.json();


             setItemData(data.data);
             setQuantity(data.data.quantity)
           }
         } catch (error) {
           console.error('Error fetching item details:', error);
         }
         finally{
           setLoading(false)
         }
       };
    
       // Call the fetchItemDetails function only if itemId has changed
       if (itemId !== null) {
         fetchItemDetails();
       }
     }, [itemId]);

Code Description

This function, fetchItemDetails, is an asynchronous function designed to fetch details for a specific item based on its ID (itemId). Here's a breakdown of its functionality:

Check for Valid itemId

• Check if itemId is truthy (not null or undefined) before making the API call. This ensures that the API call is made only if itemId has a valid value.

API Request

• If itemId is valid, set the loading state to true using setLoading(true).

• Makes a POST request to the specified GET_DETAILS_API_URL using the Fetch API.

• Includes the provided headers and a request body containing the itemId in the form of a JSON string.

Response Handling

• Parses the JSON response from the API call using await response.json().

• Updates the component's state using setItemData(data.data) to set the entire item data and setQuantity(data.data.quantity) to set the quantity specifically.

Error Handling

• Catches and logs any errors that may occur during the API call using console.error.

Finally Block

Regardless of success or failure, set the loading state to false using setLoading(false). This ensures that the loading state is updated after the API call.