Create Vehicle page layout

layouts/default.vue

@@ -14,6 +14,7 @@ export default {
   fetchOnServer: false,
   async fetch() {
     const { store } = this.$nuxt.context;
+    if (!store.state.films.list.length) await store.dispatch("films/getList");
     if (!store.state.people.list.length) await store.dispatch("people/getList");
     if (!store.state.vehicles.list.length)
       await store.dispatch("vehicles/getList");
@@ -42,4 +43,8 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+
+main {
+  min-height: calc(100vh - 64px * 2);
+}
 </style>

pages/locations/_id.spec.js

@@ -1,6 +1,7 @@
 import { mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import Location from "./_id";
+import mockLocations from "@/test/fake-locations.json";
 
 let $route = {
   path: "/locations",
@@ -22,11 +23,25 @@ describe("Location page", () => {
     actions = {
       getLocation: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        locations: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Location page instance", () => {
-    const wrapper = mount(Location, { localVue, store });
+    const wrapper = mount(Location, {
+      localVue,
+      store,
+      computed: {
+        location: () => mockLocations[0]
+      }
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +62,10 @@ describe("Location page", () => {
   it("should dispatch getLocation action", async () => {
     let wrapper = mount(Location, {
       localVue,
-      store
+      store,
+      computed: {
+        location: () => mockLocations[0]
+      }
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/locations/_id.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Location",
@@ -21,10 +21,13 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getLocation", params.id);
+    if (!store.state.locations.location.id !== params.id)
+      await store.dispatch("locations/getLocation", params.id);
   },
   computed: {
-    ...mapState(["location"])
+    ...mapGetters({
+      location: "locations/location"
+    })
   }
 };
 </script>

pages/people/_id.spec.js

@@ -1,6 +1,7 @@
 import { mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import Person from "./_id";
+import mockPeople from "@/test/fake-people.json";
 
 let $route = {
   path: "/people",
@@ -22,11 +23,25 @@ describe("Person page", () => {
     actions = {
       getPerson: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        people: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Person page instance", () => {
-    const wrapper = mount(Person, { localVue, store });
+    const wrapper = mount(Person, {
+      localVue,
+      store,
+      computed: {
+        person: () => mockPeople[0]
+      }
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +62,10 @@ describe("Person page", () => {
   it("should dispatch getPerson action", async () => {
     let wrapper = mount(Person, {
       localVue,
-      store
+      store,
+      computed: {
+        person: () => mockPeople[0]
+      }
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/people/_id.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Person",
@@ -21,10 +21,13 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getPerson", params.id);
+    if (!store.state.people.person.id !== params.id)
+      await store.dispatch("people/getPerson", params.id);
   },
   computed: {
-    ...mapState(["person"])
+    ...mapGetters({
+      person: "people/person"
+    })
   }
 };
 </script>

pages/vehicles/_id.spec.js

@@ -1,6 +1,9 @@
 import { mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import Vehicle from "./_id";
+import mockVehicles from "@/test/fake-vehicles.json";
+import mockPeople from "@/test/fake-people.json";
+import mockFilms from "@/test/fake-films.json";
 
 let $route = {
   path: "/vehicles",
@@ -22,11 +25,28 @@ describe("Vehicle page", () => {
     actions = {
       getVehicle: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        vehicles: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Vehicle page instance", () => {
-    const wrapper = mount(Vehicle, { localVue, store });
+    const wrapper = mount(Vehicle, {
+      localVue,
+      store,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => mockPeople[0],
+        film: () => mockFilms[0]
+      },
+      stubs: ["nuxt-link"]
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +67,13 @@ describe("Vehicle page", () => {
   it("should dispatch getVehicle action", async () => {
     let wrapper = mount(Vehicle, {
       localVue,
-      store
+      store,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => jest.fn(),
+        film: () => jest.fn()
+      },
+      stubs: ["nuxt-link"]
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/vehicles/_id.vue

@@ -1,11 +1,45 @@
 <template>
-  <div>
-    {{ vehicle }}
+  <div
+    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
+  >
+    <article
+      class="mb-4 inline-flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+    >
+      <header class="p-4 rounded-t-md">
+        <h1>
+          {{ vehicle.name + " (" + vehicle.vehicle_class + ")" }}
+        </h1>
+        <h2 class="text-gray-700 mt-0" v-if="pilot">
+          piloted by
+          <nuxt-link
+            :to="`/people/${pilot.id}`"
+            class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+          >
+            {{ pilot.name }}
+          </nuxt-link>
+        </h2>
+      </header>
+
+      <section class="px-4 pb-4 infos">
+        <p>{{ vehicle.description }}</p>
+
+        <h3>
+          Appears in
+        </h3>
+        <nuxt-link
+          v-if="film"
+          :to="`/films/${film.id}`"
+          class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+        >
+          {{ film.title }}
+        </nuxt-link>
+      </section>
+    </article>
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Vehicle",
@@ -21,12 +55,26 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getVehicle", params.id);
+    if (!store.state.vehicles.vehicle.id !== params.id)
+      await store.dispatch("vehicles/getVehicle", params.id);
   },
   computed: {
-    ...mapState(["vehicle"])
+    pilot: function() {
+      return this.$store.getters["vehicles/getPilot"];
+    },
+    film: function() {
+      return this.$store.getters["vehicles/getFilm"];
+    },
+    ...mapGetters({
+      vehicle: "vehicles/vehicle"
+    })
   }
 };
 </script>
 
-<style></style>
+<style lang="css" scoped>
+article header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+</style>

store/people/index.js

@@ -25,7 +25,9 @@ export const actions = {
   },
   async getPerson({ commit }, id) {
     try {
-      const person = await this.$axios.$get(`/api/people/${id}`);
+      const person = await this.$axios.$get(
+        `/api/people/${id}?fields=id,name,gender,age,eye_color,hair_color,films`
+      );
       commit("setPerson", person);
     } catch (e) {
       throw Error(`API Error occurred: ${e.message}`);

store/vehicles/index.js

@@ -25,7 +25,9 @@ export const actions = {
   },
   async getVehicle({ commit }, id) {
     try {
-      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
+      const vehicle = await this.$axios.$get(
+        `/api/vehicles/${id}?fields=id,name,description,vehicle_class,length,pilot,films`
+      );
       commit("setVehicle", vehicle);
     } catch (e) {
       throw Error(`API Error occurred: ${e.message}`);
@@ -38,5 +40,15 @@ export const getters = {
   vehicle: state => state.vehicle,
   getVehiclesByFilmId: state => id => {
     return state.list.filter(vehicle => vehicle.films.split("/")[4] === id);
+  },
+  getPilot: (state, getters, rootState) => {
+    return rootState.people.list.find(
+      people => people.id === state.vehicle.pilot.split("/")[4]
+    );
+  },
+  getFilm: (state, getters, rootState) => {
+    return rootState.films.list.find(
+      film => film.id === state.vehicle.films.split("/")[4]
+    );
   }
 };