refactor(frontend): ♻️ rewrite search componenets to typescript

frontend/api/class-interfaces/categories.ts

@@ -0,0 +1,45 @@
+import { BaseCRUDAPI } from "./_base";
+
+const prefix = "/api";
+
+export interface Category {
+  name: string;
+  id: number;
+  slug: string;
+}
+
+export interface CreateCategory {
+  name: string;
+}
+
+const routes = {
+  categories: `${prefix}/categories`,
+  categoriesEmpty: `${prefix}/categories/empty`,
+
+  categoriesCategory: (category: string) => `${prefix}/categories/${category}`,
+};
+
+export class CategoriesAPI extends BaseCRUDAPI<Category, CreateCategory> {
+  baseRoute: string = routes.categories;
+  itemRoute = routes.categoriesCategory;
+
+  /** Returns a list of categories that do not contain any recipes
+   */
+  async getEmptyCategories() {
+    return await this.requests.get(routes.categoriesEmpty);
+  }
+
+  /** Returns a list of recipes associated with the provided category.
+   */
+  async getAllRecipesByCategory(category: string) {
+    return await this.requests.get(routes.categoriesCategory(category));
+  }
+
+  /** Removes a recipe category from the database. Deleting a
+   * category does not impact a recipe. The category will be removed
+   * from any recipes that contain it
+   */
+  async deleteRecipeCategory(category: string) {
+    return await this.requests.delete(routes.categoriesCategory(category));
+  }
+}

frontend/api/class-interfaces/tags.ts

@@ -0,0 +1,45 @@
+import { BaseCRUDAPI } from "./_base";
+
+const prefix = "/api";
+
+export interface Tag {
+  name: string;
+  id: number;
+  slug: string;
+}
+
+export interface CreateTag {
+  name: string;
+}
+
+const routes = {
+  tags: `${prefix}/tags`,
+  tagsEmpty: `${prefix}/tags/empty`,
+
+  tagsTag: (tag: string) => `${prefix}/tags/${tag}`,
+};
+
+export class TagsAPI extends BaseCRUDAPI<Tag, CreateTag> {
+  baseRoute: string = routes.tags;
+  itemRoute = routes.tagsTag;
+
+  /** Returns a list of categories that do not contain any recipes
+   */
+  async getEmptyCategories() {
+    return await this.requests.get(routes.tagsEmpty);
+  }
+
+  /** Returns a list of recipes associated with the provided category.
+   */
+  async getAllRecipesByCategory(category: string) {
+    return await this.requests.get(routes.tagsTag(category));
+  }
+
+  /** Removes a recipe category from the database. Deleting a
+   * category does not impact a recipe. The category will be removed
+   * from any recipes that contain it
+   */
+  async deleteRecipeCategory(category: string) {
+    return await this.requests.delete(routes.tagsTag(category));
+  }
+}

frontend/api/index.ts

@@ -5,6 +5,8 @@ import { DebugAPI } from "./class-interfaces/debug";
 import { EventsAPI } from "./class-interfaces/events";
 import { BackupAPI } from "./class-interfaces/backups";
 import { UploadFile } from "./class-interfaces/upload";
+import { CategoriesAPI } from "./class-interfaces/categories";
+import { TagsAPI } from "./class-interfaces/tags";
 import { ApiRequestInstance } from "~/types/api";
 
 class Api {
@@ -15,6 +17,10 @@ class Api {
   public debug: DebugAPI;
   public events: EventsAPI;
   public backups: BackupAPI;
+  public categories: CategoriesAPI;
+  public tags: TagsAPI;
+
+  // Utils
   public upload: UploadFile;
 
   constructor(requests: ApiRequestInstance) {
@@ -22,12 +28,21 @@ class Api {
       return Api.instance;
     }
 
+    // Recipes
     this.recipes = new RecipeAPI(requests);
+    this.categories = new CategoriesAPI(requests);
+    this.tags = new TagsAPI(requests);
+
+    // Users
     this.users = new UserApi(requests);
     this.groups = new GroupAPI(requests);
+
+    // Admin
     this.debug = new DebugAPI(requests);
     this.events = new EventsAPI(requests);
     this.backups = new BackupAPI(requests);
+
+    // Utils
     this.upload = new UploadFile(requests);
 
     Object.freeze(this);

frontend/api/requests.ts

@@ -1,6 +1,5 @@
 import axios, { AxiosResponse } from "axios";
 
-
 interface RequestResponse<T> {
   response: AxiosResponse<T> | null;
   data: T | null;
@@ -21,9 +20,9 @@ const request = {
 };
 
 export const requests = {
-  async get<T>(url: string, queryParams = {}): Promise<RequestResponse<T>> {
+  async get<T>(url: string, params = {}): Promise<RequestResponse<T>> {
     let error = null;
-    const response = await axios.get<T>(url, { params: { queryParams } }).catch((e) => {
+    const response = await axios.get<T>(url, { ...params }).catch((e) => {
       error = e;
     });
     if (response != null) {