From 9d58f9b266ab4646a317d5448cfe5fcb82f5b54f Mon Sep 17 00:00:00 2001 From: Michael Genson <71845777+michael-genson@users.noreply.github.com> Date: Sat, 27 Jul 2024 21:25:58 -0500 Subject: [PATCH] fix: Offline Shopping List Fixes V2 - Electric Boogaloo (#3837) Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com> --- .../Domain/ShoppingList/ShoppingListItem.vue | 6 +- .../use-shopping-list-item-actions.ts | 153 ++++++++++++------ frontend/pages/shopping-lists/_id.vue | 19 +-- 3 files changed, 114 insertions(+), 64 deletions(-) diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue index 30cd3c292da1..e6a19e7f7781 100644 --- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue +++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue @@ -69,7 +69,7 @@ - + @@ -136,10 +136,6 @@ export default defineComponent({ type: Map, default: undefined, }, - isOffline: { - type: Boolean, - default: false, - }, }, setup(props, context) { const { i18n } = useContext(); diff --git a/frontend/composables/use-shopping-list-item-actions.ts b/frontend/composables/use-shopping-list-item-actions.ts index f1ff15339c3a..1f8de843599a 100644 --- a/frontend/composables/use-shopping-list-item-actions.ts +++ b/frontend/composables/use-shopping-list-item-actions.ts @@ -1,7 +1,8 @@ -import { computed, ref } from "@nuxtjs/composition-api"; +import { computed, reactive, watch } from "@nuxtjs/composition-api"; import { useLocalStorage } from "@vueuse/core"; import { useUserApi } from "~/composables/api"; -import { ShoppingListItemOut } from "~/lib/api/types/group"; +import { ShoppingListItemOut, ShoppingListOut } from "~/lib/api/types/group"; +import { RequestResponse } from "~/lib/api/types/non-generated"; const localStorageKey = "shopping-list-queue"; const queueTimeout = 5 * 60 * 1000; // 5 minutes @@ -23,27 +24,73 @@ interface Storage { export function useShoppingListItemActions(shoppingListId: string) { const api = useUserApi(); const storage = useLocalStorage(localStorageKey, {} as Storage, { deep: true }); - const queue = storage.value[shoppingListId] ||= { create: [], update: [], delete: [], lastUpdate: Date.now()}; + const queue = reactive(getQueue()); const queueEmpty = computed(() => !queue.create.length && !queue.update.length && !queue.delete.length); if (queueEmpty.value) { queue.lastUpdate = Date.now(); } - const isOffline = ref(false); + storage.value[shoppingListId] = { ...queue } + watch( + () => queue, + (value) => { + storage.value[shoppingListId] = { ...value } + }, + { + deep: true, + immediate: true, + }, + ) - function removeFromQueue(queue: ShoppingListItemOut[], item: ShoppingListItemOut): boolean { - const index = queue.findIndex(i => i.id === item.id); + function isValidQueueObject(obj: any): obj is ShoppingListQueue { + if (typeof obj !== "object" || obj === null) { + return false; + } + + const hasRequiredProps = "create" in obj && "update" in obj && "delete" in obj && "lastUpdate" in obj; + if (!hasRequiredProps) { + return false; + } + + const arraysValid = Array.isArray(obj.create) && Array.isArray(obj.update) && Array.isArray(obj.delete); + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + const lastUpdateValid = typeof obj.lastUpdate === "number" && !isNaN(new Date(obj.lastUpdate).getTime()); + + return arraysValid && lastUpdateValid; + } + + function createEmptyQueue(): ShoppingListQueue { + const newQueue = { create: [], update: [], delete: [], lastUpdate: Date.now() }; + return newQueue; + } + + function getQueue(): ShoppingListQueue { + try { + const fetchedQueue = storage.value[shoppingListId]; + if (!isValidQueueObject(fetchedQueue)) { + console.log("Invalid queue object in local storage; resetting queue."); + return createEmptyQueue(); + } else { + return fetchedQueue; + } + } catch (error) { + console.log("Error validating queue object in local storage; resetting queue.", error); + return createEmptyQueue(); + } + } + + function removeFromQueue(itemQueue: ShoppingListItemOut[], item: ShoppingListItemOut): boolean { + const index = itemQueue.findIndex(i => i.id === item.id); if (index === -1) { return false; } - queue.splice(index, 1); + itemQueue.splice(index, 1); return true; } async function getList() { const response = await api.shopping.lists.getOne(shoppingListId); - handleResponse(response); return response.data; } @@ -90,44 +137,59 @@ export function useShoppingListItemActions(shoppingListId: string) { if (itemQueueType === "delete" || itemQueueType === "all") { queue.delete = itemIds ? queue.delete.filter(item => !itemIds.includes(item.id)) : []; } + if (queueEmpty.value) { + queue.lastUpdate = Date.now(); + } + } - // Set the storage value explicitly so changes are saved in the browser. - storage.value[shoppingListId] = { ...queue }; + function checkUpdateState(list: ShoppingListOut) { + const cutoffDate = new Date(queue.lastUpdate + queueTimeout).toISOString(); + if (list.updateAt && list.updateAt > cutoffDate) { + // If the queue is too far behind the shopping list to reliably do updates, we clear the queue + console.log("Out of sync with server; clearing queue"); + clearQueueItems("all"); + } } /** - * Handles the response from the backend and sets the isOffline flag if necessary. + * Processes the queue items and returns whether the processing was successful. */ - function handleResponse(response: any) { - // TODO: is there a better way of checking for network errors? - isOffline.value = response.error?.message?.includes("Network Error") || false; - } - async function processQueueItems( - action: (items: ShoppingListItemOut[]) => Promise, + action: (items: ShoppingListItemOut[]) => Promise>, itemQueueType: ItemQueueType, - ) { - const queueItems = getQueueItems(itemQueueType); - if (!queueItems.length) { - return; + ): Promise { + let queueItems: ShoppingListItemOut[]; + try { + queueItems = getQueueItems(itemQueueType); + if (!queueItems.length) { + return true; + } + } catch (error) { + console.log(`Error fetching queue items of type ${itemQueueType}:`, error); + clearQueueItems(itemQueueType); + return false; } - const itemsToProcess = [...queueItems]; - await action(itemsToProcess) - .then((response) => { - handleResponse(response); - if (!isOffline.value) { - clearQueueItems(itemQueueType, itemsToProcess.map(item => item.id)); - } - }); + try { + const itemsToProcess = [...queueItems]; + await action(itemsToProcess) + .then(() => { + if (window.$nuxt.isOnline) { + clearQueueItems(itemQueueType, itemsToProcess.map(item => item.id)); + } + }); + } catch (error) { + console.log(`Error processing queue items of type ${itemQueueType}:`, error); + clearQueueItems(itemQueueType); + return false; + } + + return true; } async function process() { - if( - !queue.create.length && - !queue.update.length && - !queue.delete.length - ) { + if(queueEmpty.value) { + queue.lastUpdate = Date.now(); return; } @@ -135,26 +197,23 @@ export function useShoppingListItemActions(shoppingListId: string) { if (!data) { return; } + checkUpdateState(data); - const cutoffDate = new Date(queue.lastUpdate + queueTimeout).toISOString(); - if (data.updateAt && data.updateAt > cutoffDate) { - // If the queue is too far behind the shopping list to reliably do updates, we clear the queue - clearQueueItems("all"); - } else { - // We send each bulk request one at a time, since the backend may merge items - await processQueueItems((items) => api.shopping.items.deleteMany(items), "delete"); - await processQueueItems((items) => api.shopping.items.updateMany(items), "update"); - await processQueueItems((items) => api.shopping.items.createMany(items), "create"); - } + // We send each bulk request one at a time, since the backend may merge items + // "failures" here refers to an actual error, rather than failing to reach the backend + let failures = 0; + if (!(await processQueueItems((items) => api.shopping.items.deleteMany(items), "delete"))) failures++; + if (!(await processQueueItems((items) => api.shopping.items.updateMany(items), "update"))) failures++; + if (!(await processQueueItems((items) => api.shopping.items.createMany(items), "create"))) failures++; - // If we're online, the queue is fully processed, so we're up to date - if (!isOffline.value) { + // If we're online, or the queue is empty, the queue is fully processed, so we're up to date + // Otherwise, if all three queue processes failed, we've already reset the queue, so we need to reset the date + if (window.$nuxt.isOnline || queueEmpty.value || failures === 3) { queue.lastUpdate = Date.now(); } } return { - isOffline, getList, createItem, updateItem, diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue index c7be3ace5343..e852b05e9f3b 100644 --- a/frontend/pages/shopping-lists/_id.vue +++ b/frontend/pages/shopping-lists/_id.vue @@ -28,7 +28,7 @@ @@ -46,7 +46,6 @@ :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap" - :is-offline="isOffline" @checked="saveListItem" @save="saveListItem" @delete="deleteListItem(item)" @@ -75,7 +74,6 @@ :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap" - :is-offline="isOffline" @checked="saveListItem" @save="saveListItem" @delete="deleteListItem(item)" @@ -132,7 +130,6 @@ :labels="allLabels || []" :units="allUnits || []" :foods="allFoods || []" - :is-offline="isOffline" @delete="createEditorOpen = false" @cancel="createEditorOpen = false" @save="createListItem" @@ -141,7 +138,7 @@
{{ $t('shopping-list.reorder-labels') }} @@ -221,7 +218,6 @@ :labels="allLabels || []" :units="allUnits || []" :foods="allFoods || []" - :is-offline="isOffline" @checked="saveListItem" @save="saveListItem" @delete="deleteListItem(item)" @@ -244,10 +240,10 @@ {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
- +