Added store actions to real api calls

2021-10-27 21:09:38 -04:00 · 2021-10-27 21:09:38 -04:00 · d85a1feb7b
commit d85a1feb7b
parent 4547e988cd
8 changed files with 181 additions and 144 deletions
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@ -0,0 +1,8 @@
+const endpoints = {
+    GetRouteInfoEndpoint: {
+        url: '/content/api/v1/content/RouteInfo',
+        method: 'POST'
+    }
+}
+
+export { endpoints }
--- a/src/constants/storeActions.js
+++ b/src/constants/storeActions.js
@ -0,0 +1,5 @@
+const storeActions = {
+    GET_ROUTE_INFO_ACTION: "getRouteInfo",
+}
+
+export { storeActions }
--- a/src/global-methods.js
+++ b/src/global-methods.js
@ -1,60 +1,30 @@
-import axios from 'axios';
-import { StatusCodes } from 'http-status-codes';
+import axios from "axios";

 export default {
-    callHttpClient({
-        method,
-        endpoint,
-        payload,
-        responseType = {},
-        ignoreErrors = false
-    }) {
-        return new Promise((resolve, reject) => {
-            // Grab our accessToken from Okta.         
-            const accessToken = this.getBearerTokenForStorage();
+  callHttpClient({ method, endpoint, payload, responseType = {} }) {
+    return new Promise((resolve, reject) => {

-            // Merge payload with analytics data   
-            const payloadAndAnalyticsData = Object.assign({}, payload, {
-                AppName: "Agency Advantage Dashboard"
-            });
+      const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable
+      const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass",});

-            axios({
-                    method: method,
-                    url: endpoint,
-                    //data: payloadAndAnalyticsData,
-                    crossdomain: true,
-                    responseType: responseType
-                    // headers: {
-                    //     Authorization: `Bearer ${accessToken}`
-                    // }
-                })
-                .then(function(response) {
-                    if (response.data.isSuccess || (response.status == 200)) {
-                        resolve(response);
-                    } else {
-                        reject(response);
-                    }
-                }, error => {
-                    let statusCode = error.response.status;
-                    let message = 'Sorry, something happened on our end. Please try again';
-                    if (!ignoreErrors) {
-                       switch (statusCode) {
-                            case StatusCodes.UNAUTHORIZED:
-                                this.createPromiseRejection("Unauthorized, routing back to login page.", error.response, reject, true, false);
-                                break;
-                            case StatusCodes.BAD_REQUEST:
-                                this.createPromiseRejection(error.response.data, error.response, reject, true, false);
-                                break;
-                        }
-                    }
-                });
-        })
-    },
-    getBearerTokenForStorage() {
-        try {
-            return JSON.parse(localStorage.getItem('okta-token-storage')).accessToken.accessToken;
-        } catch (error) {
-            return '';
+      axios({
+        method: method,
+        url: `${apiGatewayUrl}${endpoint}`,
+        data: payloadAndAnalyticsData,
+        crossDomain: true,
+        responseType: responseType,
+      }).then(
+        function (response) {
+          if (response.data.isSuccess || response.status == 200) {
+            resolve(response);
+          } else {
+            reject(response);
+          }
+        },
+        (error) => {
+          let statusCode = error.response.status;
        }
-    }
-}
+      );
+    });
+  },
+};
--- a/src/layouts/home/home.vue
+++ b/src/layouts/home/home.vue
@ -1,6 +1,6 @@
 <template>
    <div class="home">
        <h1>Home</h1>
-        <router-link to="/select-car">SelectCar</router-link>
+        <router-link to="/test">Test</router-link>
    </div>
 </template>
--- a/src/main.js
+++ b/src/main.js
@ -2,11 +2,19 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from './router';
 import store from '@/store';
-
+import baseMixin from "@/mixins/baseMixin.js";
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";

 //Get Bootstrap and Custom Styles
 import "./assets/scss/custom.scss";

