web/satellite: refactor appstate store module to use enum for popups

This change refactors appstate, removing the big list of booleans Previously used to toggle modals and dropdowns, replacing them with enums. Issue: #5244 Change-Id: I4cffb7ab3ad7712f7ff79dd7486df938ca63830e
storj · Feb 15, 2023 · 109da3c · 109da3c
1 parent 0e1c99f
commit 109da3c
Show file tree

Hide file tree

Showing 65 changed files with 378 additions and 633 deletions.
diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
@@ -13,9 +13,9 @@
                 alt="Arrow down (expand)"
             />
         </div>
-        <BucketsDropdown 
-            v-if="isDropdownShown" 
-            :show-scrollbar="showScrollbar" 
+        <BucketsDropdown
+            v-if="isDropdownShown"
+            :show-scrollbar="showScrollbar"
         />
     </div>
 </template>
@@ -24,6 +24,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
 
@@ -43,14 +44,14 @@ export default class BucketsSelection extends Vue {
      * Toggles dropdown visibility.
      */
     public toggleDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
     }
 
     /**
      * Indicates if dropdown is shown.
      */
     public get isDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isBucketNamesDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.BUCKET_NAMES;
     }
 
     /**

diff --git a/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue b/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
@@ -26,6 +26,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
 
@@ -65,7 +66,7 @@ export default class DurationSelection extends Vue {
      * Toggles duration picker.
      */
     public togglePicker(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AG_DATE_PICKER);
     }
 
     /**
@@ -79,7 +80,7 @@ export default class DurationSelection extends Vue {
      * Indicates if date picker is shown.
      */
     public get isDurationPickerVisible(): boolean {
-        return this.$store.state.appStateModule.appState.isAGDatePickerShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AG_DATE_PICKER;
     }
 
     /**

diff --git a/web/satellite/src/components/account/SettingsArea.vue b/web/satellite/src/components/account/SettingsArea.vue
@@ -87,10 +87,12 @@ 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 { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
 import { useLoading } from '@/composables/useLoading';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 
@@ -120,35 +122,35 @@ const avatarLetter = computed((): string => {
  * Toggles enable MFA modal visibility.
  */
 function toggleEnableMFAModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
 }
 
 /**
  * Toggles disable MFA modal visibility.
  */
 function toggleDisableMFAModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
 }
 
 /**
  * Toggles MFA recovery codes modal visibility.
  */
 function toggleMFACodesModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
 }
 
 /**
  * Opens change password popup.
  */
 function toggleChangePasswordModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
 }
 
 /**
  * Opens edit account info modal.
  */
 function toggleEditProfileModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
 }
 
 /**

diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
@@ -97,6 +97,7 @@ import { AccountBalance } from '@/types/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import PeriodSelection from '@/components/account/billing/depositAndBillingHistory/PeriodSelection.vue';
 import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
@@ -157,14 +158,14 @@ export default class BillingArea extends Vue {
      * Indicates if free credits dropdown shown.
      */
     public get isCreditsDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isFreeCreditsDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.FREE_CREDITS;
     }
 
     /**
      * Indicates if available balance dropdown shown.
      */
     public get isBalanceDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isAvailableBalanceDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
     }
 
     /**
@@ -222,7 +223,7 @@ export default class BillingArea extends Vue {
      * Toggles available balance dropdown visibility.
      */
     public toggleBalanceDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AVAILABLE_BALANCE);
     }
 
     /**
@@ -231,7 +232,7 @@ export default class BillingArea extends Vue {
     public closeDropdown(): void {
         if (!this.isCreditsDropdownShown && !this.isBalanceDropdownShown) return;
 
-        this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
     }
 
     /**

diff --git a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
@@ -53,8 +53,9 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { Coupon } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 
@@ -126,7 +127,7 @@ const expirationHelper = computed((): string => {
  */
 function toggleCreateModal(): void {
     analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
 }
 
 /**

diff --git a/web/satellite/src/components/account/billing/coupons/CouponArea.vue b/web/satellite/src/components/account/billing/coupons/CouponArea.vue
@@ -57,8 +57,10 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { Coupon, CouponDuration } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -73,6 +75,14 @@ const notify = useNotify();
 
 const isCouponFetching = ref<boolean>(true);
 
+/**
+     * Opens Add Coupon modal.
+     */
+function onCreateClick(): void {
+    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
+}
+
 /**
  * Returns the coupon applied to the user's account.
  */
