commit

azure-pipelines.yml

@@ -75,4 +75,8 @@ stages:
                         clearFolder: true
                         deployFolder: ''
                         region: us-east-2
-                    cfDistributionId: $(cfDistributionId)
+                    appDeployVariables:
+                      __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
+                      __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                    cfDistributionId: $(cfDistributionId)
+                

src/helpers/cms-content-helper.js

@@ -1,7 +1,8 @@
-import { dynamicStrings } from "../constants/dynamic-strings";
+import { dynamicStrings } from "@/constants/dynamic-strings";
+import { useMainStore } from '@/store';
 
 export function fetchCmsContentForPage(issPage) {
-    return this.mainStore.getPageData(issPage)
+    return useMainStore().getPageData(issPage)
       .then((response) => {
         const pageDataFromCms = {};
   
@@ -95,7 +96,7 @@ function mapStringToState(str) {
   
     for (const match of globalStateMatches) {
       // Reset store state for each match.
-      let storeState = this.mainStore.state;
+      let storeState = useMainStore().state;
   
       for (const s of match[2].split(".")) {
         if (storeState[s] != undefined) {

src/helpers/layout-helper.js

@@ -0,0 +1,28 @@
+export function settleAllPromises(promiseResultMap) {
+    // Pull our keys out of the promise 'table'
+    const promiseNames = Object.entries(promiseResultMap);
+  
+    return Promise.allSettled(
+      promiseNames.map((e) => e[1]).map((n) => n.promise)
+    ).then((results) => {
+      const resultMap = {};
+  
+      // Build a map of the results
+      for (let i = 0; i < results.length; ++i) {
+        const promiseName = promiseNames[i][1].resultKey;
+  
+        // Some Promises like the cms content call don't have a 'data' field
+        // when returned, so other promises do. Map the results to the object
+        // so that the object is the return data.
+  
+        if (results[i]?.value?.data === undefined) {
+          resultMap[promiseName] = results[i]?.value;
+        } else {
+          resultMap[promiseName] = results[i]?.value?.data;
+        }
+      }
+  
+      return resultMap;
+    });
+  }
+  

src/helpers/layout-helper.spec.js

@@ -0,0 +1,25 @@
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+it("layout-helper: Should settle all promises and return mapped promise results", () => {
+  // Arrange
+  const mockPromiseOne = Promise.resolve({ data: "test-data" });
+  const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
+
+  const promiseResultMap = [
+    {
+      resultKey: "MockResultOne",
+      promise: mockPromiseOne,
+    },
+    {
+      resultKey: "MockResultTwo",
+      promise: mockPromiseTwo,
+    },
+  ];
+
+  // Act
+  settleAllPromises(promiseResultMap).then((results) => {
+    // Assert
+    expect(results.MockResultOne).toEqual("test-data");
+    expect(results.MockResultTwo).toEqual("test-data-two");
+  });
+});

src/layouts/vehicle-year/vehicle-year.vue

@@ -12,10 +12,30 @@
 
 <script>
     import navButton from '@/common-components/nav-button/nav-button.vue';
+    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+    import { settleAllPromises } from "@/helpers/layout-helper";
 
     export default {
         name: 'vehicle-year',
         components: { navButton },
+        async beforeRouteEnter(to, from, next) 
+        {
+            // Call APIs
+            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+            // Settle promises and get results
+            const promiseResultMap = [
+                {
+                    resultKey: "cmsContent",
+                    promise: cmsContentPromise,
+                },
+            ];
+            
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+           
+        },
         methods:
         {
             updateVehicleYear(item) 

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue';
 import router from './router';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import { useMainStore,  } from '@/store';
+import { useMainStore } from '@/store';
 import baseMixin from "@/mixins/base-mixin.js";
 import { createPinia } from 'pinia';