feat(frontend): 👷 Add image operations to recipe page

Added/Fixed image upload/get process on the recipe pages as well as some additional styling

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -22,7 +22,9 @@
 
 <script>
 import { api } from "@/api";
-export default {
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+export default defineComponent({
   props: {
     slug: {
       type: String,
@@ -37,6 +39,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   computed: {
     user() {
       return this.$auth.user;
@@ -48,14 +55,14 @@ export default {
   methods: {
     async toggleFavorite() {
       if (!this.isFavorite) {
-        await api.users.addFavorite(this.$auth.user.id, this.slug);
+        await this.api.users.addFavorite(this.$auth.user.id, this.slug);
       } else {
-        await api.users.removeFavorite(this.$auth.user.id, this.slug);
+        await this.api.users.removeFavorite(this.$auth.user.id, this.slug);
       }
-      this.$store.dispatch("requestUserData");
+      this.$auth.fetchUser();
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -40,12 +40,21 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
-export default {
+export default defineComponent({
   props: {
-    slug: String,
+    slug: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
   },
   data: () => ({
     url: "",
@@ -57,7 +66,7 @@ export default {
     },
     async getImageFromURL() {
       this.loading = true;
-      if (await api.recipes.updateImagebyURL(this.slug, this.url)) {
+      if (await this.api.recipes.updateImagebyURL(this.slug, this.url)) {
         this.$emit(REFRESH_EVENT);
       }
       this.loading = false;
@@ -66,7 +75,7 @@ export default {
       return this.slug ? [""] : [this.$i18n.t("recipe.save-recipe-before-use")];
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped></style>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -17,8 +17,9 @@
 </template>
 
 <script>
-import { api } from "@/api";
-export default {
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+export default defineComponent({
   props: {
     emitOnly: {
       type: Boolean,
@@ -41,6 +42,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   data() {
     return {
       rating: 0,
@@ -60,14 +66,14 @@ export default {
         this.$emit("input", val);
         return;
       }
-      api.recipes.patch({
+      this.api.recipes.patchOne(this.slug, {
         name: this.name,
         slug: this.slug,
         rating: val,
       });
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped></style>