Changes

Add "edit" and "delete" order functionality.

1. Create custom select components (<ItemDescrSelect> and <ItemQntSelect>) for menu item and quantity select input fields.
2. Wrap each custom select component with forwardRef to use it as a controlled and uncontrolled component.
3. Replace select input fields in order-form.js with corresonding custom select components.
4. Create edit and delete functions (onEditOrderHandler and onDeleteOrderHandler) in viewOrder.js to handle corressponding API logic.
5. Move order-related JSX in ordersList.js to its own <Order> component.
6. Add edit functionality into <Order> component by implementing custom select components and useState hook.

Purpose

The edit and delete buttons are non-functional.

Issue #8

Approach

By using semi-flexible select components, we ensure the order drop-down options match across pages while also reducing redundancy.

On Delete button click, invoke onDeleteOrderHandler method.

On Edit button click, change <Order> to allow changes to item description and quantity. User can choose to confirm changes or cancel changes.

Testing Steps

Navigate to /view-orders/ page.

Delete Test

1. Click the Delete button.
2. Verify the deleted order was removed.

Edit and Confirm Test

1. Click the Edit button.
2. Verify item description and quantity fields convert to select input fields.
3. Verify button choices now display Confirm and Cancel.
4. Change the item description and quantity values.
5. Click the Confirm button and verify changes were saved.

Edit and Cancel Test

1. Click the Edit button.
2. Verify item description and quantity fields convert to select input fields.
3. Verify button choices now display Confirm and Cancel.
4. Change the item description and quantity values.
5. Click the Cancel button.
6. Verify item description and quantity remain unchanged.

Learning

Reviewed the useRef and forwardRef features in React's documentation to properly pass a reference to the custom <ItemDescrSelect> and <ItemQntSelect> components.

useRef Documentation

forwardRef

Closes #8