feat: re-write get all routes to use pagination (#1424)

rewrite get_all routes to use a pagination pattern to allow for better implementations of search, filter, and sorting on the frontend or by any client without fetching all the data. Additionally we added a CI check for running the Nuxt built to confirm that no TS errors were present. Finally, I had to remove the header support for the Shopping lists as the browser caching based off last_updated header was not allowing it to read recent updates due to how we're handling the updated_at property in the database with nested fields. This will have to be looked at in the future to reimplement. I'm unsure how many other routes have a similar issue. 

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/composables/partials/use-actions-factory.ts

@@ -30,11 +30,15 @@ export function useStoreActions<T extends BoundT>(
     const allItems = useAsync(async () => {
       const { data } = await api.getAll();
 
-      if (allRef) {
-        allRef.value = data;
+      if (data && allRef) {
+        allRef.value = data.items;
       }
 
-      return data ?? [];
+      if (data) {
+        return data.items ?? [];
+      } else {
+        return [];
+      }
     }, useAsyncKey());
 
     loading.value = false;
@@ -45,8 +49,8 @@ export function useStoreActions<T extends BoundT>(
     loading.value = true;
     const { data } = await api.getAll();
 
-    if (data && allRef) {
-      allRef.value = data;
+    if (data && data.items && allRef) {
+      allRef.value = data.items;
     }
 
     loading.value = false;

frontend/composables/recipes/use-recipe-tools.ts

@@ -21,7 +21,12 @@ export const useTools = function (eager = true) {
       loading.value = true;
       const units = useAsync(async () => {
         const { data } = await api.tools.getAll();
-        return data;
+
+        if (data) {
+          return data.items;
+        } else {
+          return null;
+        }
       }, useAsyncKey());
 
       loading.value = false;
@@ -33,7 +38,7 @@ export const useTools = function (eager = true) {
       const { data } = await api.tools.getAll();
 
       if (data) {
-        tools.value = data;
+        tools.value = data.items;
       }
 
       loading.value = false;

frontend/composables/recipes/use-recipes.ts

@@ -18,8 +18,8 @@ function swap(t: Array<unknown>, i: number, j: number) {
 export const useSorter = () => {
   function sortAToZ(list: Array<Recipe>) {
     list.sort((a, b) => {
-      const textA = a.name?.toUpperCase() ?? "";
-      const textB = b.name?.toUpperCase() ?? "";
+      const textA: string = a.name?.toUpperCase() ?? "";
+      const textB: string = b.name?.toUpperCase() ?? "";
       return textA < textB ? -1 : textA > textB ? 1 : 0;
     });
   }
@@ -61,10 +61,10 @@ export const useLazyRecipes = function () {
 
   const recipes = ref<Recipe[]>([]);
 
-  async function fetchMore(start: number, limit: number, orderBy: string | null = null, orderDescending = true) {
-    const { data } = await api.recipes.getAll(start, limit, { orderBy, orderDescending });
+  async function fetchMore(page: number, perPage: number, orderBy: string | null = null, orderDirection = "desc") {
+    const { data } = await api.recipes.getAll(page, perPage, { orderBy, orderDirection });
     if (data) {
-      data.forEach((recipe) => {
+      data.items.forEach((recipe) => {
         recipes.value?.push(recipe);
       });
     }
@@ -80,26 +80,26 @@ export const useRecipes = (all = false, fetchRecipes = true) => {
   const api = useUserApi();
 
   // recipes is non-reactive!!
-  const { recipes, start, end } = (() => {
+  const { recipes, page, perPage } = (() => {
     if (all) {
       return {
         recipes: allRecipes,
-        start: 0,
-        end: 9999,
+        page: 1,
+        perPage: -1,
       };
     } else {
       return {
         recipes: recentRecipes,
-        start: 0,
-        end: 30,
+        page: 1,
+        perPage: 30,
       };
     }
   })();
 
   async function refreshRecipes() {
-    const { data } = await api.recipes.getAll(start, end, { loadFood: true, orderBy: "created_at" });
+    const { data } = await api.recipes.getAll(page, perPage, { loadFood: true, orderBy: "created_at" });
     if (data) {
-      recipes.value = data;
+      recipes.value = data.items;
     }
   }
 

frontend/composables/use-group-cookbooks.ts

@@ -31,7 +31,11 @@ export const useCookbooks = function () {
       const units = useAsync(async () => {
         const { data } = await api.cookbooks.getAll();
 
-        return data;
+        if (data) {
+          return data.items;
+        } else {
+          return null;
+        }
       }, useAsyncKey());
 
       loading.value = false;
@@ -41,8 +45,8 @@ export const useCookbooks = function () {
       loading.value = true;
       const { data } = await api.cookbooks.getAll();
 
-      if (data && cookbookStore) {
-        cookbookStore.value = data;
+      if (data && data.items && cookbookStore) {
+        cookbookStore.value = data.items;
       }
 
       loading.value = false;

frontend/composables/use-group-mealplan.ts

@@ -30,9 +30,13 @@ export const useMealplans = function (range: Ref<DateRange>) {
           limit: format(range.value.end, "yyyy-MM-dd"),
         };
         // @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
-        const { data } = await api.mealplans.getAll(query.start, query.limit);
+        const { data } = await api.mealplans.getAll(1, -1, { start: query.start, limit: query.limit });
 
-        return data;
+        if (data) {
+          return data.items;
+        } else {
+          return null;
+        }
       }, useAsyncKey());
 
       loading.value = false;
@@ -45,10 +49,10 @@ export const useMealplans = function (range: Ref<DateRange>) {
         limit: format(range.value.end, "yyyy-MM-dd"),
       };
       // @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
-      const { data } = await api.mealplans.getAll(query.start, query.limit);
+      const { data } = await api.mealplans.getAll(1, -1, { start: query.start, limit: query.limit });
 
-      if (data) {
-        mealplans.value = data;
+      if (data && data.items) {
+        mealplans.value = data.items;
       }
 
       loading.value = false;

frontend/composables/use-group-webhooks.ts

@@ -14,7 +14,11 @@ export const useGroupWebhooks = function () {
       const units = useAsync(async () => {
         const { data } = await api.groupWebhooks.getAll();
 
-        return data;
+        if (data) {
+          return data.items;
+        } else {
+          return null;
+        }
       }, useAsyncKey());
 
       loading.value = false;
@@ -24,8 +28,8 @@ export const useGroupWebhooks = function () {
       loading.value = true;
       const { data } = await api.groupWebhooks.getAll();
 
-      if (data) {
-        webhooks.value = data;
+      if (data && data.items) {
+        webhooks.value = data.items;
       }
 
       loading.value = false;

frontend/composables/use-groups.ts

@@ -43,7 +43,12 @@ export const useGroups = function () {
     const asyncKey = String(Date.now());
     const groups = useAsync(async () => {
       const { data } = await api.groups.getAll();
-      return data;
+
+      if (data) {
+        return data.items;
+      } else {
+        return null;
+      }
     }, asyncKey);
 
     loading.value = false;
@@ -53,7 +58,13 @@ export const useGroups = function () {
   async function refreshAllGroups() {
     loading.value = true;
     const { data } = await api.groups.getAll();
-    groups.value = data;
+
+    if (data) {
+      groups.value = data.items;
+    } else {
+      groups.value = null;
+    }
+
     loading.value = false;
   }
 

frontend/composables/use-user.ts

@@ -17,7 +17,11 @@ export const useAllUsers = function () {
     const asyncKey = String(Date.now());
     const allUsers = useAsync(async () => {
       const { data } = await api.users.getAll();
-      return data;
+      if (data) {
+        return data.items;
+      } else {
+        return null;
+      }
     }, asyncKey);
 
     loading.value = false;
@@ -27,7 +31,13 @@ export const useAllUsers = function () {
   async function refreshAllUsers() {
     loading.value = true;
     const { data } = await api.users.getAll();
-    users.value = data;
+
+    if (data) {
+      users.value = data.items;
+    } else {
+      users.value = null;
+    }
+
     loading.value = false;
   }