fix: 2148 infinite scroll on search (#2173)

* refactor recipe card section to use unified query construct

* rework search page so it uses lazy-loading of RecipeCardSection

* remove RecipeQuery again

* prettier reformatting

* remove recipes/all page

* remove max results setting from search

* fix typing issues

frontend/lib/api/base/base-clients.ts

@@ -1,5 +1,6 @@
 import { Recipe } from "../types/recipe";
 import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
+import { QueryValue, route } from "~/lib/api/base/route";
 
 export interface CrudAPIInterface {
   requests: ApiRequestInstance;
@@ -21,14 +22,14 @@ export abstract class BaseAPI {
 
 export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
   extends BaseAPI
-  implements CrudAPIInterface {
+  implements CrudAPIInterface
+{
   abstract baseRoute: string;
   abstract itemRoute(itemId: string | number): string;
 
-  async getAll(page = 1, perPage = -1, params = {} as any) {
-    return await this.requests.get<PaginationData<ReadType>>(this.baseRoute, {
-      params: { page, perPage, ...params },
-    });
+  async getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = Object.fromEntries(Object.entries(params).filter(([_, v]) => v !== null && v !== undefined));
+    return await this.requests.get<PaginationData<ReadType>>(route(this.baseRoute, { page, perPage, ...params }));
   }
 
   async createOne(payload: CreateType) {

frontend/lib/api/base/route.ts

@@ -21,7 +21,6 @@ export type QueryValue = string | string[] | number | number[] | boolean | null
  */
 export function route(rest: string, params: Record<string, QueryValue> | null = null): string {
   const url = new URL(parts.prefix + rest, parts.host);
-
   if (params) {
     for (const [key, value] of Object.entries(params)) {
       if (Array.isArray(value)) {

frontend/lib/api/types/recipe.ts

@@ -1,9 +1,9 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
-/* This file was automatically generated from pydantic models by running pydantic2ts.
-/* Do not modify it by hand - just update the pydantic models and then re-run the script
-*/
+ /* This file was automatically generated from pydantic models by running pydantic2ts.
+ /* Do not modify it by hand - just update the pydantic models and then re-run the script
+ */
 
 export type ExportTypes = "json";
 export type RegisteredParser = "nlp" | "brute";

frontend/lib/api/user/recipes/recipe.ts

@@ -55,9 +55,9 @@ const routes = {
   recipesSlugTimelineEventId: (slug: string, id: string) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
 };
 
-export type RecipeSearchQuery ={
+export type RecipeSearchQuery = {
   search: string;
-  orderDirection? : "asc" | "desc";
+  orderDirection?: "asc" | "desc";
   groupId?: string;
 
   queryFilter?: string;
@@ -76,11 +76,10 @@ export type RecipeSearchQuery ={
   foods?: string[];
   requireAllFoods?: boolean;
 
-  page: number;
-  perPage: number;
+  page?: number;
+  perPage?: number;
   orderBy?: string;
-}
-
+};
 
 export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   baseRoute: string = routes.recipesBase;
@@ -96,7 +95,7 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     this.share = new RecipeShareApi(requests);
   }
 
-  async search(rsq : RecipeSearchQuery) {
+  async search(rsq: RecipeSearchQuery) {
     return await this.requests.get<PaginationData<Recipe>>(route(routes.recipesBase, rsq));
   }
 
@@ -176,7 +175,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   }
 
   async updateTimelineEvent(recipeSlug: string, eventId: string, payload: RecipeTimelineEventUpdate) {
-    return await this.requests.put<RecipeTimelineEventOut, RecipeTimelineEventUpdate>(routes.recipesSlugTimelineEventId(recipeSlug, eventId), payload);
+    return await this.requests.put<RecipeTimelineEventOut, RecipeTimelineEventUpdate>(
+      routes.recipesSlugTimelineEventId(recipeSlug, eventId),
+      payload
+    );
   }
 
   async deleteTimelineEvent(recipeSlug: string, eventId: string) {
@@ -184,8 +186,11 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   }
 
   async getAllTimelineEvents(recipeSlug: string, page = 1, perPage = -1, params = {} as any) {
-    return await this.requests.get<PaginationData<RecipeTimelineEventOut>>(routes.recipesSlugTimelineEvent(recipeSlug), {
-      params: { page, perPage, ...params },
-    });
+    return await this.requests.get<PaginationData<RecipeTimelineEventOut>>(
+      routes.recipesSlugTimelineEvent(recipeSlug),
+      {
+        params: { page, perPage, ...params },
+      }
+    );
   }
 }