feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue

@@ -6,44 +6,73 @@
       </v-icon>
       {{ $t("recipe.comments") }}
     </v-card-title>
-    <v-divider class="mx-2"></v-divider>
-    <div v-if="user.id" class="d-flex flex-column">
-      <div class="d-flex mt-3" style="gap: 10px">
-        <UserAvatar :tooltip="false" size="40" :user-id="user.id" />
+    <v-divider class="mx-2" />
+    <div
+      v-if="user.id"
+      class="d-flex flex-column"
+    >
+      <div
+        class="d-flex mt-3"
+        style="gap: 10px"
+      >
+        <UserAvatar
+          :tooltip="false"
+          size="40"
+          :user-id="user.id"
+        />
 
         <v-textarea
           v-model="comment"
-          hide-details=""
-          dense
+          hide-details
+          density="compact"
           single-line
-          outlined
+          variant="outlined"
           auto-grow
           rows="2"
           :placeholder="$t('recipe.join-the-conversation')"
-        >
-        </v-textarea>
+        />
       </div>
       <div class="ml-auto mt-1">
-        <BaseButton small :disabled="!comment" @click="submitComment">
-          <template #icon>{{ $globals.icons.check }}</template>
+        <BaseButton
+          size="small"
+          :disabled="!comment"
+          @click="submitComment"
+        >
+          <template #icon>
+            {{ $globals.icons.check }}
+          </template>
           {{ $t("general.submit") }}
         </BaseButton>
       </div>
     </div>
-    <div v-for="comment in recipe.comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
-      <UserAvatar :tooltip="false" size="40" :user-id="comment.userId" />
-      <v-card outlined class="flex-grow-1">
+    <div
+      v-for="recipeComment in recipe.comments"
+      :key="recipeComment.id"
+      class="d-flex my-2"
+      style="gap: 10px"
+    >
+      <UserAvatar
+        :tooltip="false"
+        size="40"
+        :user-id="recipeComment.userId"
+      />
+      <v-card
+        variant="outlined"
+        class="flex-grow-1"
+      >
         <v-card-text class="pa-3 pb-0">
-          <p class="">{{ comment.user.fullName }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
-          <SafeMarkdown :source="comment.text" />
+          <p class="">
+            {{ recipeComment.user.fullName }} • {{ $d(Date.parse(recipeComment.createdAt), "medium") }}
+          </p>
+          <SafeMarkdown :source="recipeComment.text" />
         </v-card-text>
         <v-card-actions class="justify-end mt-0 pt-0">
           <v-btn
-            v-if="user.id == comment.user.id || user.admin"
+            v-if="user.id == recipeComment.user.id || user.admin"
             color="error"
-            text
-            x-small
-            @click="deleteComment(comment.id)"
+            variant="text"
+            size="x-small"
+            @click="deleteComment(recipeComment.id)"
           >
             {{ $t("general.delete") }}
           </v-btn>
@@ -53,58 +82,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, toRefs, reactive } from "@nuxtjs/composition-api";
+<script lang="ts" setup>
 import { useUserApi } from "~/composables/api";
-import { Recipe } from "~/lib/api/types/recipe";
+import type { Recipe } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
-import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageUser } from "~/composables/recipe-page/shared-state";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
-export default defineComponent({
-  components: {
-    UserAvatar,
-    SafeMarkdown
-},
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const api = useUserApi();
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+const api = useUserApi();
+const { user } = usePageUser();
+const comment = ref("");
 
-    const { user } = usePageUser();
+async function submitComment() {
+  const { data } = await api.recipes.comments.createOne({
+    recipeId: recipe.value.id,
+    text: comment.value,
+  });
 
-    const state = reactive({
-      comment: "",
-    });
+  if (data) {
+    recipe.value.comments.push(data);
+  }
 
-    async function submitComment() {
-      const { data } = await api.recipes.comments.createOne({
-        recipeId: props.recipe.id,
-        text: state.comment,
-      });
+  comment.value = "";
+}
 
-      if (data) {
-        // @ts-ignore username is always populated here
-        props.recipe.comments.push(data);
-      }
+async function deleteComment(id: string) {
+  const { response } = await api.recipes.comments.deleteOne(id);
 
-      state.comment = "";
-    }
-
-    async function deleteComment(id: string) {
-      const { response } = await api.recipes.comments.deleteOne(id);
-
-      if (response?.status === 200) {
-        props.recipe.comments = props.recipe.comments.filter((comment) => comment.id !== id);
-      }
-    }
-
-    return { api, ...toRefs(state), submitComment, deleteComment, user };
-  },
-});
+  if (response?.status === 200) {
+    recipe.value.comments = recipe.value.comments.filter(comment => comment.id !== id);
+  }
+}
 </script>