From e9258553c64390e23c24fd1e2c5216080755c109 Mon Sep 17 00:00:00 2001
From: Sanskar Soni <sonisanskar223@gmail.com>
Date: Wed, 6 Sep 2023 16:38:26 +0530
Subject: [PATCH] Improved: how states should be accessed in component (#126)

---
 src/components/MenuFooterNavigation.vue | 43 +++++++++++--------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/MenuFooterNavigation.vue b/src/components/MenuFooterNavigation.vue
index ad1e13c..bb9a594 100644
--- 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>