Sören f4b819899d
fix: duplicate network calls on index page (#2085)
* Prevent extra recipe load on index page

* Prevent loading recipes with food for all components but search ones

* add missing change in search page
2023-02-05 09:52:49 -09:00

113 lines
2.4 KiB
TypeScript

import { useAsync, ref } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { useUserApi } from "~/composables/api";
import { Recipe } from "~/lib/api/types/recipe";
export const allRecipes = ref<Recipe[]>([]);
export const recentRecipes = ref<Recipe[]>([]);
export const useLazyRecipes = function () {
const api = useUserApi();
const recipes = ref<Recipe[]>([]);
async function fetchMore(
page: number,
perPage: number,
orderBy: string | null = null,
orderDirection = "desc",
cookbook: string | null = null,
category: string | null = null,
tag: string | null = null,
tool: string | null = null,
queryFilter: string | null = null,
) {
const { data } = await api.recipes.getAll(page, perPage, {
orderBy,
orderDirection,
cookbook,
categories: category,
tags: tag,
tools: tool,
queryFilter,
});
return data ? data.items : [];
}
function appendRecipes(val: Array<Recipe>) {
val.forEach((recipe) => {
recipes.value.push(recipe);
});
}
function assignSorted(val: Array<Recipe>) {
recipes.value = val;
}
function removeRecipe(slug: string) {
for (let i = 0; i < recipes?.value?.length; i++) {
if (recipes?.value[i].slug === slug) {
recipes?.value.splice(i, 1);
break;
}
}
}
function replaceRecipes(val: Array<Recipe>) {
recipes.value = val;
}
return {
recipes,
fetchMore,
appendRecipes,
assignSorted,
removeRecipe,
replaceRecipes,
};
};
export const useRecipes = (all = false, fetchRecipes = true, loadFood = false) => {
const api = useUserApi();
// recipes is non-reactive!!
const { recipes, page, perPage } = (() => {
if (all) {
return {
recipes: allRecipes,
page: 1,
perPage: -1,
};
} else {
return {
recipes: recentRecipes,
page: 1,
perPage: 30,
};
}
})();
async function refreshRecipes() {
const { data } = await api.recipes.getAll(page, perPage, { loadFood, orderBy: "created_at" });
if (data) {
recipes.value = data.items;
}
}
function getAllRecipes() {
useAsync(async () => {
await refreshRecipes();
}, useAsyncKey());
}
function assignSorted(val: Array<Recipe>) {
recipes.value = val;
}
if (fetchRecipes) {
getAllRecipes();
}
return { getAllRecipes, assignSorted, refreshRecipes };
};