web/satellite: migrate ShareObjectModal component to use SFC composition api

Change-Id: I9c7f7c6767489e161d9f44cc0c3b408fae81b84e

web/satellite/src/components/modals/ShareObjectModal.vue

@@ -39,12 +39,12 @@
     </VModal>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
 
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { useNotify, useStore } from '@/utils/hooks';
 
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -58,64 +58,54 @@ enum ButtonStates {
     Copied,
 }
 
-// @vue/component
-@Component({
-    components: {
-        CheckIcon,
-        ShareContainer,
-        VLoader,
-        VButton,
-        VModal,
-    },
-})
-export default class ShareObjectModal extends Vue {
-    private readonly ButtonStates = ButtonStates;
+const store = useStore();
+const notify = useNotify();
 
-    public isLoading = true;
-    public link = '';
-    public copyButtonState = ButtonStates.Copy;
+const isLoading = ref<boolean>(true);
+const link = ref<string>('');
+const copyButtonState = ref<ButtonStates>(ButtonStates.Copy);
 
-    /**
-     * Retrieve the path to the current file that has the fileShareModal opened from the store.
-     */
-    private get filePath(): void {
-        return this.$store.state.files.objectPathForModal;
-    }
+/**
+ * Retrieve the path to the current file that has the fileShareModal opened from the store.
+ */
+const filePath = computed((): string => {
+    return store.state.files.objectPathForModal;
+});
 
-    /**
-     * Lifecycle hook after initial render.
-     * Sets share link.
-     */
-    public async mounted(): Promise<void> {
-        this.link = await this.$store.state.files.fetchSharedLink(
-            this.filePath,
-        );
-        this.isLoading = false;
-    }
+/**
+ * Copies link to users clipboard.
+ */
+async function onCopy(): Promise<void> {
+    await navigator.clipboard.writeText(link.value);
+    copyButtonState.value = ButtonStates.Copied;
 
-    /**
-     * Copies link to users clipboard.
-     */
-    public async onCopy(): Promise<void> {
-        await this.$copyText(this.link);
-        this.copyButtonState = ButtonStates.Copied;
+    setTimeout(() => {
+        copyButtonState.value = ButtonStates.Copy;
+    }, 2000);
 
-        setTimeout(() => {
-            this.copyButtonState = ButtonStates.Copy;
-        }, 2000);
-
-        await this.$notify.success('Link copied successfully.');
-    }
-
-    /**
-     * Closes open bucket modal.
-     */
-    public closeModal(): void {
-        if (this.isLoading) return;
-
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
-    }
+    await notify.success('Link copied successfully.');
 }
+
+/**
+ * Closes open bucket modal.
+ */
+function closeModal(): void {
+    if (isLoading.value) return;
+
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
+}
+
+/**
+ * Lifecycle hook after initial render.
+ * Sets share link.
+ */
+onMounted(async (): Promise<void> => {
+    link.value = await store.state.files.fetchSharedLink(
+        filePath.value,
+    );
+
+    isLoading.value = false;
+});
 </script>
 
 <style scoped lang="scss">