Recipe Share Dialog

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -14,14 +14,14 @@
           max-width="290px"
           min-width="auto"
         >
-          <template #activator="{ props }">
+          <template #activator="{ props: activatorProps }">
             <v-text-field
               v-model="expirationDateString"
               :label="$t('recipe-share.expiration-date')"
               :hint="$t('recipe-share.default-30-days')"
               persistent-hint
               :prepend-icon="$globals.icons.calendar"
-              v-bind="props"
+              v-bind="activatorProps"
               readonly
             />
           </template>
@@ -92,56 +92,35 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import type { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import { useHouseholdSelf } from "~/composables/use-households";
 import { alert } from "~/composables/use-toast";
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    recipeId: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    // V-Model Support
-    const dialog = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
+interface Props {
+  recipeId: string;
+  name: string;
+}
+const props = defineProps<Props>();
 
-    const state = reactive({
-      datePickerMenu: false,
-      expirationDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
-      tokens: [] as RecipeShareToken[],
-    });
+const dialog = defineModel<boolean>({ default: false });
+
+const datePickerMenu = ref(false);
+const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
+const tokens = ref<RecipeShareToken[]>([]);
 
 const expirationDateString = computed(() => {
-      return state.expirationDate.toISOString().substring(0, 10);
+  return expirationDate.value.toISOString().substring(0, 10);
 });
 
 whenever(
-      () => props.modelValue,
+  () => dialog.value,
   () => {
     // Set expiration date to today + 30 Days
     const today = new Date();
-        state.expirationDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
+    expirationDate.value = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
     refreshTokens();
   },
 );
@@ -165,17 +144,17 @@ export default defineNuxtComponent({
   // Convert expiration date to timestamp
   const { data } = await userApi.recipes.share.createOne({
     recipeId: props.recipeId,
-        expiresAt: state.expirationDate.toISOString(),
+    expiresAt: expirationDate.value.toISOString(),
   });
 
   if (data) {
-        state.tokens.push(data);
+    tokens.value.push(data);
   }
 }
 
 async function deleteToken(id: string) {
   await userApi.recipes.share.deleteOne(id);
-      state.tokens = state.tokens.filter(token => token.id !== id);
+  tokens.value = tokens.value.filter(token => token.id !== id);
 }
 
 async function refreshTokens() {
@@ -183,7 +162,7 @@ export default defineNuxtComponent({
 
   if (data) {
     // @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched.
-        state.tokens = data ?? [];
+    tokens.value = data ?? [];
   }
 }
 
@@ -225,17 +204,4 @@ export default defineNuxtComponent({
     await copyTokenLink(token);
   }
 }
-
-    return {
-      ...toRefs(state),
-      expirationDateString,
-      dialog,
-      createNewToken,
-      deleteToken,
-      firstDayOfWeek,
-      shareRecipe,
-      copyTokenLink,
-    };
-  },
-});
 </script>