checkbox refactoring - Githubissues

alenamedved commented 2 years ago

Had to implement some logic changes:

Added a new state to manage ListLayout items inside component, state initiated with 'items', listLayout items are used to render items on page
Added a new state to manage checked items, checked items added in array so it can be looped over, when user clicks a submit button and send updated data to db for each item in array
Inside useEffect loop over 'items' and update ckecked value for each item dependently on it purchasedDate (use within24hourd function), update layoutItem state with this new array
Updated 'handleCheckboxChange' function: update checked value for checked item to render it correctly, and update a layoutItems state. Added a functionality to unckeck item, in this case update it checked value and layoutItems state and remove it from 'checkedItems' array
Added 'submit' button which updates and sends data to database for items in 'checkedItems' array, checkedItems value reseted to empty array
Success message added after 'submit' button is clicked
Had to add login inside useEffect: send data to db only it was changed, and check and send data if item changed status from active to inactive As result: When page is loaded items that had been bought within 24 hours gap are checked and checkbox is disabled. User can check as many items as needed, able to uncheck items if needed, and then click a submit button once to mark checked items as purchased.

Related Issue

Closes #33

Acceptance Criteria

-user should be able to uncheck item if it was checked by mistake. -checking item enable a submit button by clicking which data is being send to database -checked item disabled and persist checked for 24 hours so user is not tempted to try to uncheck it