binxhealth#3 added person profile page. Still need to add links to re…

…lated resources

cypress/integration/home_spec.js

@@ -3,3 +3,20 @@ describe('Home', () => {
     cy.visit('/')
   })
 })
+describe('PageNotFound', () => {
+  it('should load error page', () => {
+    cy.visit('/#/thisisnotavalidpath')
+  })
+})
+
+describe('People', () => {
+  it('should load', () => {
+    cy.visit('/#/people/1')
+  })
+})
+
+describe('People', () => {
+  it('should flash notification banner', () => {
+    cy.visit('/#/people/234234')
+  })
+})

src/components/Person.vue

@@ -1,64 +1,81 @@
 <template>
-  <div>
-    <h1 @change="updatePersonAttributes">{{ attributes.name }} </h1>
+  <div class="container">
+    <h1>{{results.name}}</h1>
+
+    <ul class="list-group">
+      <li class="list-group-item">Birth year: {{ results.birth_year }}</li>
+      <li class="list-group-item">Height: {{ results.height }}</li>
+      <li class="list-group-item">Mass: {{ results.mass }}</li>
+      <li class="list-group-item">Eye color: {{ results.eye_color }}</li>
+      <li class="list-group-item">Skin color: {{ results.skin_color }}</li>  
+    </ul>
+    <div class="row pt-3 pl-3">
+          <router-link
+            :to="`/`">
+          <button>Return home</button>
+          </router-link>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 
 import store from '@/store'
+
 export default {
   async beforeRouteEnter (to, from, next) {
-    const action = await store.dispatch('people/getPerson', to.params.id)
-    const json = await action.json()
-    if(action.ok) {
-      console.log(json.name)
-      //attributes.name = json.name
-      next(vm => vm.updatePersonAttributes(json))
-    } else {
-      // If the response from the API is not ok, then we redirect to 404 page 
-      next (
-        {
-        path: '404'
-        }
-      )
-    }
+    await store.dispatch('people/getPerson', to.params.id)
+    next()
+    // if(action.ok) {
+    //   // const person = getResults
+    //   // attributes.name = json.name
+    //   // (vm => vm.updatePersonAttributes(action))
+    //   next()
+    // } else {
+    //   // If the response from the API is not ok, then we redirect to 404 page 
+    //   next (
+    //     {
+    //     path: '404'
+    //     }
+    //   )
+    // }
   },
   async beforeRouteUpdate (to, from, next) {
-    const action = await store.dispatch('people/getPerson', to.params.id)
-    const json = await action.json()
-    if(action.ok) {
-      console.log('Name of person: ' + json.name)
-      //attributes.name = json.name
-      next(vm => vm.updatePersonAttributes(json))
-    } else {
-    next({
-      path: '/'
-    })
-    this.$notify({
-      group: 'notifs',
-      title: 'Error',
-      type: 'warn',
-      text: 'Person ' + to.params.id + ' not found.'
-    })
-   }
-  },
-  data: function() {
-    return {
-      attributes: {
-        name: ''
-      }
-    }
-  },
-  methods: {
-    ...mapActions('getPerson', ['people/getPerson']),
-    updatePersonAttributes(json) {
-      this.attributes.name = json.name
-    },
+    await store.dispatch('people/getPerson', to.params.id)
+    next()
+    // console.log(action)
+    // console.log("Store.state: " + store.state.people.results)
+    // if(action.ok) {
+    //   // const person = getResults()
+    //   // console.log(person)
+    //   //attributes.name = json.name
+    //   //next(vm => vm.updatePersonAttributes(action))
+    //   next()
+    // } else {
+    // next({
+    //   path: '/'
+    // })
+    // this.$notify({
+    //   group: 'notifs',
+    //   title: 'Error',
+    //   type: 'warn',
+    //   text: 'Person ' + to.params.id + ' not found.'
+    // })
+   // }
   },
+  // data: function() {
+  //   return {
+  //     attributes: {
+  //       name: ''
+  //     }
+  //   }
+  // },
+  // methods: {
+  //   ...mapActions('attributes'),
+  // },
   computed: {
-    ...mapGetters('people', ['person'])
+    ...mapState('people', ['results'])
   }
 }
 </script>

src/store/people.js

@@ -23,6 +23,7 @@ export default {
       const { results } = await response.json()
       if (response.ok) {
         // If the response is OK commit the data to the store.
+        console.log('RESULTS: ' + results)
         commit('results', results)
       } else {
         // If the response is not OK, log the response to the console.
@@ -31,17 +32,30 @@ export default {
     },
     async getPerson ({ commit }, id) {
       // Fetch People from SWAPI and await the response.
-      const apiUrl = 'https://swapi.co/api/people/'
+      const apiUrl = 'https://swapi.co/api/people/' + id
 
       return new Promise((resolve, reject) => {
-        fetch(apiUrl + id)
+        fetch(apiUrl)
           .then(function (response) {
-            resolve(response)
+            if (response.ok) {
+              response.json()
+                .then(results => {
+                  console.log({results})
+                  commit('results', results)
+                  resolve(response)
+                })
+            }
           })
           .catch(function (error) {
             reject(error)
           })
       })
     }
+  },
+  getters: {
+    getResults: state => {
+      console.log(state.results)
+      return state.results
+    }
   }
 }