Improved: using appContext for getting states from the app instead of…

… creating user store for storing those states (#126)

src/components/MenuFooterNavigation.vue

@@ -4,32 +4,32 @@
     <ion-toolbar>
       <ion-item lines="none">
         <ion-label class="ion-text-wrap">
-          <p class="overline">{{ userStore.getInstanceUrl }}</p>
+          <p class="overline">{{ instanceUrl }}</p>
         </ion-label>
-        <ion-note slot="end">{{ userStore.getUserProfile?.userTimeZone }}</ion-note>
+        <ion-note slot="end">{{ userProfile?.userTimeZone }}</ion-note>
       </ion-item>
       <!-- showing product stores only when there are multiple options to choose from. -->
-      <ion-item v-if="userStore.getUserProfile?.stores?.length > 2" lines="none">
-        <ion-select interface="popover" :value="userStore.getCurrentEComStore.productStoreId" @ionChange="$emit('changeEcomStore', $event)">
-          <ion-select-option v-for="store in (userStore.getUserProfile?.stores ? userStore.getUserProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-select-option>
+      <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-select>
       </ion-item>
       <ion-item v-else lines="none">
         <ion-label class="ion-text-wrap">
-          {{ userStore.getCurrentEComStore.storeName }}
+          {{ 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="userStore.getShopifyConfigs?.length > 1 && userStore.getUserProfile?.stores?.length < 3" lines="none">
-        <ion-select interface="popover" :value="userStore.getCurrentShopifyConfig?.shopifyConfigId" @ionChange="$emit('changeShopifyConfig', $event)">
-          <ion-select-option v-for="shopifyConfig in userStore.getShopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId">{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
+      <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-select>
       </ion-item>
       <ion-item v-else lines="none">
         <ion-label class="ion-text-wrap">
-          <p>{{ userStore.getCurrentShopifyConfig.name ? userStore.getCurrentShopifyConfig.name : userStore.getCurrentShopifyConfig.shopifyConfigName }}</p>
+          <p>{{ currentShopifyConfig.name ? currentShopifyConfig.name : currentShopifyConfig.shopifyConfigName }}</p>
         </ion-label>
       </ion-item>
     </ion-toolbar>
@@ -38,8 +38,23 @@
 
 <script setup lang="ts">
 import { IonFooter, IonItem, IonLabel, IonNote, IonSelect, IonSelectOption, IonToolbar } from '@ionic/vue';
-import { useUserStore } from "../index";
+import { appContext } from "../index";
+import { computed } from 'vue';
 
-const userStore: any = useUserStore();
+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'];
+});
 
 </script>

src/index.ts

@@ -1,7 +1,6 @@
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { useUserStore } from "./store/user";
 import Login from "./components/Login";
 import { MenuFooterNavigation } from "./components";
 import ShopifyImg from "./components/ShopifyImg";
@@ -50,7 +49,6 @@ export {
   productIdentificationContext,
   useAuthStore,
   useProductIdentificationStore,
-  useUserStore,
   ShopifyImg,
   shopifyImgContext,
 }