Improved: how states should be accessed in component (#126)

hotwax · Sep 6, 2023 · e925855 · e925855
1 parent 8af6a8c
commit e925855
Showing 1 changed file with 19 additions and 24 deletions.
diff --git a/src/components/MenuFooterNavigation.vue b/src/components/MenuFooterNavigation.vue
@@ -4,32 +4,32 @@
     <ion-toolbar>
       <ion-item lines="none">
         <ion-label class="ion-text-wrap">
-          <p class="overline">{{ instanceUrl }}</p>
+          <p class="overline">{{ appUserState.instanceUrl }}</p>
         </ion-label>
-        <ion-note slot="end">{{ userProfile?.userTimeZone }}</ion-note>
+        <ion-note slot="end">{{ appUserState.userProfile?.userTimeZone }}</ion-note>
       </ion-item>
       <!-- showing product stores only when there are multiple options to choose from. -->
-      <ion-item v-if="userProfile?.stores?.length > 2" lines="none">
-        <ion-select interface="popover" :value="currentEComStore.productStoreId" @ionChange="$emit('changeEcomStore', $event)">
-          <ion-select-option v-for="store in (userProfile?.stores ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-select-option>
+      <ion-item v-if="appUserState.userProfile?.stores?.length > 2" lines="none">
+        <ion-select interface="popover" :value="appUserState.currentEComStore.productStoreId" @ionChange="$emit('changeEcomStore', $event)">
+          <ion-select-option v-for="store in (appUserState.userProfile?.stores ? appUserState.userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item v-else lines="none">
         <ion-label class="ion-text-wrap">
-          {{ currentEComStore.storeName }}
+          {{ appUserState.currentEComStore.storeName }}
         </ion-label>
       </ion-item>
       <!-- similarly, showing shopify configs only when there are multiple options to choose from 
       but if both product store and config have multiple options, then only option to choose
       product store will be visible -->
-      <ion-item v-if="shopifyConfigs?.length > 1 && userProfile?.stores?.length < 3" lines="none">
-        <ion-select interface="popover" :value="currentShopifyConfig?.shopifyConfigId" @ionChange="$emit('changeShopifyConfig', $event)">
-          <ion-select-option v-for="shopifyConfig in shopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId">{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
+      <ion-item v-if="appUserState.shopifyConfigs?.length > 1 && appUserState.userProfile?.stores?.length < 3" lines="none">
+        <ion-select interface="popover" :value="appUserState.currentShopifyConfig?.shopifyConfigId" @ionChange="$emit('changeShopifyConfig', $event)">
+          <ion-select-option v-for="shopifyConfig in appUserState.shopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId">{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item v-else lines="none">
         <ion-label class="ion-text-wrap">
-          <p>{{ currentShopifyConfig.name ? currentShopifyConfig.name : currentShopifyConfig.shopifyConfigName }}</p>
+          <p>{{ appUserState.currentShopifyConfig.name ? appUserState.currentShopifyConfig.name : appUserState.currentShopifyConfig.shopifyConfigName }}</p>
         </ion-label>
       </ion-item>
     </ion-toolbar>
@@ -41,20 +41,15 @@ import { IonFooter, IonItem, IonLabel, IonNote, IonSelect, IonSelectOption, IonT
 import { appContext } from "../index";
 import { computed } from 'vue';
 
-const instanceUrl = computed(() => {
-  return appContext.config.globalProperties.$store.getters['user/getInstanceUrl'];
-});
-const userProfile = computed(() => {
-  return appContext.config.globalProperties.$store.getters['user/getUserProfile'];
-});
-const currentEComStore = computed(() => {
-  return appContext.config.globalProperties.$store.getters['user/getCurrentEComStore'];
-});
-const shopifyConfigs = computed(() => {
-  return appContext.config.globalProperties.$store.getters['user/getShopifyConfigs'];
-});
-const currentShopifyConfig = computed(() => {
-  return appContext.config.globalProperties.$store.getters['user/getCurrentShopifyConfig'];
+const store = appContext.config.globalProperties.$store;
+const appUserState = computed(() => {
+  return {
+    instanceUrl: store.getters['user/getInstanceUrl'],
+    userProfile: store.getters['user/getUserProfile'],
+    currentEComStore: store.getters['user/getCurrentEComStore'],
+    shopifyConfigs: store.getters['user/getShopifyConfigs'],
+    currentShopifyConfig: store.getters['user/getCurrentShopifyConfig']
+  }
 });
 
 </script>