binxhealth#3 Finished (just need to write tests). Because planet/star…

…ship components are not available, just linking to API for now.

src/components/Person.vue

@@ -16,13 +16,13 @@
       <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">{{ starship }}</a>
+          <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">{{ vehicle }}</a>
+          <a :href="vehicle.url">{{ vehicle.name }}</a>
         </li>
       </ul>
       <div class="row pt-3 pl-3">
@@ -44,26 +44,13 @@ export default {
   async beforeRouteEnter (to, from, next) {
     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) {
     await store.dispatch('people/getPerson', to.params.id)
     next()
   },
   computed: {
     ...mapState('people', ['results'])
-  }
+  },
 }
 </script>

src/store/people.js

@@ -2,6 +2,19 @@ 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) {
+        console.log(response)
+        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:
@@ -35,6 +48,38 @@ export default {
             return response.json()
           }
         })
+      const homeworld = await renderAttributeName(results.homeworld)
+      results.homeworld = homeworld
+
+      const species = await renderAttributeName(results.species[0])
+      results.species = species
+
+      if (results.vehicles !== undefined || results.vehicles.length !== 0) {
+        console.log('has vehicles')
+        let vehicles = []
+        for (var i = 0; i < results.vehicles.length; i++) {
+          var vehicleUrl = results.vehicles[i]
+          console.log('vehicle url: ' + vehicleUrl)
+          const vehicleName = await renderAttributeName(vehicleUrl)
+          console.log('vehicle name: ' + vehicleName)
+          vehicles[i] = {'name': vehicleName, 'url': vehicleUrl}
+        }
+        results.vehicles = vehicles
+      }
+
+      if (results.starships !== undefined || results.starships.length !== 0) {
+        console.log('has vehicles')
+        let starships = []
+        for (var j = 0; j < results.starships.length; j++) {
+          var starshipUrl = results.starships[j]
+          console.log('vehicle url: ' + starshipUrl)
+          const starshipName = await renderAttributeName(starshipUrl)
+          console.log('vehicle name: ' + starshipName)
+          starships[j] = {'name': starshipName, 'url': starshipUrl}
+        }
+        results.starships = starships
+      }
+
       commit('results', results)
     }
   },