just an example of an order page

Example of Order Page.

I think there's one thing on this new order page that I believe will give us more confidence when changing local storage. On your order's page you were grouping the menu item groups and removing the id and then adding to a quantity property so you could have the data to be shown on the UI. However, not using the id when dealing with data like this is not ideal, unexpected behaviors might happen. When removing or updating items we want to be able to find that specific item stored in local storage by the id and then perform the operation on it. But I also take responsibility for the bug I saw since you were using a custom hook that I created and that was obviously not syncing data 100% of the time.

With this order page I worked on I am grouping equal menu item groups and instead of keeping an id as a string, I am using an ids property which is an array of each equal menu item group id. This way I can keep the ids and the length will give me the number of grouped menu item groups. This resulting value (objects with ids property) is based on the state returned from useLocalStorage (need to fix or create new one) which is MenuItemGroup[], meaning that the resulting value should always be changed when the state/localStorage changes, therefore we don't need to keep another state (more states, more rerenders), that's why I used useMemo instead. Just a reminder, useMemo caches the result of the previous computation and only runs the computation again if any of its dependencies change, which is good for performance.

Using this approach on our orders page and fixing the useLocalStorage to be used with the order page will allow us to store the data we need in localStorage and keep localStorage synced with states anywhere in our application that makes use of that local storage value, this way the number on the icons on the nav bottom will be reliable.

NOTE: The failed deployment in Vercel is because of code inside the useLocalStorageCollection that I created, which is not the focus of this PR, hence the reason I did not bother to fix it.

brunorplima / divino-dog-menu-app

just an example of an order page #102