fix: shopping list frontend throttling on bulk actions (#1853)

* pause refresh when updating list

* throttle recipe +/- to one concurrent request
This commit is contained in:
Michael Genson 2022-11-30 23:29:27 -06:00 committed by GitHub
parent 1c87a87627
commit b7ab16a7df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -215,6 +215,7 @@ export default defineComponent({
}, },
setup() { setup() {
const { idle } = useIdle(5 * 60 * 1000) // 5 minutes const { idle } = useIdle(5 * 60 * 1000) // 5 minutes
const loading = ref(true);
const userApi = useUserApi(); const userApi = useUserApi();
const edit = ref(false); const edit = ref(false);
@ -241,8 +242,8 @@ export default defineComponent({
// constantly polls for changes // constantly polls for changes
async function pollForChanges() { async function pollForChanges() {
// pause polling if the user isn't active // pause polling if the user isn't active or we're busy
if (idle.value) { if (idle.value || loading.value) {
return; return;
} }
@ -269,6 +270,7 @@ export default defineComponent({
} }
// start polling // start polling
loading.value = false;
const pollFrequency = 5000; const pollFrequency = 5000;
let attempts = 0; let attempts = 0;
@ -338,9 +340,11 @@ export default defineComponent({
return; return;
} }
loading.value = true;
deleteListItems(checked); deleteListItems(checked);
refresh(); refresh();
loading.value = false;
} }
// ===================================== // =====================================
@ -454,27 +458,33 @@ export default defineComponent({
}); });
async function addRecipeReferenceToList(recipeId: string) { async function addRecipeReferenceToList(recipeId: string) {
if (!shoppingList.value) { if (!shoppingList.value || loading.value) {
return; return;
} }
loading.value = true;
const { data } = await userApi.shopping.lists.addRecipe(shoppingList.value.id, recipeId); const { data } = await userApi.shopping.lists.addRecipe(shoppingList.value.id, recipeId);
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
async function removeRecipeReferenceToList(recipeId: string) { async function removeRecipeReferenceToList(recipeId: string) {
if (!shoppingList.value) { if (!shoppingList.value || loading.value) {
return; return;
} }
loading.value = true;
const { data } = await userApi.shopping.lists.removeRecipe(shoppingList.value.id, recipeId); const { data } = await userApi.shopping.lists.removeRecipe(shoppingList.value.id, recipeId);
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
// ===================================== // =====================================
@ -490,6 +500,7 @@ export default defineComponent({
return; return;
} }
loading.value = true;
if (item.checked && shoppingList.value.listItems) { if (item.checked && shoppingList.value.listItems) {
const lst = shoppingList.value.listItems.filter((itm) => itm.id !== item.id); const lst = shoppingList.value.listItems.filter((itm) => itm.id !== item.id);
lst.push(item); lst.push(item);
@ -501,6 +512,8 @@ export default defineComponent({
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
async function deleteListItem(item: ShoppingListItemOut) { async function deleteListItem(item: ShoppingListItemOut) {
@ -508,11 +521,14 @@ export default defineComponent({
return; return;
} }
loading.value = true;
const { data } = await userApi.shopping.items.deleteOne(item.id); const { data } = await userApi.shopping.items.deleteOne(item.id);
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
// ===================================== // =====================================
@ -540,6 +556,7 @@ export default defineComponent({
return; return;
} }
loading.value = true;
const { data } = await userApi.shopping.items.createOne(createListItemData.value); const { data } = await userApi.shopping.items.createOne(createListItemData.value);
if (data) { if (data) {
@ -547,6 +564,8 @@ export default defineComponent({
createEditorOpen.value = false; createEditorOpen.value = false;
refresh(); refresh();
} }
loading.value = false;
} }
function updateIndex(data: ShoppingListItemOut[]) { function updateIndex(data: ShoppingListItemOut[]) {
@ -562,11 +581,14 @@ export default defineComponent({
return; return;
} }
loading.value = true;
const { data } = await userApi.shopping.items.deleteMany(items); const { data } = await userApi.shopping.items.deleteMany(items);
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
async function updateListItems() { async function updateListItems() {
@ -580,11 +602,14 @@ export default defineComponent({
return itm; return itm;
}); });
loading.value = true;
const { data } = await userApi.shopping.items.updateMany(shoppingList.value.listItems); const { data } = await userApi.shopping.items.updateMany(shoppingList.value.listItems);
if (data) { if (data) {
refresh(); refresh();
} }
loading.value = false;
} }
return { return {