From b32e2f1bf76b77b1146554377af8b61c298c5ec9 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Fri, 29 Sep 2023 18:59:07 -0500
Subject: [PATCH] fix: Recipe Card Section Infinite Loop (#2584)

* refactored recipe card section fetch

* minor optimization

* lint
---
 .../Domain/Recipe/RecipeCardSection.vue       | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 5442ecd2e23f..e0ce9b1a8e2c 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -244,32 +244,37 @@ export default defineComponent({
 
     onMounted(async () => {
       if (props.query) {
-        const newRecipes = await fetchRecipes(2);
-
-        // since we doubled the first call, we also need to advance the page
-        page.value = page.value + 1;
-
-        context.emit(REPLACE_RECIPES_EVENT, newRecipes);
+        await initRecipes();
         ready.value = true;
       }
     });
 
+    let lastQuery: string | undefined;
     watch(
       () => props.query,
       async (newValue: RecipeSearchQuery | undefined) => {
-        if (newValue) {
-          page.value = 1;
-          const newRecipes = await fetchRecipes(2);
-
-          // since we doubled the first call, we also need to advance the page
-          page.value = page.value + 1;
-
-          context.emit(REPLACE_RECIPES_EVENT, newRecipes);
+        const newValueString = JSON.stringify(newValue)
+        if (newValue && (!ready.value || lastQuery !== newValueString)) {
+          lastQuery = newValueString;
+          await initRecipes();
           ready.value = true;
         }
       }
     );
 
+    async function initRecipes() {
+      page.value = 1;
+      const newRecipes = await fetchRecipes(2);
+      if (!newRecipes.length) {
+        hasMore.value = false;
+      }
+
+      // since we doubled the first call, we also need to advance the page
+      page.value = page.value + 1;
+
+      context.emit(REPLACE_RECIPES_EVENT, newRecipes);
+    }
+
     const infiniteScroll = useThrottleFn(() => {
       useAsync(async () => {
         if (!ready.value || !hasMore.value || loading.value) {