From bd79c1db2f57873f5219fd2ad69abd42d6fe1345 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sat, 7 Oct 2023 14:23:47 -0500
Subject: [PATCH] chore: Get Rid of Warnings (#2599)

* ignore unsafe html warnings

* remove unused import

* re-order attrs

* removed unused vars/imports

* removed unused import

* refactored v-html

* removed more unused things
---
 .../Domain/Recipe/RecipeIngredientHtml.vue           | 12 ++++++++++--
 .../Domain/Recipe/RecipeIngredientListItem.vue       |  2 +-
 frontend/components/Domain/Recipe/RecipeList.vue     |  5 ++++-
 .../Domain/Recipe/RecipePage/RecipePage.vue          |  1 -
 .../components/Domain/Recipe/RecipeTimelineItem.vue  |  2 +-
 .../Domain/ShoppingList/ShoppingListItem.vue         |  2 +-
 frontend/components/global/ImageCropper.vue          |  4 ++--
 .../composables/recipes/use-recipe-ingredients.ts    |  2 +-
 frontend/pages/group/mealplan/planner/edit.vue       |  4 +---
 frontend/pages/recipe/create/new.vue                 |  2 +-
 frontend/pages/shared/recipes/_id.vue                |  2 +-
 frontend/types/application-types.ts                  |  2 --
 12 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue b/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
index 46c2656800a2..324301951022 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
@@ -1,9 +1,11 @@
 <template>
-  <div v-html="markup"></div>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div v-html="safeMarkup"></div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
 export default defineComponent({
   props: {
     markup: {
@@ -11,5 +13,11 @@ export default defineComponent({
       required: true,
     },
   },
+  setup(props) {
+    const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
+    return {
+      safeMarkup,
+    }
+  }
 });
 </script>
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index 949d3c358445..bde6e75ba5a3 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, toRefs } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import { RecipeIngredient } from "~/lib/api/types/group";
 import { useParsedIngredientText } from "~/composables/recipes";
 
diff --git a/frontend/components/Domain/Recipe/RecipeList.vue b/frontend/components/Domain/Recipe/RecipeList.vue
index 258714349e1c..78f3c5e6b3b2 100644
--- a/frontend/components/Domain/Recipe/RecipeList.vue
+++ b/frontend/components/Domain/Recipe/RecipeList.vue
@@ -10,7 +10,10 @@
             {{ recipe.name }}
           </v-list-item-title>
           <v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
-          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
+          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-html="listItemDescriptions[index]"></div>
+          </v-list-item-subtitle>
         </v-list-item-content>
         <slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
       </v-list-item>
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index fc0567b07481..9dcea9439255 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -87,7 +87,6 @@ import {
   useRouter,
   computed,
   ref,
-  useMeta,
   onMounted,
   onUnmounted,
 } from "@nuxtjs/composition-api";
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 9c6a820d1d7c..4802cdc22f11 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -14,8 +14,8 @@
     <v-card
       hover
       :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
-      @click="$emit('selected')"
       class="elevation-12"
+      @click="$emit('selected')"
     >
       <v-card-title class="background">
         <v-row>
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index ae618021deda..0565e24ffb6b 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -35,7 +35,7 @@
                 content-class="text-caption"
               >
                 <template #activator="{ on: onBtn, attrs: attrsBtn }">
-                  <v-btn small class="ml-2" icon @click="displayRecipeRefs = !displayRecipeRefs" v-bind="attrsBtn" v-on="onBtn">
+                  <v-btn small class="ml-2" icon v-bind="attrsBtn" v-on="onBtn" @click="displayRecipeRefs = !displayRecipeRefs">
                     <v-icon>
                       {{ $globals.icons.potSteam }}
                     </v-icon>
diff --git a/frontend/components/global/ImageCropper.vue b/frontend/components/global/ImageCropper.vue
index b36e471b836c..a4c250e4a4f8 100644
--- a/frontend/components/global/ImageCropper.vue
+++ b/frontend/components/global/ImageCropper.vue
@@ -53,9 +53,9 @@ export default defineComponent({
             default: undefined,
         }
     },
-    setup(props, context) {
+    setup(_, context) {
         const cropper = ref<Cropper>();
-        const { $globals, $vuetify } = useContext();
+        const { $globals } = useContext();
 
         interface Control {
             color: string;
diff --git a/frontend/composables/recipes/use-recipe-ingredients.ts b/frontend/composables/recipes/use-recipe-ingredients.ts
index d975adc4dddd..e0b5d8481814 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.ts
@@ -3,7 +3,7 @@ import { useFraction } from "./use-fraction";
 import { RecipeIngredient } from "~/lib/api/types/recipe";
 const { frac } = useFraction();
 
-function sanitizeIngredientHTML(rawHtml: string) {
+export function sanitizeIngredientHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
     ALLOWED_TAGS: ["b", "q", "i", "strong", "sup"],
diff --git a/frontend/pages/group/mealplan/planner/edit.vue b/frontend/pages/group/mealplan/planner/edit.vue
index f19091bbede3..22e945283d01 100644
--- a/frontend/pages/group/mealplan/planner/edit.vue
+++ b/frontend/pages/group/mealplan/planner/edit.vue
@@ -210,14 +210,12 @@ import { defineComponent, computed, reactive, ref, watch, onMounted } from "@nux
 import { format } from "date-fns";
 import { SortableEvent } from "sortablejs";
 import draggable from "vuedraggable";
-import { watchDebounced } from "@vueuse/core";
 import { MealsByDate } from "./types";
 import { useMealplans, usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useUserApi } from "~/composables/api";
 import { useGroupSelf } from "~/composables/use-groups";
-import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 
 export default defineComponent({
@@ -333,7 +331,7 @@ export default defineComponent({
 
     const search = useRecipeSearch(api);
     const planTypeOptions = usePlanTypeOptions();
-    
+
     onMounted(async () => {
       await search.trigger();
     });
diff --git a/frontend/pages/recipe/create/new.vue b/frontend/pages/recipe/create/new.vue
index e1c4f4261ad6..ec916b7651b1 100644
--- a/frontend/pages/recipe/create/new.vue
+++ b/frontend/pages/recipe/create/new.vue
@@ -17,7 +17,7 @@
           :rules="[validators.required]"
           :hint="$t('recipe.new-recipe-names-must-be-unique')"
           persistent-hint
-          v-on:keyup.enter="createByName(newRecipeName)"
+          @keyup.enter="createByName(newRecipeName)"
         ></v-text-field>
       </v-form>
     </v-card-text>
diff --git a/frontend/pages/shared/recipes/_id.vue b/frontend/pages/shared/recipes/_id.vue
index ddd465d3e60e..bb451cbd50b4 100644
--- a/frontend/pages/shared/recipes/_id.vue
+++ b/frontend/pages/shared/recipes/_id.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
 import { usePublicApi } from "~/composables/api/api-client";
 
diff --git a/frontend/types/application-types.ts b/frontend/types/application-types.ts
index 7cf38135251a..060ce2d9e816 100644
--- a/frontend/types/application-types.ts
+++ b/frontend/types/application-types.ts
@@ -1,5 +1,3 @@
-import { TranslateResult } from "vue-i18n/types";
-
 export interface SideBarLink {
   icon: string;
   to?: string;