Cleanup, switched router over to use aysnc/await

This commit is contained in:
FrankRua 2022-01-14 16:36:30 -05:00
parent 5f8108e4b8
commit 3df24f131c
3 changed files with 26 additions and 59 deletions

View file

@ -35,7 +35,7 @@ export default {
},
computed: {},
beforeRouteEnter(to, from, next) {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const styleQuestionInitialDataPromise =

View file

@ -3,8 +3,6 @@ import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { widgetNames } from "@/constants/widget-names.js";
import { emitter } from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
export default {
data() {
@ -21,16 +19,6 @@ export default {
return store.dispatch(type, payload);
},
emitGlobalMessage(headline, copy, isDismissible, type) {
emitter.emit(globalEvents.GLOBAL_ALERT, {
globalAlertMessage: {
messageHeadline: headline,
messageCopy: copy,
isDismissible: isDismissible,
type: type
}
});
}
},
computed: {
storeActions() {

View file

@ -1,11 +1,8 @@
// Supporting files
import { createWebHistory, createRouter } from "vue-router";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import { routingTable } from "@/router/router-constants/routing-table.js";
import { globalEventTypes } from "@/constants/events";
import baseMixin from "@/mixins/base-mixin";
import store from "@/store";
// Components
@ -14,10 +11,6 @@ import AddressPOC from "@/layouts/address-poc/address-poc.vue";
const FUNNEL_START_PAGE = 'vehicle-year';
const routes = [
{
path: "/:pathMatch(.*)*",
name: "NotFound",
},
{
path: "/component-test", // This is a temporary route for testing.
name: "ComponentTest",
@ -30,7 +23,7 @@ const routes = [
},
{
path: "/",
beforeEnter(to, from, next) {
async beforeEnter(to, from, next) {
// If we have no query string, or we don't have the FmgPage query string.
if (to.query.fmgPage === undefined) {
GoToFunnelStartOn404(next);
@ -38,28 +31,21 @@ const routes = [
// If we already have our route, go to it.
if (router.hasRoute(to.query.fmgPage)) {
return next({name: to.query.fmgPage,query: to.query});
return next({ name: to.query.fmgPage, query: to.query });
}
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
GetRouteInfoFromPageName(to.query.fmgPage)
.then((routeData) => {
// Add our dynamic route.
router.addRoute({
path: routeData[0].path, // Always the same path, because we control it with query strings.
name: routeData[0].name,
component: routeData[0].component,
});
const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
// Assign current query string parameters, as well as our fmgPage one.
next({name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name })});
})
.catch((error) => {
// If we can't find the route, go to the last known page.
GoToFunnelStartOn404(next);
// Add our dynamic route.
router.addRoute({
path: routeData[0].path, // Always the same path, because we control it with query strings.
name: routeData[0].name,
component: routeData[0].component,
});
console.log("Cannot find route, navigating to last page:", error);
});
// Assign current query string parameters, as well as our fmgPage one.
next({ name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name }) });
}
},
},
@ -101,7 +87,7 @@ router.navigate = (
}
};
// Get navigation map depeding on the scenario and the current 'page' you're on.
// Get navigation map depending on the scenario and the current 'page' you're on.
router.getNavigationMap = (scenario, currentRoute) => {
const fmgPageValue = currentRoute.query.fmgPage;
const matchedQueryValue = routingTable
@ -125,29 +111,22 @@ function navigateToUrl(url) {
// Get route information by page name.
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
function GetRouteInfoFromPageName(pageName) {
return new Promise((resolve, reject) => {
store
.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName })
.then((response) => {
// Add our route data and return our array.
let jsonFromResponse = JSON.parse(response.data.Result);
let routeData = [];
async function GetRouteInfoFromPageName(pageName) {
const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName });
Object.keys(jsonFromResponse).forEach((key) => {
routeData.push({
path: "/",
name: `${key}`,
component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
});
});
// Add our route data and return our array.
const jsonFromResponse = JSON.parse(response.data.Result);
let routeData = [];
resolve(routeData);
})
.catch((error) => {
reject(error);
});
Object.keys(jsonFromResponse).forEach((key) => {
routeData.push({
path: "/",
name: `${key}`,
component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
});
});
return routeData;
}
// Go to our start page on a 404.