Fix more typing issues (#928)

* Fix or comment several ts-ignores

* Fix typing related to BaseOverflowButton

* Remove unused functionality of useCookbooks, fix usage bug

* Fix more typing, add some comments

* Only allow ts-ignore if it has a comment

frontend/pages/recipe/_slug/cook.vue

@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
-// @ts-ignore
+// @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
 import { useStaticRoutes } from "~/composables/api";
 import { parseIngredientText, useRecipe } from "~/composables/recipes";

frontend/pages/recipe/_slug/index.vue

@@ -446,7 +446,7 @@ import {
   useRouter,
   onMounted,
 } from "@nuxtjs/composition-api";
-// @ts-ignore
+// @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
 import draggable from "vuedraggable";
 import { invoke, until } from "@vueuse/core";
@@ -469,9 +469,8 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
 import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe, RecipeTool } from "~/types/api-types/recipe";
 import { uuid4, deepCopy } from "~/composables/use-utils";
-import { Tool } from "~/api/class-interfaces/tools";
 import { useRouteQuery } from "~/composables/use-router";
 
 export default defineComponent({
@@ -505,9 +504,8 @@ export default defineComponent({
 
     console.log({ working: this.recipe, saved: this.originalRecipe });
 
-    if (this.form && !isSame) {
+    if (this.form && !isSame && this.recipe?.slug !== undefined) {
       if (window.confirm("You have unsaved changes. Do you want to save before leaving?")) {
-        // @ts-ignore
         await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
       }
     }
@@ -536,14 +534,11 @@ export default defineComponent({
     // ===============================================================
     // Check Before Leaving
 
-    const domSaveChangesDialog = ref(null);
-
     const state = reactive({
       form: false,
       scale: 1,
       hideImage: false,
       imageKey: 1,
-      loadFailed: false,
       skeleton: false,
       jsonEditor: false,
       jsonEditorOptions: {
@@ -567,11 +562,11 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    const { $vuetify } = useContext();
 
     // ===========================================================================
     // Layout Helpers
 
+    const { $vuetify } = useContext();
     const enableLandscape = computed(() => {
       const preferLandscape = recipe?.value?.settings?.landscapeView;
       const smallScreen = !$vuetify.breakpoint.smAndUp;
@@ -585,6 +580,10 @@ export default defineComponent({
       return false;
     });
 
+    const imageHeight = computed(() => {
+      return $vuetify.breakpoint.xs ? "200" : "400";
+    });
+
     // ===========================================================================
     // Button Click Event Handlers
 
@@ -604,6 +603,10 @@ export default defineComponent({
       }
     }
 
+    function printRecipe() {
+      window.print();
+    }
+
     async function closeEditor() {
       state.form = false;
       state.jsonEditor = false;
@@ -687,7 +690,10 @@ export default defineComponent({
     // ===============================================================
     // Recipe Tools
 
-    async function updateTool(tool: Tool) {
+    async function updateTool(tool: RecipeTool) {
+      if (tool.id === undefined)
+        return;
+      
       const { response } = await api.tools.updateOne(tool.id, tool);
 
       if (response?.status === 200) {
@@ -735,7 +741,6 @@ export default defineComponent({
     // ===============================================================
     // Metadata
 
-    // @ts-ignore
     const metaData = useRecipeMeta(recipe);
 
     useMeta(metaData);
@@ -743,9 +748,8 @@ export default defineComponent({
     return {
       createApiExtra,
       apiNewKey,
-      originalRecipe,
-      domSaveChangesDialog,
       enableLandscape,
+      imageHeight,
       scaledYield,
       toggleJson,
       ...toRefs(state),
@@ -754,6 +758,7 @@ export default defineComponent({
       loading,
       addStep,
       deleteRecipe,
+      printRecipe,
       closeEditor,
       updateTool,
       updateRecipe,
@@ -765,15 +770,5 @@ export default defineComponent({
     };
   },
   head: {},
-  computed: {
-    imageHeight() {
-      return this.$vuetify.breakpoint.xs ? "200" : "400";
-    },
-  },
-  methods: {
-    printRecipe() {
-      window.print();
-    },
-  },
 });
 </script>

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -135,7 +135,6 @@ export default defineComponent({
       if (data) {
         parsedIng.value = data;
 
-        // @ts-ignore
         errors.value = data.map((ing, index: number) => {
           const unitError = !checkForUnit(ing.ingredient.unit);
           const foodError = !checkForFood(ing.ingredient.food);

frontend/pages/recipe/create.vue

@@ -332,7 +332,8 @@ import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategory
 import { validators } from "~/composables/use-validators";
 import { Recipe } from "~/types/api-types/recipe";
 import { alert } from "~/composables/use-toast";
-import { VForm} from "~/types/vuetify";
+import { VForm } from "~/types/vuetify";
+import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 
 export default defineComponent({
   components: { VJsoneditor, RecipeCategoryTagSelector },
@@ -344,7 +345,7 @@ export default defineComponent({
 
     const { $globals } = useContext();
 
-    const tabs = [
+    const tabs: MenuItem[] = [
       {
         icon: $globals.icons.link,
         text: "Import with URL",
@@ -422,48 +423,36 @@ export default defineComponent({
 
     // ===================================================
     // Recipe URL Import
-    // @ts-ignore
-    const domUrlForm = ref<VForm>(null);
+    const domUrlForm = ref<VForm | null>(null);
 
     async function createByUrl(url: string) {
-      if (!domUrlForm.value.validate() || url === "") {
+      if (!domUrlForm.value?.validate() || url === "") {
         console.log("Invalid URL", url);
         return;
       }
       state.loading = true;
       const { response } = await api.recipes.createOneByUrl(url);
-      if (response?.status !== 201) {
-        // @ts-ignore
-        if (!response?.error?.response?.data?.detail?.message) {
-          state.error = true;
-        }
-
-        state.loading = false;
-        return;
-      }
       handleResponse(response);
     }
 
     // ===================================================
     // Recipe Create By Name
     const newRecipeName = ref("");
-    // @ts-ignore
-    const domCreateByName = ref<VForm>(null);
+    const domCreateByName = ref<VForm | null>(null);
 
     async function createByName(name: string) {
-      if (!domCreateByName.value.validate() || name === "") {
+      if (!domCreateByName.value?.validate() || name === "") {
         return;
       }
       const { response } = await api.recipes.createOne({ name });
       // TODO createOne claims to return a Recipe, but actually the API only returns a string
-      // @ts-ignore
+      // @ts-ignore See above
       handleResponse(response, true);
     }
 
     // ===================================================
     // Recipe Import From Zip File
-    // @ts-ignore
-    const newRecipeZip = ref<File>(null);
+    const newRecipeZip = ref<File | null>(null);
     const newRecipeZipFileName = "archive";
 
     async function createByZip() {