Use composition API for more components, enable more type checking (#914)

* Activate more linting rules from eslint and typescript

* Properly add VForm as type information

* Fix usage of native types

* Fix more linting issues

* Rename vuetify types file, add VTooltip

* Fix some more typing problems

* Use composition API for more components

* Convert RecipeRating

* Convert RecipeNutrition

* Convert more components to composition API

* Fix globals plugin for type checking

* Add missing icon types

* Fix vuetify types in Nuxt context

* Use composition API for RecipeActionMenu

* Convert error.vue to composition API

* Convert RecipeContextMenu to composition API

* Use more composition API and type checking in recipe/create

* Convert AppButtonUpload to composition API

* Fix some type checking in RecipeContextMenu

* Remove unused components BaseAutoForm and BaseColorPicker

* Convert RecipeCategoryTagDialog to composition API

* Convert RecipeCardSection to composition API

* Convert RecipeCategoryTagSelector to composition API

* Properly import vuetify type definitions

* Convert BaseButton to composition API

* Convert AutoForm to composition API

* Remove unused requests API file

* Remove static routes from recipe API

* Fix more type errors

* Convert AppHeader to composition API, fixing some search bar focus problems

* Convert RecipeDialogSearch to composition API

* Update API types from pydantic models, handle undefined values

* Improve more typing problems

* Add types to other plugins

* Properly type the CRUD API access

* Fix typing of static image routes

* Fix more typing stuff

* Fix some more typing problems

* Turn off more rules

frontend/api/_base.ts

@@ -10,16 +10,6 @@ export interface CrudAPIInterface {
   // Methods
 }
 
-export interface CrudAPIMethodsInterface {
-  // CRUD Methods
-  getAll(): any;
-  createOne(): any;
-  getOne(): any;
-  updateOne(): any;
-  patchOne(): any;
-  deleteOne(): any;
-}
-
 export abstract class BaseAPI {
   requests: ApiRequestInstance;
 
@@ -50,8 +40,8 @@ export abstract class BaseCRUDAPI<T, U> extends BaseAPI implements CrudAPIInterf
     return await this.requests.put<T>(this.itemRoute(itemId), payload);
   }
 
-  async patchOne(itemId: string, payload: T) {
-    return await this.requests.patch(this.itemRoute(itemId), payload);
+  async patchOne(itemId: string, payload: Partial<T>) {
+    return await this.requests.patch<T>(this.itemRoute(itemId), payload);
   }
 
   async deleteOne(itemId: string | number) {

frontend/api/admin/admin-groups.ts

@@ -49,6 +49,7 @@ export class AdminGroupsApi extends BaseCRUDAPI<GroupRead, GroupCreate> {
   itemRoute = routes.adminUsersId;
 
   async updateOne(id: number, payload: AdminGroupUpdate) {
-    return await this.requests.put<GroupRead>(this.itemRoute(id), payload);
+    // TODO: This should probably be a patch request, which isn't offered by the API currently
+    return await this.requests.put<GroupRead, AdminGroupUpdate>(this.itemRoute(id), payload);
   }
 }

frontend/api/class-interfaces/groups.ts

@@ -59,10 +59,10 @@ export interface Invitation {
 }
 
 export interface SetPermissions {
-  userId: number;
-  canInvite: boolean;
-  canManage: boolean;
-  canOrganize: boolean;
+  userId: string;
+  canInvite?: boolean;
+  canManage?: boolean;
+  canOrganize?: boolean;
 }
 
 export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
@@ -87,7 +87,8 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
   }
 
   async setPreferences(payload: UpdatePreferences) {
-    return await this.requests.put<Preferences>(routes.preferences, payload);
+    // TODO: This should probably be a patch request, which isn't offered by the API currently
+    return await this.requests.put<Preferences, UpdatePreferences>(routes.preferences, payload);
   }
 
   async createInvitation(payload: CreateInvitation) {
@@ -99,6 +100,7 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
   }
 
   async setMemberPermissions(payload: SetPermissions) {
-    return await this.requests.put<UserOut>(routes.permissions, payload);
+    // TODO: This should probably be a patch request, which isn't offered by the API currently
+    return await this.requests.put<Permissions, SetPermissions>(routes.permissions, payload);
   }
 }

frontend/api/class-interfaces/recipe-bulk-actions.ts

@@ -6,6 +6,7 @@ interface BasePayload {
 
 type exportType = "json";
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface RecipeBulkDelete extends BasePayload {}
 
 interface RecipeBulkExport extends BasePayload {

frontend/api/class-interfaces/recipes/recipe.ts

@@ -80,30 +80,13 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
   }
 
   async createOneByUrl(url: string) {
-    return await this.requests.post(routes.recipesCreateUrl, { url });
+    return await this.requests.post<string>(routes.recipesCreateUrl, { url });
   }
 
   async createManyByUrl(payload: BulkCreatePayload) {
     return await this.requests.post(routes.recipesCreateUrlBulk, payload);
   }
 
-  // Methods to Generate reference urls for assets/images *
-  recipeImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeSmallImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeTinyImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeAssetPath(recipeSlug: string, assetName: string) {
-    return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
-  }
-
   async parseIngredients(parser: Parser, ingredients: Array<string>) {
     parser = parser || "nlp";
     return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients });

frontend/api/class-interfaces/recipes/types.ts

@@ -1,5 +1,6 @@
 import { Category } from "../categories";
 import { Tag } from "../tags";
+import { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
 
 export type Parser = "nlp" | "brute";
 
@@ -12,26 +13,14 @@ export interface Confidence {
   food?: number;
 }
 
-export interface Unit {
-  name: string;
-  description: string;
-  fraction: boolean;
-  abbreviation: string;
-}
-
-export interface Food {
-  name: string;
-  description?: string;
-}
-
 export interface Ingredient {
-  referenceId: string;
-  title: string;
-  note: string;
-  unit: Unit | null;
-  food: Food | null;
-  disableAmount: boolean;
-  quantity: number;
+  title?: string;
+  note?: string;
+  unit?: IngredientUnit | CreateIngredientUnit;
+  food?: IngredientFood | CreateIngredientFood;
+  disableAmount?: boolean;
+  quantity?: number;
+  referenceId?: string;
 }
 
 export interface ParsedIngredient {

frontend/api/class-interfaces/upload.ts

@@ -2,6 +2,6 @@ import { BaseAPI } from "../_base";
 
 export class UploadFile extends BaseAPI {
   file(url: string, fileObject: any) {
-    return this.requests.post(url, fileObject);
+    return this.requests.post<string>(url, fileObject);
   }
 }

frontend/api/class-interfaces/utils.ts

@@ -11,10 +11,10 @@ export class UtilsAPI extends BaseAPI {
     }
 
     // @ts-ignore
-    const token: String = response.data.fileToken;
+    const token: string = response.data.fileToken;
 
     const tokenURL = prefix + "/utils/download?token=" + token;
     window.open(tokenURL, "_blank");
-    return await response;
+    return response;
   }
 }

frontend/api/requests.ts

@@ -1,47 +0,0 @@
-import axios, { AxiosResponse } from "axios";
-
-interface RequestResponse<T> {
-  response: AxiosResponse<T> | null;
-  data: T | null;
-  error: any;
-}
-
-const request = {
-  async safe<T>(funcCall: any, url: string, data: object = {}): Promise<RequestResponse<T>> {
-    const response = await funcCall(url, data).catch(function (error: object) {
-      console.log(error);
-      // Insert Generic Error Handling Here
-      return { response: null, error, data: null };
-    });
-    return { response, error: null, data: response.data };
-  },
-};
-
-export const requests = {
-  async get<T>(url: string, params = {}): Promise<RequestResponse<T>> {
-    let error = null;
-    const response = await axios.get<T>(url, { ...params }).catch((e) => {
-      error = e;
-    });
-    if (response != null) {
-      return { response, error, data: response?.data };
-    }
-    return { response: null, error, data: null };
-  },
-
-  async post<T>(url: string, data: object) {
-    return await request.safe<T>(axios.post, url, data);
-  },
-
-  async put<T>(url: string, data: object) {
-    return await request.safe<T>(axios.put, url, data);
-  },
-
-  async patch<T>(url: string, data: object) {
-    return await request.safe<T>(axios.patch, url, data);
-  },
-
-  async delete<T>(url: string) {
-    return await request.safe<T>(axios.delete, url);
-  },
-};