Plan to Eat Mobile — Drag and Drop
The Problem
The mobile app for iOS and Android lacked some functionality available in the web app. While web app users could drag a meal to reschedule it, mobile users had to tap a meal, select “Reschedule” from an action sheet, then use a form to reschedule the meal.
The Solution
I developed a drag and drop behavior for the planner. This allows users to long press a meal, drag it to a new section, and reschedule it. The feature accommodates switching between sections, days, and even positions relative to other meals in the same section.
Challenges
In order to get the color right as the meal is dragged around, the app needed to know what section the user was hovering over. However, it was neither performant nor ideal to sync this new section with the API every time the user’s thumb moved. Therefore, the app tracks the meal section in the component’s state until the meal is dropped.
Synchronizing data between component state, the Redux store, and the API needed to be considered and implemented carefully.
Once the meal is dropped in the appropriate section, the component dispatches the update to the Redux store for continued local persistence, even if the user leaves the page.
Once the Redux store is updated, a custom listener syncs with the API as long as the API is reachable. If the API cannot be reached, the listener waits to synchronize until it successfully hits the API again.
The planner only displays sections containing at least one meal by default. Resizing the scroller was therefore necessary to allow the user to drop meals on a section with nothing planned. In order to scroll to the appropriate position, the frame flickers white for one render to resize before dragging begins and after it ends.
Technologies Used
React state and contexts
dnd-kit
Redux
xhr