-createApp(App).use(router).use(store).mount("#app");
+// Vue App Setup
+const vueApp = createApp(App);
+
+vueApp.use(router);
+vueApp.use(store);
+
+vueApp.mixin(baseMixin);
+
+vueApp.mount("#app");
--- a/src/mixins/baseMixin.js
+++ b/src/mixins/baseMixin.js
@ -0,0 +1,22 @@
+import { storeActions } from "@/constants/storeActions.js";
+
+export default {
+    methods: {
+        dispatchBlockingStoreAction(type, payload) {
+            // globalMethods.showWaitingModal(true);
+
+            return this.dispatchNonBlockingStoreAction(type, payload)
+                .finally(() => {
+                    // globalMethods.showWaitingModal(false);
+                });;
+        },
+        dispatchNonBlockingStoreAction(type, payload) {
+            return this.$store.dispatch(type, payload);
+        },
+    },
+    computed: {
+        storeActions() {
+            return storeActions;
+        },
+    },
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,7 +1,8 @@
 import { createWebHistory, createRouter } from "vue-router";
-import { getRouteData } from "@/router/dynamic-routing/route-compile.js";
+import { storeActions } from "@/constants/storeActions.js";
 import NotFound from "@/layouts/notFound/notFound.vue";
 import Home from "@/layouts/home/home.vue";
+import store from "@/store";

 const routes = [
  {
@ -12,12 +13,12 @@ const routes = [
  {
    path: "/",
    Name: "Home",
-    component: Home
+    component: Home,
  },
 ];

 const router = createRouter({
-  history: createWebHistory('/fmg/'),
+  history: createWebHistory("/fmg/"),
  routes,
 });

@ -26,18 +27,18 @@ router.beforeEach(async (to, from, next) => {
 });

 async function GoToDynamicRoute(to, next) {
-
  let doesRouteResolve = router.resolve(to.path).matched.length > 0;

-  console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
-
  if (!doesRouteResolve) {

-    let routeData = await getRouteData(to.path).catch((exp) => {
-      console.log(exp);
-      next({ name: "NotFound" }); // Go to 404.
-    });
+    store
+      .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,
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,81 +1,104 @@
-import { createStore } from 'vuex';
-import createPersistedState from 'vuex-persistedstate';
-import axios from 'axios';
-import globalMethods from '../global-methods'
-import router from '@/router';
+import { createStore } from "vuex";
+import { endpoints } from "@/constants/endpoints.js";
+import createPersistedState from "vuex-persistedstate";
+import axios from "axios";
+import globalMethods from "@/global-methods";
+import router from "@/router";

 export default createStore({
-    plugins: [createPersistedState({
-        storage: window.sessionStorage,
-    })],
-    state: {
-        makes: [], 
-        models: [],
-        styles: [],
-        year: '',
-        make: '',
-        model: '',
-        style: '',
-        slideTransition: 'none',
-        carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
-        blurImg: true
+  plugins: [
+    createPersistedState({
+      storage: window.sessionStorage,
+    }),
+  ],
+  state: {
+    makes: [],
+    models: [],
+    styles: [],
+    year: "",
+    make: "",
+    model: "",
+    style: "",
+    slideTransition: "none",
+    carImg:
+      "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
+    blurImg: true,
+  },
+  mutations: {
+    updateYear(state, data) {
+      state.year = data.year;
+      state.makes = data.makes;
+      state.slideTransition = "slide";
    },
-    mutations: {
-        updateYear(state, data){
-            state.year = data.year;
-            state.makes = data.makes;
-            state.slideTransition = 'slide'
-        },
-        updateMake(state, data){
-            state.make = data.make;
-            state.models = data.models.data.Result;
-            state.slideTransition = 'slide';
-        },
-        updateModel(state, data){
-            state.model = data.model;
-            state.styles = data.styles.data.Result;
-            state.slideTransition = 'slide';
-        },
-        updateStyle(state, data){
-            state.style = data.style;
-            state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
-            state.blurImg = false;
-            state.slideTransition = 'slide';
-        },
-        removeStyle(state) {
-            state.style = '';
-            state.blurImg = true;
-            state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg'
-        }
+    updateMake(state, data) {
+      state.make = data.make;
+      state.models = data.models.data.Result;
+      state.slideTransition = "slide";
    },
-    actions: {
-        async selectYear(context, year){
-            let makes = [];
-            await globalMethods.callHttpClient({
-                method: 'GET',
-                endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`,
-                payload: {},
-              })
-                .then(function (response) {
-                  makes = response.data.Result;
-                });
-            context.commit('updateYear', {year, makes});
-            router.push(`/select-make?year=${year}`);
+    updateModel(state, data) {
+      state.model = data.model;
+      state.styles = data.styles.data.Result;
+      state.slideTransition = "slide";
+    },
+    updateStyle(state, data) {
+      state.style = data.style;
+      state.carImg =
+        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
+      state.blurImg = false;
+      state.slideTransition = "slide";
+    },
+    removeStyle(state) {
+      state.style = "";
+      state.blurImg = true;
+      state.carImg =
+        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
+    },
+  },
+  actions: {
+    async selectYear(context, year) {
+      let makes = [];
+      await globalMethods
+        .callHttpClient({
+          method: "GET",
+          endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`,
+          payload: {},
+        })
+        .then(function (response) {
+          makes = response.data.Result;
+        });
+      context.commit("updateYear", { year, makes });
+      router.push(`/select-make?year=${year}`);
+    },
+    async selectMake({ commit, state }, make) {
+      const models = await axios.get(
+        `https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`
+      );
+      commit("updateMake", { make, models });
+      router.push(`/select-model?year=${state.year}&make=${make}`);
+    },
+    async selectModel({ commit, state }, model) {
+      const styles = await axios.get(
+        `https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`
+      );
+      commit("updateModel", { model, styles });
+      router.push(
+        `/select-style?year=${state.year}&make=${state.make}&model=${model}`
+      );
+    },
+    selectStyle({ commit, state }, style) {
+      commit("updateStyle", { style });
+      router.push(
+        `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
+      );
+    },
+    getRouteInfo(context, { relativeUrl }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetRouteInfoEndpoint.method,
+        endpoint: endpoints.GetRouteInfoEndpoint.url,
+        payload: {
+          relativeUrl: relativeUrl,
        },
-        async selectMake({commit, state}, make){
-            const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`);
-            commit('updateMake', {make, models});
-            router.push(`/select-model?year=${state.year}&make=${make}`);
-        },
-        async selectModel({commit, state}, model){
-            const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
-            commit('updateModel', {model, styles});
-            router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
-        },
-        selectStyle({commit, state}, style){
-            commit('updateStyle', {style});
-            router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`);
-        }
-    }
-
-})
+      });
+    },
+  },
+});