More for dynamic routing

src/commonComponents/carAttributes/carAttributes.vue

@@ -1,15 +1,11 @@
 <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
+            <buttonPrimary :buttonText="attritbute" v-on:click="selectAttribute(attritbute)" buttonType="btn-funnel" />
-          :buttonText="attritbute"
-          v-on:click="selectAttribute(attritbute)"
-          buttonType="btn-funnel"
-        />
         </div>
     </div>
-  </form>
+</form>
 </template>
 
 <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,19 +1,17 @@
 <template>
-  <div>
+<div>
-    <baseTemplate
+    <baseTemplate :currentCarInfo="year" neededCarInfo="What make is your vehicle?" :backFunction="goBack">
-      :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",

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,22 +24,17 @@ 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)
-    store
+      .then((routeData) => {
-      .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: to.path })
-      .then((response) => {
-        console.log(response);
-      });
-
-      let routeData = [];
-      
         // Add our dynamic route.
         router.addRoute({
           path: routeData[0].path,
@@ -47,9 +43,42 @@ async function GoToDynamicRoute(to, next) {
         });
 
         next(to.fullPath);
+      })
+      .catch((error) => {
+        // Check status code, go to 404 page if 404.
+        console.log(error);
+      });
   } 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;