Create basic Person component + collect data by getter

store/films/index.js

@@ -9,22 +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;
   }
 };
 
 export const actions = {
   async getList({ commit }) {
     try {
-      const films = await this.$axios.$get("/api/films");
+      const films = await this.$axios.$get(
+        "/api/films?fields=id,title,release_date,director,description,rt_score"
+      );
       commit("setList", films);
     } catch (e) {
       throw Error(`API Error occurred: ${e.message}`);
@@ -32,77 +25,13 @@ export const actions = {
   },
   async getFilm({ commit }, id) {
     try {
-      const film = await this.$axios.$get(`/api/films/${id}`);
+      const film = await this.$axios.$get(
+        `/api/films/${id}?fields=id,title,release_date,director,description,rt_score`
+      );
       commit("setFilm", film);
     } catch (e) {
       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/people/index.js

@@ -1,18 +1,31 @@
 export const state = () => ({
+  list: [],
   person: {}
 });
 
 export const mutations = {
+  setList: (state, people) => {
+    state.list = people;
+  },
   setPerson: (state, person) => {
     state.person = person;
   }
 };
 
 export const actions = {
-  async getPerson({ commit }, { id, callback = false }) {
+  async getList({ commit }) {
+    try {
+      const people = await this.$axios.$get(
+        "/api/people?fields=id,name,gender,age,eye_color,hair_color,films"
+      );
+      commit("setList", people);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getPerson({ commit }, id) {
     try {
       const person = await this.$axios.$get(`/api/people/${id}`);
-      if (callback) return person;
       commit("setPerson", person);
     } catch (e) {
       throw Error(`API Error occurred: ${e.message}`);
@@ -21,5 +34,11 @@ export const actions = {
 };
 
 export const getters = {
-  person: state => state.person
+  list: state => state.list,
+  person: state => state.person,
+  getPeopleByFilmId: state => id => {
+    return state.list.filter(person =>
+      person.films.find(film => film.split("/")[4] === id)
+    );
+  }
 };