Fixing issues #3, #9, #11

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 handle bad person request', () => {
+    cy.visit('/#/people/41234')
+  })
+})

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "unfetch": "^3.0.0",
     "vue": "^2.5.16",
+    "vue-notification": "^1.3.7",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/components/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <main>
+      <notifications group="notifs" />
       <router-view />
     </main>
   </div>

src/components/Home.vue

@@ -8,7 +8,7 @@
       <div class="d-flex flex-wrap">
         <router-link
           v-for="(person, id) in results"
-          :to="`/people/${id}`"
+          :to="`/people/${id + 1}`"
           :key="id"
           class="card m-2"
           style="width: 12rem;">

src/components/PageNotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="container-fluid">
+    <h2>Uh oh, the force was not with that request.</h2>
+    <img
+        :src="'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/YODA_%283343464749%29.jpg/640px-YODA_%283343464749%29.jpg'"
+        alt="Yoda image">
+    <div class="row pt-3 pl-3">
+        <router-link
+          :to="`/`">
+        <button>Return home</button>
+        </router-link>
+    </div>
+  </div>
+</template>

src/components/Person.vue

@@ -1,25 +1,78 @@
 <template>
-  <div>
-    Person {{ $route.params.id }}
+  <div class="container">
+      <!--Only renders template if given results.-->
+      <div class="card p-3" v-if="results !== undefined || results.length !== 0">
+      <h1>{{results.name}}</h1>
+      <h4>Biography</h4>
+      <ul class="list-group pb-3" id="bio" >
+          <li class="list-group-item">Homeworld: <a :href="results.homeworld.url">{{ results.homeworld.name }}</a></li>
+          <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">Species: {{ results.species }}</li>
+          <li class="list-group-item">Hair color: {{ results.hair_color }}</li>
+          <li class="list-group-item">Eye color: {{ results.eye_color }}</li>
+          <li class="list-group-item">Skin color: {{ results.skin_color }}</li>
+        </ul>
+      <ul class="list-group pb-3">
+        <h4 v-if="results.starships===undefined || results.starships.length !== 0">Starships</h4> <!-- Only show starship if person has starships -->
+        <li v-for="starship in results.starships" class="list-group-item">
+          <a :href="starship.url">{{ starship.name }}</a>
+        </li>
+      </ul>
+      <ul class="list-group">
+        <h4 v-if="results.vehicles===undefined || results.vehicles.length !== 0">Vehicles</h4> <!-- Only show vehicles if person has vehicles -->
+        <li v-for="vehicle in results.vehicles" class="list-group-item">
+          <a :href="vehicle.url">{{ vehicle.name }}</a>
+        </li>
+      </ul>
+      <div class="row pt-3 pl-3">
+            <router-link
+              :to="`/`">
+            <button>Return home</button>
+            </router-link>
+      </div>
+    </div>
+    <div class="row" v-else>
+      <p>uh oh nothing to show here</p>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 
 import store from '@/store'
 
 export default {
   async beforeRouteEnter (to, from, next) {
-    await store.dispatch('people/get', to.params.id)
-    next()
+    const resp = await store.dispatch('people/getPerson', to.params.id)
+    // If we receive null back as a response, we redirect back to the home page
+    // due to the invalid request
+    if(resp === null) {
+      next('/')
+    } else {
+      next()
+    }
   },
   async beforeRouteUpdate (to, from, next) {
-    await store.dispatch('people/get', to.params.id)
-    next()
+    const resp = await store.dispatch('people/getPerson', to.params.id)
+    // Sends a quick notification that the request failed and
+    // then redirects back to the home page
+    if(resp === null) {
+      this.$notify({
+        group: 'notifs',
+        title: 'Error: ' + 'invalid path for a person',
+        text: 'Taking you back home.',
+        type: 'warn'
+      });
+      next('/')
+    } else {
+      next()
+    }
   },
   computed: {
-    ...mapGetters('people', ['person'])
-  }
+    ...mapState('people', ['results'])
+  },
 }
 </script>

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import Notifications from 'vue-notification'
 
 import router from '@/router'
 import store from '@/store'
