From 2c574c549fabfdd21217cd58cfd052a5c9bb4f77 Mon Sep 17 00:00:00 2001
From: androiddrew <bednar.andrew@gmail.com>
Date: Sun, 24 Feb 2019 17:40:11 -0500
Subject: [PATCH] Added progress bar hook calls within our EventShow component

---
 README.md                    | 16 +++++++++++++++-
 package-lock.json            |  5 +++++
 package.json                 |  1 +
 src/main.js                  |  2 ++
 src/services/EventService.js | 13 +++++++++++++
 5 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c9d8561..b5c6b1d 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 # real-world-vue
 
+## Course Take aways:
+
+- Installation of [NProgress](https://github.com/rstacruz/nprogress) to create a better experience for a user when they are interacting with our application.
+  - Axios Interceptors
+    - Not optimal for multiple API calls
+    - We do not want to show the user the template before the data is available.
+  - In-component Route Gaurds
+  - Global and Per-Route Gaurds (Unltimately will use this.)
+- Use the `npx json-server -d 1500 --watch ./db.json` command to simulate a slow network response.
+- Good reasons to use interceptors:
+  - On request to set authorization tokens
+  - On respinse to format or filter data before it reaches into your app
+  - On response to catch 401 not authorized responses
+
 ## Following along?
 
 We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.
@@ -18,7 +32,7 @@ We encourage you to follow the course on Vue Mastery, and code along with us. Th
 | 12 - Vuex Mutations & Actions Part 1 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-finish) |
 | 13 - Vuex Mutations & Actions Part 2 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-finish) |
 | 14 - Vuex Modules                    | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-start)              | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-finish)              |
-| 15 - Success & Error Notifications    | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-start)         | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-finish)         |
+| 15 - Success & Error Notifications   | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-start)        | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-finish)        |
 
 ## Project setup
 
diff --git a/package-lock.json b/package-lock.json
index 90af771..af2c278 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8547,6 +8547,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
diff --git a/package.json b/package.json
index 5e1bdb4..6d69c49 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.18.0",
     "json-server": "^0.14.2",
     "lodash": "^4.17.11",
+    "nprogress": "^0.2.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^1.5.3",
diff --git a/src/main.js b/src/main.js
index 6fd20b1..8d7c0e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,8 @@ import App from './App.vue'
 import router from './router'
 import store from './store/store'
 import BaseIcon from '@/components/BaseIcon'
+// Here we need the styles for nprogress
+import 'nprogress/nprogress.css'
 
 Vue.component('BaseIcon', BaseIcon)
 
diff --git a/src/services/EventService.js b/src/services/EventService.js
index e3c6418..8afd8ba 100644
--- a/src/services/EventService.js
+++ b/src/services/EventService.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import NProgress from 'nprogress'
 
 const apiClient = axios.create({
   baseURL: `http://localhost:3000`,
@@ -9,6 +10,18 @@ const apiClient = axios.create({
   }
 })
 
+// Interceptor definition. This is like middleware
+
+apiClient.interceptors.request.use(config => {
+  NProgress.start()
+  return config
+})
+
+apiClient.interceptors.response.use(response => {
+  NProgress.done()
+  return response
+})
+
 export default {
   getEvents(perPage, page) {
     return apiClient.get('/events?_limit=' + perPage + '&_page=' + page)