chore: Nuxt 4 upgrade (#7426)

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

@@ -0,0 +1,81 @@
+import type { Recipe } from "../types/recipe";
+import type { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
+import { type QueryValue, route } from "~/lib/api/base/route";
+
+export interface CrudAPIInterface {
+  requests: ApiRequestInstance;
+
+  // Route Properties / Methods
+  baseRoute: string;
+  itemRoute(itemId: string | number): string;
+
+  // Methods
+}
+
+export abstract class BaseAPI {
+  requests: ApiRequestInstance;
+
+  constructor(requests: ApiRequestInstance) {
+    this.requests = requests;
+  }
+}
+
+export abstract class BaseCRUDAPIReadOnly<ReadType>
+  extends BaseAPI
+  implements CrudAPIInterface {
+  public baseRoute: string;
+  public itemRouteFn: (itemId: string | number) => string;
+
+  constructor(
+    requests: ApiRequestInstance,
+    baseRoute: string,
+    itemRoute: (itemId: string | number) => string,
+  ) {
+    super(requests);
+    this.baseRoute = baseRoute;
+    this.itemRouteFn = itemRoute;
+  }
+
+  get baseRouteValue() {
+    return this.baseRoute;
+  }
+
+  itemRoute(itemId: string | number): string {
+    return this.itemRouteFn(itemId);
+  }
+
+  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 getOne(itemId: string | number) {
+    return await this.requests.get<ReadType>(this.itemRoute(itemId));
+  }
+}
+
+export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
+  extends BaseCRUDAPIReadOnly<ReadType>
+  implements CrudAPIInterface {
+  async createOne(payload: CreateType) {
+    return await this.requests.post<ReadType>(this.baseRoute, payload);
+  }
+
+  async updateOne(itemId: string | number, payload: UpdateType) {
+    return await this.requests.put<ReadType, UpdateType>(this.itemRoute(itemId), payload);
+  }
+
+  async patchOne(itemId: string, payload: Partial<UpdateType>) {
+    return await this.requests.patch<ReadType, Partial<UpdateType>>(this.itemRoute(itemId), payload);
+  }
+
+  async deleteOne(itemId: string | number) {
+    return await this.requests.delete<ReadType>(this.itemRoute(itemId));
+  }
+
+  async duplicateOne(itemId: string | number, newName: string | undefined) {
+    return await this.requests.post<Recipe>(`${this.itemRoute(itemId)}/duplicate`, {
+      name: newName,
+    });
+  }
+}

frontend/app/lib/api/base/index.ts

@@ -0,0 +1 @@
+export { route } from "./route";

frontend/app/lib/api/base/route.ts

@@ -0,0 +1,38 @@
+const parts = {
+  host: "http://localhost.com",
+  prefix: "",
+};
+
+export function overrideParts(host: string, prefix: string) {
+  parts.host = host;
+  parts.prefix = prefix;
+}
+
+export type QueryValue = string | string[] | number | number[] | boolean | null | undefined;
+
+/**
+ * route is a the main URL builder for the API. It will use a predefined host and prefix (global)
+ * in the urls.ts file and then append the passed in path parameter uring the `URL` class from the
+ * browser. It will also append any query parameters passed in as the second parameter.
+ *
+ * The default host `http://localhost.com` is removed from the path if it is present. This allows us
+ * to bootstrap the API with different hosts as needed (like for testing) but still allows us to use
+ * relative URLs in production because the API and client bundle are served from the same server/host.
+ */
+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)) {
+        for (const item of value) {
+          url.searchParams.append(key, String(item));
+        }
+      }
+      else {
+        url.searchParams.append(key, String(value));
+      }
+    }
+  }
+
+  return url.toString().replace("http://localhost.com", "");
+}

frontend/app/lib/api/base/routes.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { route } from ".";
+
+describe("UrlBuilder", () => {
+  it("basic query parameter", () => {
+    const result = route("/test", { a: "b" });
+    expect(result).toBe("/test?a=b");
+  });
+
+  it("multiple query parameters", () => {
+    const result = route("/test", { a: "b", c: "d" });
+    expect(result).toBe("/test?a=b&c=d");
+  });
+
+  it("no query parameters", () => {
+    const result = route("/test");
+    expect(result).toBe("/test");
+  });
+
+  it("list-like query parameters", () => {
+    const result = route("/test", { a: ["b", "c"] });
+    expect(result).toBe("/test?a=b&a=c");
+  });
+});