@@ -8,5 +9,8 @@ import App from '@/components/App'
 // Create the Vue application instance.
 const app = new Vue({ router, store, render: h => h(App) })
 
+// Adding for notifications
+Vue.use(Notifications)
+
 // Mount the application to the element on the page with id="app".
 app.$mount('#app')

src/router.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter)
 
 const Home = () => import('@/components/Home')
 const Person = () => import('@/components/Person')
-
+const PageNotFound = () => import('@/components/PageNotFound')
 // Export a new Vue Router instance to be used in the application.
 export default new VueRouter({
   routes: [
@@ -17,6 +17,10 @@ export default new VueRouter({
     {
       path: '/people/:id',
       component: Vue.component('Person', Person)
+    },
+    {
+      path: '*',
+      component: Vue.component('PageNotFound', PageNotFound)
     }
   ]
 })

src/store/people.js

@@ -2,6 +2,18 @@ const initialState = () => ({
   results: []
 })
 
+// Helper function to fetch links from the API and return name
+// of starship/planet/vehicle/etc.
+async function renderAttributeName (url) {
+  const results = await fetch(url)
+    .then(function (response) {
+      if (response.ok) {
+        return response.json()
+      }
+    })
+  return results.name
+}
+
 // Export the module so it can be included in the main store.
 export default {
   // This module is namespaced so that it is a little more self-contained:
@@ -17,17 +29,67 @@ export default {
   actions: {
     async list ({ commit }, page = 1) {
       // Fetch People from SWAPI and await the response.
-      const response = await fetch('https://swapi.co/api/people')
-      // Parse the JSON string returned in the response into a JavaScript
-      // object and destructure the results property out of that object.
-      const { results } = await response.json()
-      if (response.ok) {
-        // If the response is OK commit the data to the store.
-        commit('results', results)
-      } else {
-        // If the response is not OK, log the response to the console.
-        console.error(response)
+      const results = await fetch('https://swapi.co/api/people')
+        .then(function (response) {
+          if (response.ok) {
+            return response.json()
+          }
+        })
+      commit('results', results.results)
+    },
+    async getPerson ({ commit }, id) {
+      // Fetch People from SWAPI and await the response.
+      const apiUrl = 'https://swapi.co/api/people/' + id
+
+      const results = await fetch(apiUrl)
+        .then(function (response) {
+          if (response.ok) {
+            return response.json()
+          } else {
+            return null
+          }
+        })
+      if (results === null) {
+        return null
+      }
+      const homeworldUrl = results.homeworld
+      const homeworld = await renderAttributeName(homeworldUrl)
+
+      // saving in this format for easy template rendering
+      results.homeworld = { 'name': homeworld, 'url': homeworldUrl }
+
+      const species = await renderAttributeName(results.species[0])
+      results.species = species
+
+      // Only fetch the vehicle names from the API if the person has vehicles
+      if (results.vehicles !== undefined || results.vehicles.length !== 0) {
+        let vehicles = []
+        for (var i = 0; i < results.vehicles.length; i++) {
+          var vehicleUrl = results.vehicles[i]
+          const vehicleName = await renderAttributeName(vehicleUrl)
+          vehicles[i] = {'name': vehicleName, 'url': vehicleUrl}
+        }
+        results.vehicles = vehicles
+      }
+
+      // Only fetch the starship names from the API if the person has starships
+      if (results.starships !== undefined || results.starships.length !== 0) {
+        let starships = []
+        for (var j = 0; j < results.starships.length; j++) {
+          var starshipUrl = results.starships[j]
+          const starshipName = await renderAttributeName(starshipUrl)
+          starships[j] = {'name': starshipName, 'url': starshipUrl}
+        }
+        results.starships = starships
       }
+
+      commit('results', results)
+      return results
+    }
+  },
+  getters: {
+    getResults: state => {
+      return state.results
     }
   }
 }

tests/person.test.js

@@ -0,0 +1,17 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+
+import store from '@/store'
+import Person from '@/components/Person'
+import 'isomorphic-fetch'
+import VueRouter from 'vue-router'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(VueRouter)
+
+test('Home renders correctly', () => {
+  const wrapper = mount(Person, { store, localVue })
+  expect(wrapper.html()).toMatchSnapshot()
+})