Collect Film's nested data on mounted (Locations/Vehicles/People)

pages/films/_id.vue

@@ -1,7 +1,36 @@
 <template>
-  <div>
-    {{ film }}
-  </div>
+  <section class="py-4">
+    <h1>
+      {{ film.title + " (" + film.release_date + ")" }}
+    </h1>
+    <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
+    <p>{{ film.description }}</p>
+    <p
+      class="film-score font-bold text-lg"
+      :class="{
+        'text-green-600': film.rt_score >= 75,
+        'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
+        'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
+        'text-red-600': film.rt_score >= 0 && film.rt_score < 25
+      }"
+    >
+      {{ film.rt_score + "%" }}
+    </p>
+    <section class="people">
+      <h3>People</h3>
+      <div>{{ film.people }}</div>
+    </section>
+
+    <section class="vehicles">
+      <h3>Vehicles</h3>
+      <div>{{ film.vehicles }}</div>
+    </section>
+
+    <section class="locations">
+      <h3>Locations</h3>
+      <div>{{ film.locations }}</div>
+    </section>
+  </section>
 </template>
 
 <script>
@@ -21,12 +50,18 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
+    if (!store.state.films.film.id !== params.id)
       await store.dispatch("films/getFilm", params.id);
   },
   computed: {
     ...mapGetters({
       film: "films/film"
     })
+  },
+  async mounted() {
+    await this.$store.dispatch("films/getPeople");
+    await this.$store.dispatch("films/getVehicles");
+    await this.$store.dispatch("films/getLocations");
   }
 };
 </script>

store/films/index.js

@@ -9,6 +9,15 @@ export const mutations = {
   },
   setFilm: (state, film) => {
     state.film = film;
+  },
+  setPeople: (state, people) => {
+    state.film.people = people;
+  },
+  setVehicles: (state, vehicles) => {
+    state.film.vehicles = vehicles;
+  },
+  setLocations: (state, locations) => {
+    state.film.locations = locations;
   }
 };
 
@@ -18,7 +27,7 @@ export const actions = {
       const films = await this.$axios.$get("/api/films");
       commit("setList", films);
     } catch (e) {
-      throw Error("API Error occurred.");
+      throw Error(`API Error occurred: ${e.message}`);
     }
   },
   async getFilm({ commit }, id) {
@@ -26,7 +35,73 @@ export const actions = {
       const film = await this.$axios.$get(`/api/films/${id}`);
       commit("setFilm", film);
     } catch (e) {
-      throw Error("API Error occurred.");
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getPeople({ commit, dispatch, state }) {
+    let people = {};
+    try {
+      if (state.film.people[0].split("/")[4] !== "") {
+        const promises = state.film.people.map(async person => {
+          const id = person.split("/")[4];
+          return await dispatch(
+            "people/getPerson",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        people = await Promise.all(promises);
+      }
+      commit("setPeople", people);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getVehicles({ commit, dispatch, state }) {
+    let vehicles = {};
+    try {
+      if (state.film.vehicles[0].split("/")[4] !== "") {
+        const promises = state.film.vehicles.map(async vehicle => {
+          const id = vehicle.split("/")[4];
+          return await dispatch(
+            "vehicles/getVehicle",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        vehicles = await Promise.all(promises);
+      }
+      commit("setVehicles", vehicles);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getLocations({ commit, dispatch, state }) {
+    let locations = {};
+    try {
+      if (state.film.locations[0].split("/")[4] !== "") {
+        const promises = state.film.locations.map(async location => {
+          const id = location.split("/")[4];
+          return await dispatch(
+            "locations/getLocation",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        locations = await Promise.all(promises);
+      }
+      commit("setLocations", locations);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
     }
   }
 };

store/locations/index.js

@@ -3,7 +3,7 @@ export const state = () => ({
 });
 
 export const mutations = {
-  setlocation: (state, location) => {
+  setLocation: (state, location) => {
     state.location = location;
   }
 };
@@ -15,7 +15,7 @@ export const actions = {
       if (callback) return location;
       commit("setLocation", location);
     } catch (e) {
-      throw Error("API Error occurred.");
+      throw Error(`API Error occurred: ${e.message}`);
     }
   }
 };

store/people/index.js

@@ -15,7 +15,7 @@ export const actions = {
       if (callback) return person;
       commit("setPerson", person);
     } catch (e) {
-      throw Error("API Error occurred.");
+      throw Error(`API Error occurred: ${e.message}`);
     }
   }
 };

store/vehicles/index.js

@@ -9,13 +9,13 @@ export const mutations = {
 };
 
 export const actions = {
-  async getvehicle({ commit }, { id, callback = false }) {
+  async getVehicle({ commit }, { id, callback = false }) {
     try {
       const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
       if (callback) return vehicle;
       commit("setVehicle", vehicle);
     } catch (e) {
-      throw Error("API Error occurred.");
+      throw Error(`API Error occurred: ${e.message}`);
     }
   }
 };