wip: infinite scroll (broken)

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -124,7 +124,6 @@ import {
   reactive,
   ref,
   toRefs,
-  useAsync,
   useContext,
   useRouter,
   watch,
@@ -132,7 +131,6 @@ import {
 import { useThrottleFn } from "@vueuse/core";
 import RecipeCard from "./RecipeCard.vue";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
-import { useAsyncKey } from "~/composables/use-utils";
 import { useLazyRecipes } from "~/composables/recipes";
 import { Recipe } from "~/lib/api/types/recipe";
 import { useUserSortPreferences } from "~/composables/use-users/preferences";
@@ -198,6 +196,7 @@ export default defineComponent({
     });
 
     const router = useRouter();
+
     function navigateRandom() {
       if (props.recipes.length > 0) {
         const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
@@ -221,6 +220,7 @@ export default defineComponent({
     });
 
     async function fetchRecipes(pageCount = 1) {
+      console.log("fetching recipes", pageCount);
       return await fetchMore(
         page.value,
         // we double-up the first call to avoid a bug with large screens that render the entire first page without scrolling, preventing additional loading
@@ -261,27 +261,26 @@ export default defineComponent({
       }
     );
 
-    const infiniteScroll = useThrottleFn(() => {
+    const infiniteScroll = useThrottleFn(async () => {
-      useAsync(async () => {
+      console.log("infinite scroll");
-        if (!ready.value || !hasMore.value || loading.value) {
+      if (!ready.value || !hasMore.value || loading.value) {
-          return;
+        return;
-        }
+      }
 
-        loading.value = true;
+      loading.value = true;
-        page.value = page.value + 1;
+      page.value = page.value + 1;
 
-        const newRecipes = await fetchRecipes();
+      const newRecipes = await fetchRecipes();
-        if (!newRecipes.length) {
+      if (newRecipes.length <= 0) {
-          hasMore.value = false;
+        hasMore.value = false;
-        } else {
+      } else {
-          context.emit(APPEND_RECIPES_EVENT, newRecipes);
+        context.emit(APPEND_RECIPES_EVENT, newRecipes);
-        }
+      }
 
-        loading.value = false;
+      loading.value = false;
-      }, useAsyncKey());
     }, 500);
 
-    function sortRecipes(sortType: string) {
+    async function sortRecipes(sortType: string) {
       if (state.sortLoading || loading.value) {
         return;
       }
@@ -342,21 +341,19 @@ export default defineComponent({
           return;
       }
 
-      useAsync(async () => {
+      // reset pagination
-        // reset pagination
+      page.value = 1;
-        page.value = 1;
+      hasMore.value = true;
-        hasMore.value = true;
 
-        state.sortLoading = true;
+      state.sortLoading = true;
-        loading.value = true;
+      loading.value = true;
 
-        // fetch new recipes
+      // fetch new recipes
-        const newRecipes = await fetchRecipes();
+      const newRecipes = await fetchRecipes();
-        context.emit(REPLACE_RECIPES_EVENT, newRecipes);
+      context.emit(REPLACE_RECIPES_EVENT, newRecipes);
 
-        state.sortLoading = false;
+      state.sortLoading = false;
-        loading.value = false;
+      loading.value = false;
-      }, useAsyncKey());
     }
 
     function toggleMobileCards() {

frontend/components/Domain/Recipe/RecipeCardSectionv2.vue

@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <!-- Section Toolbar -->
+    <v-app-bar v-if="toolbar" color="transparent" flat class="mt-n1 flex-sm-wrap rounded">
+      <slot name="title">
+        <v-icon v-if="title" large left>
+          {{ displayIcon }}
+        </v-icon>
+        <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
+      </slot>
+      <v-spacer></v-spacer>
+      <v-btn :icon="$vuetify.breakpoint.xsOnly" text :disabled="recipes.length === 0">
+        <v-icon :left="!$vuetify.breakpoint.xsOnly">
+          {{ $globals.icons.diceMultiple }}
+        </v-icon>
+        {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
+      </v-btn>
+
+      <v-menu v-if="$listeners.sortRecipes" offset-y left>
+        <template #activator="{ on, attrs }">
+          <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on">
+            <v-icon :left="!$vuetify.breakpoint.xsOnly">
+              {{ $globals.icons.sort }}
+            </v-icon>
+            {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item v-for="sort in sorters" :key="sort.id" @click="sort.action">
+            <v-icon left>
+              {{ sort.icon }}
+            </v-icon>
+            <v-list-item-title>{{ sort.label }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <ContextMenu
+        v-if="!$vuetify.breakpoint.xsOnly"
+        :menu-top="false"
+        :items="[
+          {
+            title: $tc('general.toggle-view'),
+            icon: $globals.icons.eye,
+            event: 'toggle-dense-view',
+          },
+        ]"
+        @toggle-dense-view="() => (state.preferMobileCards = !state.preferMobileCards)"
+      />
+    </v-app-bar>
+
+    <!-- Recipe Section -->
+    <div v-if="recipes && recipes.length > 0" class="mt-2">
+      <v-row v-if="!mobileCards">
+        <v-col v-for="(recipe, index) in recipes" :key="recipe.slug + index" :sm="6" :md="6" :lg="4" :xl="3">
+          <v-lazy>
+            <RecipeCard
+              :name="recipe.name"
+              :description="recipe.description"
+              :slug="recipe.slug"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :tags="recipe.tags"
+              :recipe-id="recipe.id"
+            />
+          </v-lazy>
+        </v-col>
+      </v-row>
+      <v-row v-else dense>
+        <v-col v-for="recipe in recipes" :key="recipe.name" cols="12" :sm="'12'" :md="'6'" :lg="'4'" :xl="'3'">
+          <v-lazy>
+            <RecipeCardMobile
+              :name="recipe.name"
+              :description="recipe.description"
+              :slug="recipe.slug"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :tags="recipe.tags"
+              :recipe-id="recipe.id"
+            />
+          </v-lazy>
+        </v-col>
+      </v-row>
+      <v-card v-intersect="infiniteScroll"></v-card>
+    </div>
+    <div v-else class="d-flex justify-center">
+      <div class="text-center">
+        <v-icon size="64">
+          {{ $globals.icons.search }}
+        </v-icon>
+        <p class="headline">No Results</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import RecipeCard from "./RecipeCard.vue";
+import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { Recipe } from "~/lib/api/types/recipe";
+
+const EVENTS = {
+  az: "az",
+  rating: "rating",
+  created: "created",
+  updated: "updated",
+  lastMade: "lastMade",
+} as const;
+
+export default defineComponent({
+  components: {
+    RecipeCard,
+    RecipeCardMobile,
+  },
+  props: {
+    toolbar: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+    recipes: {
+      type: Array as () => Recipe[],
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const { $globals, i18n, $vuetify } = useContext();
+
+    const state = ref({
+      preferMobileCards: false,
+    });
+
+    const displayIcon = computed(() => props.icon || $globals.icons.tags);
+    const mobileCards = computed(() => $vuetify.breakpoint.xsOnly || state.value.preferMobileCards);
+
+    const sorters = computed(() => {
+      return [
+        {
+          id: 1,
+          label: i18n.t("general.sort-alphabetically"),
+          icon: $globals.icons.orderAlphabeticalAscending,
+          action: () => emit(EVENTS.az),
+        },
+        {
+          id: 2,
+          label: i18n.t("general.rating"),
+          icon: $globals.icons.star,
+          action: () => emit(EVENTS.rating),
+        },
+        {
+          id: 3,
+          label: i18n.t("general.created"),
+          icon: $globals.icons.newBox,
+          action: () => emit(EVENTS.created),
+        },
+        {
+          id: 4,
+          label: i18n.t("general.updated"),
+          icon: $globals.icons.update,
+          action: () => emit(EVENTS.updated),
+        },
+        {
+          id: 5,
+          label: i18n.t("general.last-made"),
+          icon: $globals.icons.chefHat,
+          action: () => emit(EVENTS.lastMade),
+        },
+      ];
+    });
+
+    function infiniteScroll() {
+      emit("intersect");
+    }
+
+    return {
+      state,
+      sorters,
+      displayIcon,
+      mobileCards,
+      infiniteScroll,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

frontend/composables/use-infinite-scroll.ts

@@ -0,0 +1,48 @@
+import {  ref, Ref } from "@nuxtjs/composition-api"
+import { useDebounceFn } from "@vueuse/core"
+
+
+type InfiniteScrollOptions ={
+  page: Ref<number>
+  perPage: Ref<number>
+  total: Ref<number>
+  locked?: Ref<boolean>
+  data: Ref<any[]>
+  callback: () => Promise<void>
+}
+
+
+
+
+export function useInfiniteScroll(opts: InfiniteScrollOptions) {
+  const loading = ref(false)
+
+  const { data, callback, locked, page, total} = opts
+
+  const onScrollRaw = () => {
+    console.log("onScroll")
+    const { length } = data.value
+
+
+    // don't run if:
+    // - already loading
+    // - there's nothing more to load
+    if (loading.value || locked?.value || total.value !== -1 && length >= total.value) {
+      return
+    }
+
+    // load more items
+    loading.value = true
+    page.value = page.value + 1
+    callback().then(() => {
+      loading.value = false
+    })
+  }
+
+  const onScroll = useDebounceFn(onScrollRaw, 100)
+
+  return {
+    onScroll,
+    loading,
+  }
+}

frontend/pages/index.vue

@@ -118,14 +118,13 @@
     </div>
     <v-divider></v-divider>
     <v-container class="mt-6 px-md-6">
-      <RecipeCardSection
+      {{ recipes.length }}
+      <RecipeCardSectionv2
         class="mt-n5"
         :icon="$globals.icons.search"
         :title="$tc('search.results')"
         :recipes="recipes"
-        :query="passedQuery"
+        @intersect="onScroll"
-        @replaceRecipes="replaceRecipes"
-        @appendRecipes="appendRecipes"
       />
     </v-container>
   </v-container>
@@ -136,20 +135,22 @@ import { ref, defineComponent, useRouter, onMounted, useContext, computed } from
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
-import { useLazyRecipes } from "~/composables/recipes";
 import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
+import RecipeCardSectionv2 from "~/components/Domain/Recipe/RecipeCardSectionv2.vue";
+import { useInfiniteScroll } from "~/composables/use-infinite-scroll";
+import { useUserApi } from "~/composables/api";
+import { RecipeSummary } from "~/lib/api/types/group";
 
 export default defineComponent({
-  components: { SearchFilter, RecipeCardSection },
+  components: { SearchFilter, RecipeCardSectionv2 },
   setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
     const router = useRouter();
     const { $globals, i18n } = useContext();
 
+    const recipes = ref<RecipeSummary[]>([]);
+
     const state = ref({
       auto: true,
       search: "",
@@ -163,6 +164,22 @@ export default defineComponent({
       requireAllFoods: false,
     });
 
+    const activeQuery = ref<RecipeSearchQuery>({
+      search: "",
+      orderBy: "created_at",
+      orderDirection: "desc",
+      requireAllCategories: false,
+      requireAllTags: false,
+      requireAllTools: false,
+      requireAllFoods: false,
+      categories: [],
+      tags: [],
+      tools: [],
+      foods: [],
+    });
+
+    const pageLocked = ref(false);
+
     const categories = useCategoryStore();
     const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
 
@@ -175,8 +192,6 @@ export default defineComponent({
     const tools = useToolStore();
     const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
 
-    const passedQuery = ref<RecipeSearchQuery | null>(null);
-
     function reset() {
       state.value.search = "";
       state.value.orderBy = "created_at";
@@ -190,6 +205,8 @@ export default defineComponent({
       selectedTags.value = [];
       selectedTools.value = [];
 
+      recipes.value = [];
+
       router.push({
         query: {},
       });
@@ -205,43 +222,80 @@ export default defineComponent({
       return array.map((item) => item.id);
     }
 
+    const api = useUserApi();
+
+    const page = ref(0);
+    const perPage = ref(10);
+    const total = ref(-1);
+
     async function search() {
-      await router.push({
+      if (pageLocked.value) {
-        query: {
+        return;
-          categories: toIDArray(selectedCategories.value),
+      }
-          foods: toIDArray(selectedFoods.value),
-          tags: toIDArray(selectedTags.value),
-          tools: toIDArray(selectedTools.value),
 
-          // Only add the query param if it's or not default
+      activeQuery.value = {
-          ...{
+        perPage: perPage.value,
-            auto: state.value.auto ? undefined : "false",
+        page: page.value,
-            search: state.value.search === "" ? undefined : state.value.search,
-            orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
-            orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
-            requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
-            requireAllTags: state.value.requireAllTags ? "true" : undefined,
-            requireAllTools: state.value.requireAllTools ? "true" : undefined,
-            requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
-          },
-        },
-      });
 
-      passedQuery.value = {
         search: state.value.search,
-        categories: toIDArray(selectedCategories.value),
+        orderBy: state.value.orderBy,
-        foods: toIDArray(selectedFoods.value),
+        orderDirection: state.value.orderDirection,
-        tags: toIDArray(selectedTags.value),
-        tools: toIDArray(selectedTools.value),
         requireAllCategories: state.value.requireAllCategories,
         requireAllTags: state.value.requireAllTags,
         requireAllTools: state.value.requireAllTools,
         requireAllFoods: state.value.requireAllFoods,
-        orderBy: state.value.orderBy,
+        categories: toIDArray(selectedCategories.value),
-        orderDirection: state.value.orderDirection,
+        tags: toIDArray(selectedTags.value),
+        tools: toIDArray(selectedTools.value),
+        foods: toIDArray(selectedFoods.value),
       };
+
+      await router.push({
+        query: {
+          categories: activeQuery.value.categories,
+          foods: activeQuery.value.foods,
+          tags: activeQuery.value.tags,
+          tools: activeQuery.value.tools,
+
+          // Only add the query param if it's or not default
+          ...{
+            auto: state.value.auto ? undefined : "false",
+            search: activeQuery.value.search === "" ? undefined : activeQuery.value.search,
+            orderBy: activeQuery.value.orderBy === "createdAt" ? undefined : activeQuery.value.orderBy,
+            orderDirection: activeQuery.value.orderDirection === "desc" ? undefined : activeQuery.value.orderDirection,
+            requireAllCategories: activeQuery.value.requireAllCategories ? "true" : undefined,
+            requireAllTags: activeQuery.value.requireAllTags ? "true" : undefined,
+            requireAllTools: activeQuery.value.requireAllTools ? "true" : undefined,
+            requireAllFoods: activeQuery.value.requireAllFoods ? "true" : undefined,
+          },
+        },
+      });
+
+      const result = await api.recipes.search(activeQuery.value);
+
+      if (result.error || result.data == null) {
+        return;
+      }
+
+      // append
+      if (page.value > 0) {
+        recipes.value = recipes.value.concat(result.data.items);
+      } else {
+        recipes.value = result.data.items;
+      }
+      total.value = result.data.total;
     }
 
+    const { onScroll } = useInfiniteScroll({
+      page,
+      total,
+      perPage,
+      data: recipes,
+      callback: async () => {
+        await search();
+      },
+    });
+
     function waitUntilAndExecute(
       condition: () => boolean,
       callback: () => void,
@@ -387,7 +441,8 @@ export default defineComponent({
       }
 
       Promise.allSettled(promises).then(() => {
-        search();
+        pageLocked.value = false;
+        onScroll();
       });
     });
 
@@ -427,17 +482,13 @@ export default defineComponent({
 
       sortable,
       toggleOrderDirection,
+      onScroll,
 
       selectedCategories,
       selectedFoods,
       selectedTags,
       selectedTools,
-      appendRecipes,
-      assignSorted,
       recipes,
-      removeRecipe,
-      replaceRecipes,
-      passedQuery,
     };
   },
 });