web/satellite: Setting.vue migrated to use composition api

added useLoading composable to get rid or repetative same code usage;

Change-Id: I3524efdb1919759046bbf11fe3510f8044adc828

web/satellite/src/components/account/AccountArea.vue

@@ -7,16 +7,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-/**
- * AccountArea is a container for all account related routes.
- */
-// @vue/component
-@Component
-export default class AccountArea extends Vue {}
-</script>
+<script setup lang="ts"></script>
 
 <style scoped lang="scss">
     ::-webkit-scrollbar,

web/satellite/src/components/account/SettingsArea.vue

@@ -82,124 +82,109 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
 
 import { USER_ACTIONS } from '@/store/modules/users';
 import { User } from '@/types/users';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify, useStore } from '@/utils/hooks';
+import { useLoading } from '@/composables/useLoading';
 
 import VButton from '@/components/common/VButton.vue';
 
 import ChangePasswordIcon from '@/../static/images/account/profile/changePassword.svg';
 import EmailIcon from '@/../static/images/account/profile/email.svg';
 import EditIcon from '@/../static/images/common/edit.svg';
 
-// @vue/component
-@Component({
-    components: {
-        EditIcon,
-        ChangePasswordIcon,
-        EmailIcon,
-        VButton,
-    },
-})
-export default class SettingsArea extends Vue {
-    public isLoading = false;
-
-    /**
-     * Lifecycle hook after initial render where user info is fetching.
-     */
-    public mounted(): void {
-        this.$store.dispatch(USER_ACTIONS.GET);
-    }
+const store = useStore();
+const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
+
+/**
+ * Returns user info from store.
+ */
+const user = computed((): User => {
+    return store.getters.user;
+});
+
+/**
+ * Returns first letter of user name.
+ */
+const avatarLetter = computed((): string => {
+    return store.getters.userName.slice(0, 1).toUpperCase();
+});
+
+/**
+ * Toggles enable MFA modal visibility.
+ */
+function toggleEnableMFAModal(): void {
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
+}
+
+/**
+ * Toggles disable MFA modal visibility.
+ */
+function toggleDisableMFAModal(): void {
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
+}
 
-    /**
-     * Generates user's MFA secret and opens popup.
-     */
-    public async enableMFA(): Promise<void> {
-        if (this.isLoading) return;
+/**
+ * Toggles MFA recovery codes modal visibility.
+ */
+function toggleMFACodesModal(): void {
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
+}
+
+/**
+ * Opens change password popup.
+ */
+function toggleChangePasswordModal(): void {
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
+}
 
-        this.isLoading = true;
+/**
+ * Opens edit account info modal.
+ */
+function toggleEditProfileModal(): void {
+    store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
+}
 
+/**
+ * Generates user's MFA secret and opens popup.
+ */
+async function enableMFA(): Promise<void> {
+    await withLoading(async () => {
         try {
-            await this.$store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_SECRET);
-            this.toggleEnableMFAModal();
+            await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_SECRET);
+            toggleEnableMFAModal();
         } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
+            await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
         }
+    });
+}
 
-        this.isLoading = false;
-    }
-
-    /**
-     * Toggles generate new MFA recovery codes popup visibility.
-     */
-    public async generateNewMFARecoveryCodes(): Promise<void> {
-        if (this.isLoading) return;
-
-        this.isLoading = true;
-
+/**
+ * Toggles generate new MFA recovery codes popup visibility.
+ */
+async function generateNewMFARecoveryCodes(): Promise<void> {
+    await withLoading(async () => {
         try {
-            await this.$store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES);
-            this.toggleMFACodesModal();
+            await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES);
+            toggleMFACodesModal();
         } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
+            await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
         }
-
-        this.isLoading = false;
-    }
-
-    /**
-     * Toggles enable MFA modal visibility.
-     */
-    public toggleEnableMFAModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
-    }
-
-    /**
-     * Toggles disable MFA modal visibility.
-     */
-    public toggleDisableMFAModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
-    }
-
-    /**
-     * Toggles MFA recovery codes modal visibility.
-     */
-    public toggleMFACodesModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
-    }
-
-    /**
-     * Opens change password popup.
-     */
-    public toggleChangePasswordModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
-    }
-
-    /**
-     * Opens edit account info modal.
-     */
-    public toggleEditProfileModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
-    }
-
-    /**
-     * Returns user info from store.
-     */
-    public get user(): User {
-        return this.$store.getters.user;
-    }
-
-    /**
-     * Returns first letter of user name.
-     */
-    public get avatarLetter(): string {
-        return this.$store.getters.userName.slice(0, 1).toUpperCase();
-    }
+    });
 }
