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/components/Domain/Recipe/RecipeCardMobile.vue

@@ -10,15 +10,7 @@
       <v-list-item three-line>
         <slot name="avatar">
           <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
-            <v-img
-              v-if="!fallBackImage"
-              :src="getImage(slug)"
-              @load="fallBackImage = false"
-              @error="fallBackImage = true"
-            ></v-img>
-            <v-icon v-else color="primary" class="icon-position" size="100">
-              {{ $globals.icons.primary }}
-            </v-icon>
+            <RecipeCardImage :icon-size="100" :height="125" :slug="slug" small :image-version="image"></RecipeCardImage>
           </v-list-item-avatar>
         </slot>
         <v-list-item-content>
@@ -61,15 +53,17 @@
   </v-expand-transition>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api";
-import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
-import RecipeContextMenu from "./RecipeContextMenu";
-import { useUserApi } from "~/composables/api";
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeCardImage from "./RecipeCardImage.vue";
+
 export default defineComponent({
   components: {
     RecipeFavoriteBadge,
     RecipeContextMenu,
+    RecipeCardImage,
   },
   props: {
     name: {
@@ -89,8 +83,9 @@ export default defineComponent({
       default: 0,
     },
     image: {
-      type: [String, null],
-      default: "",
+      type: String,
+      required: false,
+      default: "abc123",
     },
     route: {
       type: Boolean,
@@ -102,24 +97,14 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useUserApi();
+    const { $auth } = useContext();
+    const loggedIn = computed(() => {
+      return $auth.loggedIn;
+    });
 
-    return { api };
-  },
-  data() {
     return {
-      fallBackImage: false,
-    };
-  },
-  computed: {
-    loggedIn() {
-      return this.$store.getters.getIsLoggedIn;
-    },
-  },
-  methods: {
-    getImage(slug) {
-      return this.api.recipes.recipeSmallImage(slug, this.image);
-    },
+      loggedIn,
+    }
   },
 });
 </script>