Closes #29. The goal here is to implement cursor-based database pagination on the back end, and scroll-based loading to trigger more requests to load to the page.
What I changed
Modified fetchDataFromTable() to take a limit and cursor parameter, and query based on id (the table's primary key).
Modified the API endpoint to set a default limit of 6, and pass nextCursor in the response, which the client can use to request the next set of records by passing it as the cursor parameter in the subsequent request.
Data is now sorted based on id in descending, hence the sortByDate() function was removed as it is no longer necessary to figure out sort order based on timestamp.
Added an async method loadMore() to index.vue to request more offline maps data based on nextCursor index, and push these to offlineMaps which is passed to MapDashboard as a prop.
For the MapDashboard component, adopted a scroll-based loading approach (similar to GCV Gallery) to emit a request to upstream loadMore() method.
Goal
Closes #29. The goal here is to implement cursor-based database pagination on the back end, and scroll-based loading to trigger more requests to load to the page.
What I changed
fetchDataFromTable()to take a limit and cursor parameter, and query based onid(the table's primary key).nextCursorin the response, which the client can use to request the next set of records by passing it as the cursor parameter in the subsequent request.idin descending, hence thesortByDate()function was removed as it is no longer necessary to figure out sort order based on timestamp.loadMore()to index.vue to request more offline maps data based onnextCursorindex, and push these toofflineMapswhich is passed to MapDashboard as a prop.loadMore()method.