+
+/**
+ * Lifecycle hook after initial render where user info is fetching.
+ */
+onMounted(() => {
+    store.dispatch(USER_ACTIONS.GET);
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/common/NewBillingAddCouponCodeInput.vue

@@ -35,21 +35,22 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify, useStore } from '@/utils/hooks';
+import { useLoading } from '@/composables/useLoading';
 
 import VInput from '@/components/common/VInput.vue';
 import ValidationMessage from '@/components/common/ValidationMessage.vue';
 import VButton from '@/components/common/VButton.vue';
 
 const store = useStore();
 const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
 
 const emit = defineEmits(['close']);
 
 const showValidationMessage = ref<boolean>(false);
 const isCodeValid = ref<boolean>(false);
 const errorMessage = ref<string>('');
 const couponCode = ref<string>('');
-const isLoading = ref<boolean>(false);
 
 const analytics = new AnalyticsHttpApi();
 
@@ -61,22 +62,20 @@ function setCouponCode(value: string): void {
  * Check if coupon code is valid
  */
 async function applyCouponCode(): Promise<void> {
-    if (isLoading.value) return;
-
-    isLoading.value = true;
-
-    try {
-        await store.dispatch(PAYMENTS_ACTIONS.APPLY_COUPON_CODE, couponCode.value);
-        await notify.success('Coupon Added!');
-        emit('close');
-    } catch (error) {
-        errorMessage.value = error.message;
-        isCodeValid.value = false;
-        showValidationMessage.value = true;
-        await analytics.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT);
-    } finally {
-        isLoading.value = false;
-    }
+    await withLoading(async () => {
+        try {
+            await store.dispatch(PAYMENTS_ACTIONS.APPLY_COUPON_CODE, couponCode.value);
+            await notify.success('Coupon Added!');
+            emit('close');
+        } catch (error) {
+            errorMessage.value = error.message;
+            isCodeValid.value = false;
+            showValidationMessage.value = true;
+            await analytics.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT);
+        } finally {
+            isLoading.value = false;
+        }
+    });
 }
 </script>
 

web/satellite/src/components/common/TablePagination.vue

@@ -19,9 +19,12 @@
 import { computed, ref } from 'vue';
 
 import { OnPageClickCallback } from '@/types/pagination';
+import { useLoading } from '@/composables/useLoading';
 
 import PaginationRightIcon from '@/../static/images/common/tablePaginationArrowRight.svg';
 
+const { withLoading } = useLoading();
+
 const props = withDefaults(defineProps<{
     totalPageCount?: number;
     limit?: number;
@@ -35,7 +38,6 @@ const props = withDefaults(defineProps<{
 });
 
 const currentPageNumber = ref<number>(1);
-const isLoading = ref<boolean>(false);
 
 const label = computed((): string => {
     const currentMaxPage = currentPageNumber.value * props.limit > props.totalItemsCount ?
@@ -56,28 +58,28 @@ const isLastPage = computed((): boolean => {
  * nextPage fires after 'next' arrow click.
  */
 async function nextPage(): Promise<void> {
-    if (isLastPage.value || isLoading.value) {
-        return;
-    }
+    await withLoading(async () => {
+        if (isLastPage.value) {
+            return;
+        }
 
-    isLoading.value = true;
-    await props.onPageClickCallback(currentPageNumber.value + 1);
-    incrementCurrentPage();
-    isLoading.value = false;
+        await props.onPageClickCallback(currentPageNumber.value + 1);
+        incrementCurrentPage();
+    });
 }
 
 /**
  * prevPage fires after 'previous' arrow click.
  */
 async function prevPage(): Promise<void> {
-    if (isFirstPage.value || isLoading.value) {
-        return;
-    }
+    await withLoading(async () => {
+        if (isFirstPage.value) {
+            return;
+        }
 
-    isLoading.value = true;
-    await props.onPageClickCallback(currentPageNumber.value - 1);
-    decrementCurrentPage();
-    isLoading.value = false;
+        await props.onPageClickCallback(currentPageNumber.value - 1);
+        decrementCurrentPage();
+    });
 }
 
 function incrementCurrentPage(): void {