Getting a Record of Item Details

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

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

Payload:

Item Details Payload

Preview:

Item Details Preview

Item Details Overview

• Present a summarized view of item records on the screen, which includes:

  • Item Name

  • Item Description

  • Item Code

  • Item Weight

  • Item Quantity

Back To Item Record Button

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

Back To Item Record Button

Item Details 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.