issue binxhealth#5 add planets

src/components/Home.vue

@@ -1,36 +1,52 @@
 <template>
   <div class="container pt-4 pb-4">
-
     <section>
-
       <h2>People</h2>
 
       <div class="d-flex flex-wrap">
         <router-link
-          v-for="(person, id) in results"
-          :to="`/people/${id}`"
+          v-for="(person, id) in peopleList"
           :key="id"
+          :to="`/people/${id}`"
           class="card m-2"
           style="width: 12rem;">
-
           <img
             :src="`https://starwars-visualguide.com/assets/img/characters/${id + 1}.jpg`"
             class="card-img-top"
             alt="Card image cap">
 
           <div class="card-body">
-
             <h5 class="card-title m-0">
               {{ person.name }}
             </h5>
-
           </div>
-
         </router-link>
       </div>
-
     </section>
 
+    <section>
+      <h2>Planets</h2>
+
+      <div class="d-flex flex-wrap">
+        <router-link
+          v-for="(planet, id) in planetList"
+          :key="id"
+          :to="`/planets/${id}`"
+          class="card m-2"
+          style="width: 12rem;">
+          <img
+            :src="`https://starwars-visualguide.com/assets/img/planets/${id + 2}.jpg`"
+            class="card-img-top"
+            alt="Card image cap">
+
+          <div class="card-body">
+            <h5 class="card-title m-0">
+              {{ planet.name }}
+            </h5>
+          </div>
+        </router-link>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -40,12 +56,15 @@ import { mapState } from 'vuex'
 import store from '@/store'
 
 export default {
-  async beforeRouteEnter(to, from, next) {
+  async beforeRouteEnter (to, from, next) {
     await store.dispatch('people/list')
+    await store.dispatch('planets/listPlanets')
     next()
   },
   computed: {
-    ...mapState('people', ['results'])
+    ...mapState('people', { peopleList: 'results' }),
+    ...mapState('planets', { planetList: 'results' })
+
   }
 }
 </script>

src/components/Planet.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <ul
+      class="list-group"
+      style="width: 40vw; margin-left: 30vw">
+      <li
+        v-for="(value, key, index) in planets[$route.params.id]"
+        :key="index"
+        class="list-group-item">
+        <p class="font-weight-bold">
+          {{ key }}
+        </p>
+        <div v-if="key !=='residents' && key !=='films' && key !=='url'">
+          {{ value }}
+        </div>
+
+        <div v-else>
+          <div v-if="key !=='url'">
+            <div
+              v-for="(link, linkIndex) in value"
+              :key="linkIndex">
+              <a :href="link">{{ link }}</a>
+            </div>
+          </div>
+
+          <div v-else>
+            <a :href="value">{{ value }}</a>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import store from '@/store'
+
+export default {
+  async beforeRouteEnter (to, from, next) {
+    await store.dispatch('planets/listPlanets', to.params.id)
+    next()
+  },
+  async beforeRouteUpdate (to, from, next) {
+    await store.dispatch('planets/listPlanets', to.params.id)
+    next()
+  },
+  computed: {
+    ...mapGetters('planets', ['planets'])
+  }
+}
+</script>

src/router.js

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

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import people from '@/store/people'
+import planets from '@/store/planets'
 
 // Instruct Vue to use the Vuex plugin.
 Vue.use(Vuex)
@@ -11,6 +12,7 @@ export default new Vuex.Store({
   // Modules are mini-state stores that can be combined into the main state
   // tree: https://vuex.vuejs.org/guide/modules.html
   modules: {
-    people
+    people,
+    planets
   }
 })

src/store/planets.js

@@ -0,0 +1,33 @@
+const initialState = () => ({
+  results: []
+})
+
+// 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:
+  // https://vuex.vuejs.org/guide/modules.html#namespacing
+  namespaced: true,
+  // https://vuex.vuejs.org/guide/state.html
+  state: initialState,
+  // https://vuex.vuejs.org/guide/mutations.html
+  mutations: {
+    results: (state, results = []) => (state.results = results)
+  },
+  // https://vuex.vuejs.org/guide/actions.html
+  actions: {
+    async listPlanets ({ commit }, page = 1) {
+      const response = await fetch('https://swapi.co/api/planets')
+      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)
+      }
+    }
+  },
+  getters: {
+    planets: state => state.results
+  }
+}