fix: Recipe Card Section Infinite Loop (#2584)

* 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

View File

@ -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) {