@@ -138,14 +148,6 @@ const expiration = computed((): string => {
     }
 });
 
-/**
- * Opens Add Coupon modal.
- */
-function onCreateClick(): void {
-    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
-}
-
 /**
  * Lifecycle hook after initial render.
  * Fetches coupon.

diff --git a/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue b/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
@@ -37,6 +37,7 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
 import SelectedIcon from '@/../static/images/account/billing/selected.svg';
@@ -59,8 +60,8 @@ const currentOption = ref<string>(periodOptions[0]);
 /**
  * Indicates if periods dropdown is shown.
  */
-const isDropdownShown = computed((): Date => {
-    return store.state.appStateModule.appState.isPeriodsDropdownShown;
+const isDropdownShown = computed((): boolean => {
+    return store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PERIODS;
 });
 
 /**
@@ -98,7 +99,7 @@ function closeDropdown(): void {
  * Toggles dropdown visibility.
  */
 function toggleDropdown(): void {
-    store.dispatch(APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN);
+    store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERIODS);
 }
 
 /**

diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
@@ -93,11 +93,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { Wallet } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -179,7 +181,7 @@ export default class AddTokenCardNative extends Vue {
      */
     public onAddTokensClick(): void {
         this.analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
     }
 
     /**

diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
@@ -64,6 +64,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import { PaymentAmountOption } from '@/types/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 // @vue/component
 @Component
@@ -102,14 +103,14 @@ export default class TokenDepositSelection3 extends Vue {
      * isSelectionShown flag that indicate is token amount selection shown.
      */
     public get isSelectionShown(): boolean {
-        return this.$store.state.appStateModule.appState.isPaymentSelectionShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PAYMENT_SELECTION;
     }
 
     /**
      * opens token amount selection.
      */
     public open(): void {
-        setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION, true), 0);
+        setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PAYMENT_SELECTION), 0);
     }
 
     /**
@@ -340,7 +341,7 @@ export default class TokenDepositSelection3 extends Vue {
         }
 
         &__custom-input::placeholder {
-            font-size: 14;
+            font-size: 14px;
         }
 
         &__custom-input::-webkit-inner-spin-button,

diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
@@ -214,10 +214,11 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { BrowserFile } from '@/types/browser';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { RouteConfig } from '@/router';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
 import eventBus from '@/utils/eventBus';
 import { Bucket } from '@/types/buckets';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@@ -432,7 +433,7 @@ function closeModalDropdown(): void {
  * Toggle the folder creation modal in the store.
  */
 function toggleFolderCreationModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
 }
 
 /**

diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue
@@ -109,9 +109,11 @@ import { computed, ref } from 'vue';
 import prettyBytes from 'pretty-bytes';
 
 import type { BrowserFile } from '@/types/browser';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import TableItem from '@/components/common/TableItem.vue';
 
@@ -202,7 +204,7 @@ const fileTypeIsFile = computed((): boolean => {
  */
 function openModal(): void {
     store.commit('files/setObjectPathForModal', props.path + props.file.Key);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
     store.dispatch('files/closeDropdown');
 }
 
@@ -372,7 +374,7 @@ function setShiftSelectedFiles(): void {
 function share(): void {
     store.dispatch('files/closeDropdown');
     store.commit('files/setObjectPathForModal', props.path + props.file.Key);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.SHARE_OBJECT);
 }
 
 /**

diff --git a/web/satellite/src/components/modals/AddCouponCodeModal.vue b/web/satellite/src/components/modals/AddCouponCodeModal.vue
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { RouteConfig } from '@/router';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
@@ -37,7 +38,7 @@ export default class AddCouponCodeModal extends Vue {
     */
     public onCloseClick(): void {
         this.analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
     }
 }
 </script>