fix: all-recipes page now sorts alphabetically (#1405)

* added sort params to backend call

* hardcoded alphabetical sort param

* removed trivial type annotation

* linters are friends, not food
This commit is contained in:
Michael Genson 2022-06-19 13:03:24 -05:00 committed by GitHub
parent d4b92a8ade
commit bb1fa52d10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 5 deletions

View File

@ -61,8 +61,8 @@ export const useLazyRecipes = function () {
const recipes = ref<Recipe[]>([]); const recipes = ref<Recipe[]>([]);
async function fetchMore(start: number, limit: number) { async function fetchMore(start: number, limit: number, orderBy: string | null = null, orderDescending = true) {
const { data } = await api.recipes.getAll(start, limit); const { data } = await api.recipes.getAll(start, limit, { orderBy, orderDescending });
if (data) { if (data) {
data.forEach((recipe) => { data.forEach((recipe) => {
recipes.value?.push(recipe); recipes.value?.push(recipe);

View File

@ -22,8 +22,12 @@ import { useLazyRecipes } from "~/composables/recipes";
export default defineComponent({ export default defineComponent({
components: { RecipeCardSection }, components: { RecipeCardSection },
setup() { setup() {
const start = ref(0); // paging and sorting params
const orderBy = "name";
const orderDescending = false;
const increment = ref(30); const increment = ref(30);
const start = ref(0);
const offset = ref(increment.value); const offset = ref(increment.value);
const limit = ref(increment.value); const limit = ref(increment.value);
const ready = ref(false); const ready = ref(false);
@ -32,7 +36,7 @@ export default defineComponent({
const { recipes, fetchMore } = useLazyRecipes(); const { recipes, fetchMore } = useLazyRecipes();
onMounted(async () => { onMounted(async () => {
await fetchMore(start.value, limit.value); await fetchMore(start.value, limit.value, orderBy, orderDescending);
ready.value = true; ready.value = true;
}); });
@ -43,7 +47,7 @@ export default defineComponent({
loading.value = true; loading.value = true;
start.value = offset.value + 1; start.value = offset.value + 1;
offset.value = offset.value + increment.value; offset.value = offset.value + increment.value;
fetchMore(start.value, limit.value); fetchMore(start.value, limit.value, orderBy, orderDescending);
loading.value = false; loading.value = false;
}, 500); }, 500);