Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-10-31 02:03:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Recipe Card Section Infinite Loop (#2584)

Browse Source 
* refactored recipe card section fetch

* minor optimization

* lint
This commit is contained in:
Michael Genson
2023-09-29 18:59:07 -05:00
committed by GitHub
parent 1074cad5dc
commit b32e2f1bf7
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/components/Domain/Recipe/RecipeCardSection.vue
View File

@@ -244,32 +244,37 @@ export default defineComponent({
onMounted(async () => { onMounted(async () => {
if (props.query) { if (props.query) {
const newRecipes = await fetchRecipes(2); await initRecipes();
// since we doubled the first call, we also need to advance the page
page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
ready.value = true; ready.value = true;
} }
}); });
let lastQuery: string | undefined;
watch( watch(
() => props.query, () => props.query,
async (newValue: RecipeSearchQuery | undefined) => { async (newValue: RecipeSearchQuery | undefined) => {
if (newValue) { const newValueString = JSON.stringify(newValue)
page.value = 1; if (newValue && (!ready.value || lastQuery !== newValueString)) {
const newRecipes = await fetchRecipes(2); lastQuery = newValueString;
await initRecipes();
// since we doubled the first call, we also need to advance the page
page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
ready.value = true; 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(() => { const infiniteScroll = useThrottleFn(() => {
useAsync(async () => { useAsync(async () => {
if (!ready.value || !hasMore.value || loading.value) { if (!ready.value || !hasMore.value || loading.value) {