Update a Record

Edit Button Interaction

• Include an "Edit" button within the item details screen, giving users a clear and distinct call-to-action to initiate the editing process.

Edit Button Interaction

Editable Fields

• Clearly indicate which fields are editable. Typically, the Quantity field is editable.

Editable Fields

Save Changes Button

• Include a "Save" button to allow users to confirm their edits.

• Upon clicking "Save" trigger an API(EditLineItem) request to update the item details on the server.

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

Payload:

Save Button Payload

Preview:

Save Button Preview

Update Record Code Snippet

const handleQuantity = async (e) =>{
   e.preventDefault();
   try{
     const response = await fetch(EDIT_API_URL, {
       method: 'POST',
       headers: headers,
       body: JSON.stringify({
         "lineItemId": itemId,
         "quantity": quantity
       })
     });
     const data = await response.json();
     if(data.status === 'success'){
       toast.success('Quantity updated successfully!', {
         position: 'top-right',
         autoClose: 3000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
       });
     }
     setItemData(data.data)
     console.log(data);
     handleClose()
    
   }
   catch(error)
   {
     console.error('Error during login:', error);
   }
 }

Code Description

This function, handleQuantity, is designed to handle the updating of the quantity for a specific item through a POST request to the EDIT_API_URL. Here's a breakdown of its functionality:

Prevent Default Behavior

• Calls e.preventDefault() to prevent the default form submission behavior.

API Request to Edit Quantity

• Makes an asynchronous call to the specified EDIT_API_URL using the Fetch API.

• Uses the POST method and includes custom headers (headers).

• The request body is a JSON string containing the lineItemId and quantity based on the provided itemId and quantity variables.

Response Handling

• Parses the JSON response using await response.json().

• Check if the response status is 'success'.

• If successful, display a success toast notification using the toast.success function.

• Updates the component's state with the data from the response using setItemData(data.data).

• Logs the entire response data to the console using console.log.

• Closes any relevant modal or dialog using the handleClose function.

Error Handling

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

• It's worth noting that the error message indicates "Error during login," which might be a placeholder or a copy-paste oversight.