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/composables/recipes/use-fraction.ts

@@ -1,7 +1,7 @@
 /* frac.js (C) 2012-present SheetJS -- http://sheetjs.com */
 /* https://developer.aliyun.com/mirror/npm/package/frac/v/0.3.0 Apache license */
 
-function frac(x: number, D: number, mixed: Boolean) {
+function frac(x: number, D: number, mixed: boolean) {
   let n1 = Math.floor(x);
   let d1 = 1;
   let n2 = n1 + 1;
@@ -33,7 +33,7 @@ function frac(x: number, D: number, mixed: Boolean) {
   const q = Math.floor(n1 / d1);
   return [q, n1 - q * d1, d1];
 }
-function cont(x: number, D: number, mixed: Boolean) {
+function cont(x: number, D: number, mixed: boolean) {
   const sgn = x < 0 ? -1 : 1;
   let B = x * sgn;
   let P_2 = 0;

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

@@ -2,6 +2,7 @@ import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
 import { Food } from "~/api/class-interfaces/recipe-foods";
+import { VForm} from "~/types/vuetify";
 
 let foodStore: Ref<Food[] | null> | null = null;
 

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

@@ -3,30 +3,28 @@ import { RecipeIngredient } from "~/types/api-types/recipe";
 
 const { frac } = useFraction();
 
-export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale: number = 1): string {
+export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
   if (disableAmount) {
-    return ingredient.note;
+    return ingredient.note || "";
   }
 
   const { quantity, food, unit, note } = ingredient;
 
-  const validQuantity = quantity !== null && quantity !== undefined && quantity !== 0;
-
   let returnQty = "";
-  if (unit?.fraction) {
-    const fraction = frac(quantity * scale, 10, true);
-    if (fraction[0] !== undefined && fraction[0] > 0) {
-      returnQty += fraction[0];
-    }
+  if (quantity !== undefined && quantity !== 0) {
+    if (unit?.fraction) {
+      const fraction = frac(quantity * scale, 10, true);
+      if (fraction[0] !== undefined && fraction[0] > 0) {
+        returnQty += fraction[0];
+      }
 
-    if (fraction[1] > 0) {
-      returnQty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
+      if (fraction[1] > 0) {
+        returnQty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
+      }
+    } else {
+      returnQty = (quantity * scale).toString();
     }
-  } else if (validQuantity) {
-    returnQty = (quantity * scale).toString();
-  } else {
-    returnQty = "";
   }
 
-  return `${returnQty} ${unit?.name || " "}  ${food?.name || " "} ${note}`.replace(/ {2,}/g, " ");
+  return `${returnQty} ${unit?.name || " "}  ${food?.name || " "} ${note || " "}`.replace(/ {2,}/g, " ");
 }

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

@@ -15,7 +15,7 @@ export const useRecipeMeta = (recipe: Ref<Recipe>) => {
         {
           hid: "og:desc",
           property: "og:description",
-          content: recipe?.value?.description,
+          content: recipe?.value?.description ?? "",
         },
         {
           hid: "og-image",
@@ -25,12 +25,12 @@ export const useRecipeMeta = (recipe: Ref<Recipe>) => {
         {
           hid: "twitter:title",
           property: "twitter:title",
-          content: recipe?.value?.name,
+          content: recipe?.value?.name ?? "",
         },
         {
           hid: "twitter:desc",
           property: "twitter:description",
-          content: recipe?.value?.description,
+          content: recipe?.value?.description ?? "",
         },
         { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
       ],

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

@@ -1,6 +1,7 @@
 import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
+import { VForm } from "~/types/vuetify";
 
 export const useTools = function (eager = true) {
   const workingToolData = reactive({

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

@@ -2,6 +2,7 @@ import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
 import { Unit } from "~/api/class-interfaces/recipe-units";
+import { VForm } from "~/types/vuetify";
 
 let unitStore: Ref<Unit[] | null> | null = null;
 

frontend/composables/recipes/use-recipe.ts

@@ -2,7 +2,7 @@ import { ref, onMounted } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { Recipe } from "~/types/api-types/recipe";
 
-export const useRecipe = function (slug: string, eager: boolean = true) {
+export const useRecipe = function (slug: string, eager = true) {
   const api = useUserApi();
   const loading = ref(false);
 

frontend/composables/recipes/use-recipes.ts

@@ -9,7 +9,7 @@ export const recentRecipes = ref<Recipe[] | null>([]);
 
 const rand = (n: number) => Math.floor(Math.random() * n);
 
-function swap(t: Array<any>, i: number, j: number) {
+function swap(t: Array<unknown>, i: number, j: number) {
   const q = t[i];
   t[i] = t[j];
   t[j] = q;
@@ -19,19 +19,19 @@ function swap(t: Array<any>, 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 = a.name?.toUpperCase() ?? "";
+      const textB = b.name?.toUpperCase() ?? "";
       return textA < textB ? -1 : textA > textB ? 1 : 0;
     });
   }
   function sortByCreated(list: Array<Recipe>) {
-    list.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    list.sort((a, b) => ((a.dateAdded ?? "") > (b.dateAdded ?? "") ? -1 : 1));
   }
   function sortByUpdated(list: Array<Recipe>) {
-    list.sort((a, b) => (a.dateUpdated > b.dateUpdated ? -1 : 1));
+    list.sort((a, b) => ((a.dateUpdated ?? "") > (b.dateUpdated ?? "") ? -1 : 1));
   }
   function sortByRating(list: Array<Recipe>) {
-    list.sort((a, b) => (a.rating > b.rating ? -1 : 1));
+    list.sort((a, b) => ((a.rating ?? 0) > (b.rating ?? 0) ? -1 : 1));
   }
 
   function randomRecipe(list: Array<Recipe>): Recipe {