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,113 +92,92 @@
   </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({
+interface Props {
-  props: {
+  recipeId: string;
-    modelValue: {
+  name: string;
-      type: Boolean,
+}
-      default: false,
+const props = defineProps<Props>();
-    },
-    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);
-      },
-    });
 
-    const state = reactive({
+const dialog = defineModel<boolean>({ default: false });
-      datePickerMenu: false,
-      expirationDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
-      tokens: [] as RecipeShareToken[],
-    });
 
-    const expirationDateString = computed(() => {
+const datePickerMenu = ref(false);
-      return state.expirationDate.toISOString().substring(0, 10);
+const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
-    });
+const tokens = ref<RecipeShareToken[]>([]);
 
-    whenever(
+const expirationDateString = computed(() => {
-      () => props.modelValue,
+  return expirationDate.value.toISOString().substring(0, 10);
+});
+
+whenever(
+  () => 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();
   },
-    );
+);
 
-    const i18n = useI18n();
+const i18n = useI18n();
-    const $auth = useMealieAuth();
+const $auth = useMealieAuth();
-    const { household } = useHouseholdSelf();
+const { household } = useHouseholdSelf();
-    const route = useRoute();
+const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 
-    const firstDayOfWeek = computed(() => {
+const firstDayOfWeek = computed(() => {
   return household.value?.preferences?.firstDayOfWeek || 0;
-    });
+});
 
-    // ============================================================
+// ============================================================
-    // Token Actions
+// Token Actions
 
-    const userApi = useUserApi();
+const userApi = useUserApi();
 
-    async function createNewToken() {
+async function createNewToken() {
   // 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) {
+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() {
+async function refreshTokens() {
   const { data } = await userApi.recipes.share.getAll(1, -1, { recipe_id: props.recipeId });
 
   if (data) {
     // @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched.
-        state.tokens = data ?? [];
+    tokens.value = data ?? [];
-      }
   }
+}
 
-    const { share, isSupported: shareIsSupported } = useShare();
+const { share, isSupported: shareIsSupported } = useShare();
-    const { copy, copied, isSupported } = useClipboard();
+const { copy, copied, isSupported } = useClipboard();
 
-    function getRecipeText() {
+function getRecipeText() {
   return i18n.t("recipe.share-recipe-message", [props.name]);
-    }
+}
 
-    function getTokenLink(token: string) {
+function getTokenLink(token: string) {
   return `${window.location.origin}/g/${groupSlug.value}/shared/r/${token}`;
-    }
+}
 
-    async function copyTokenLink(token: string) {
+async function copyTokenLink(token: string) {
   if (isSupported.value) {
     await copy(getTokenLink(token));
     if (copied.value) {
@@ -211,9 +190,9 @@ export default defineNuxtComponent({
   else {
     alert.error(i18n.t("general.clipboard-not-supported") as string);
   }
-    }
+}
 
-    async function shareRecipe(token: string) {
+async function shareRecipe(token: string) {
   if (shareIsSupported) {
     share({
       title: props.name,
@@ -224,18 +203,5 @@ export default defineNuxtComponent({
   else {
     await copyTokenLink(token);
   }
-    }
+}
-
-    return {
-      ...toRefs(state),
-      expirationDateString,
-      dialog,
-      createNewToken,
-      deleteToken,
-      firstDayOfWeek,
-      shareRecipe,
-      copyTokenLink,
-    };
-  },
-});
 </script>