More for dynamic routing

src/commonComponents/carAttributes/carAttributes.vue

@@ -1,28 +1,24 @@
 <template>
-  <form class="list-view d-flex">
+<form class="list-view d-flex">
     <div class="car_list">
-      <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-        <buttonPrimary
-          :buttonText="attritbute"
-          v-on:click="selectAttribute(attritbute)"
-          buttonType="btn-funnel"
-        />
-      </div>
+        <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
+            <buttonPrimary :buttonText="attritbute" v-on:click="selectAttribute(attritbute)" buttonType="btn-funnel" />
+        </div>
     </div>
-  </form>
+</form>
 </template>
 
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 
 export default {
-  name: "CarAttributes",
-  props: {
-    attritbutes: Array,
-    selectAttribute: Function,
-  },
-  components: {
-    buttonPrimary,
-  },
+    name: "CarAttributes",
+    props: {
+        attritbutes: Array,
+        selectAttribute: Function,
+    },
+    components: {
+        buttonPrimary,
+    },
 };
 </script>

src/global-methods.js

@@ -3,9 +3,10 @@ import axios from "axios";
 export default {
   callHttpClient({ method, endpoint, payload, responseType = {} }) {
     return new Promise((resolve, reject) => {
-
       const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable
-      const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass",});
+      const payloadAndAnalyticsData = Object.assign({}, payload, {
+        AppName: "FixMyGlass",
+      });
 
       axios({
         method: method,
@@ -14,7 +15,7 @@ export default {
         crossDomain: true,
         responseType: responseType,
       }).then(
-        function (response) {
+        (response) => {
           if (response.data.isSuccess || response.status == 200) {
             resolve(response);
           } else {
@@ -22,7 +23,7 @@ export default {
           }
         },
         (error) => {
-          let statusCode = error.response.status;
+          return reject(error.response);
         }
       );
     });

src/layouts/home/home.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="home">
         <h1>Home</h1>
-        <router-link to="/test">Test</router-link>
+        <router-link to="/testc">Test</router-link>
     </div>
 </template>

src/layouts/selectMake/selectMake.vue

@@ -1,37 +1,35 @@
 <template>
-  <div>
-    <baseTemplate
-      :currentCarInfo="year"
-      neededCarInfo="What make is your vehicle?"
-      :backFunction="goBack"
-    >
-      <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
+<div>
+    <baseTemplate :currentCarInfo="year" neededCarInfo="What make is your vehicle?" :backFunction="goBack">
+        <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
     </baseTemplate>
-  </div>
+</div>
 </template>
 
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import { mapState } from "vuex";
+import {
+    mapState
+} from "vuex";
 
 export default {
-  name: "SelectCar",
-  computed: {
-    ...mapState(["year", "makes"]),
-  },
-  methods: {
-    selectMake(make) {
-      this.$store.dispatch("selectMake", make);
+    name: "SelectCar",
+    computed: {
+        ...mapState(["year", "makes"]),
     },
-    goBack() {
-      this.$store.state.slideTransition = "slide_reverse";
-      this.$router.push("/select-year");
+    methods: {
+        selectMake(make) {
+            this.$store.dispatch("selectMake", make);
+        },
+        goBack() {
+            this.$store.state.slideTransition = "slide_reverse";
+            this.$router.push("/select-year");
+        },
+    },
+    components: {
+        baseTemplate,
+        carAttributes,
     },
-  },
-  components: {
-    baseTemplate,
-    carAttributes,
-  },
 };
 </script>

src/router/dynamic-routing/component-loader.js

@@ -1,3 +1,3 @@
 export function lazyLoadComponent(componentName) {
-  return () => import(`@/layouts/${componentName}.vue`);
+  return () => import(`@/layouts/${componentName}.vue`); // /selectModel/SelectModel
 }

src/router/dynamic-routing/route-compile.js

@@ -1,30 +0,0 @@
-import axios from "axios";
-import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
-
-export function getRouteData(relativeUrl) {
-  return axios
-    .post("/api/v1/content/RouteInfo", {
-      relativeUrl: relativeUrl,
-    })
-    .then((response) => {
-      // This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
-      if (response.data.Result === undefined) {
-        return Promise.reject("Could not find any details about given route.");
-      }
-
-      // Get our route data
-      let json = JSON.parse(response.data.Result);
-      let routeData = [];
-
-      // Push the item onto the array
-      Object.keys(json).forEach((key) => {
-        routeData.push({
-          path: `${json[key].RelativeUrl}`,
-          name: `${key}`,
-          component: lazyLoadComponent(json[key].LayoutName),
-        });
-      });
-
-      return Promise.resolve(routeData);
-    });
-}

src/router/index.js

@@ -1,5 +1,6 @@
 import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/storeActions.js";
+import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import NotFound from "@/layouts/notFound/notFound.vue";
 import Home from "@/layouts/home/home.vue";
 import store from "@/store";
@@ -23,33 +24,61 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  await GoToDynamicRoute(to, next);
+  NavigateToDynamicCmsRoute(to, next);
 });
 
-async function GoToDynamicRoute(to, next) {
+// Go to route if page exists in the CMS.
+// If not, go to 404 page.
+function NavigateToDynamicCmsRoute(to, next) {
   let doesRouteResolve = router.resolve(to.path).matched.length > 0;
 
   if (!doesRouteResolve) {
+    GetRouteInfoForUrl(to.path)
+      .then((routeData) => {
+        // Add our dynamic route.
+        router.addRoute({
+          path: routeData[0].path,
+          name: routeData[0].name,
+          component: routeData[0].component,
+        });
 
-    store
-      .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: to.path })
-      .then((response) => {
-        console.log(response);
+        next(to.fullPath);
+      })
+      .catch((error) => {
+        // Check status code, go to 404 page if 404.
+        console.log(error);
       });
-
-      let routeData = [];
-      
-    // Add our dynamic route.
-    router.addRoute({
-      path: routeData[0].path,
-      name: routeData[0].name,
-      component: routeData[0].component,
-    });
-
-    next(to.fullPath);
   } else {
     next(); // Home (/) and NotFound (/not-found) will always resolve.
   }
 }
 
+// Get the route info for the given url.
+// This will hit the content service and eventually the Cms.
+// If the route is not found, reject Promise.
+function GetRouteInfoForUrl(url) {
+  return new Promise((resolve, reject) => {
+    store
+      .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: url })
+      .then((response) => {
+        // Add our route data and return our array.
+        let jsonFromResponse = JSON.parse(response.data.Result);
+        let routeData = [];
+
+        Object.keys(jsonFromResponse).forEach((key) => {
+          routeData.push({
+            path: `${jsonFromResponse[key].RelativeUrl}`,
+            name: `${key}`,
+            component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
+          });
+        });
+
+        resolve(routeData);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
 export default router;