Monday, March 24 2025 –Last week, I focused on resolving several UI bugs based on the latest findings. While addressing these issues, I also identified and implemented necessary improvements.
The first task was to create a new dropdown component that displays a list of all stores. This dropdown was required for features that had recently been developed, making it essential to have a reusable component for consistency.
Next, I worked on implementing an auto-refresh mechanism that updates the page every five seconds. Using useEffect, the function runs at a set interval (which I set to 10 seconds) but only when the page is visible. It detects when the tab is active, triggering the function immediately and then setting up a timer to refresh the data. If the tab is hidden, the timer stops to conserve resources.
Initially, I applied this feature to all pages that retrieved lists of data. However, Mr. Peter later advised that it should only be implemented on specific lists, prompting me to refactor the logic into a reusable component. I placed this component under the hooks folder and tested it on the selected lists. The component automatically runs when the tab is active, executing a callback function passed from the parent page. The callback was defined as void, simply acting as a trigger.
By the end of the week, the component successfully refreshed the page as intended. However, there was one issue, filters and pagination reset to their initial state upon refresh. This occurred because the component’s useEffect reloaded the content, causing state loss. Resolving this behavior will be the next step in refining the implementation.