Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-06-04 22:25:34 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -244,31 +244,36 @@ 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)
if (newValue && (!ready.value || lastQuery !== newValueString)) {
lastQuery = newValueString;
await initRecipes();
ready.value = true;
}
}
);
async function initRecipes() {
page.value = 1; page.value = 1;
const newRecipes = await fetchRecipes(2); const newRecipes = await fetchRecipes(2);
if (!newRecipes.length) {
hasMore.value = false;
}
// since we doubled the first call, we also need to advance the page // since we doubled the first call, we also need to advance the page
page.value = page.value + 1; page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes); context.emit(REPLACE_RECIPES_EVENT, newRecipes);
ready.value = true;
} }
}
);
const infiniteScroll = useThrottleFn(() => { const infiniteScroll = useThrottleFn(() => {
useAsync(async () => { useAsync(async () => {