Added progress bar hook calls within our EventShow component

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.

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",

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",

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)
 

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)