Add Skeleton for GridItem and Image + Refactor components architecture with more modularity + Delete Fruit feature

src/store/actions.js

@@ -9,25 +9,31 @@ export default {
       })
       .catch(err => {
         if (err.message === "Network Error") throw "Check API connectivity ...";
-      });
+      })
+      .finally(() => commit("setLoading", false));
   },
   getFruit: async ({ commit }, id) => {
-    const response = await axios.get(`http://localhost:3000/fruit/${id}`);
-    commit("setFruit", response.data);
+    await axios.get(`http://localhost:3000/fruit/${id}`).then(res => commit("setFruit", res.data));
   },
-  getImageFromUnsplash: async (_, keyword) => {
-    const response = await axios.get(
-      `https://api.unsplash.com/search/photos?query=${keyword}&w=800&h=400`,
-      {
+  removeFruit: async ({ commit }, id) => {
+    await axios
+      .delete(`http://localhost:3000/fruit/${id}`)
+      .then(() => commit("removeFruit", id))
+      .catch(err => console.log(err));
+  },
+  getImageFromUnsplash: async ({ commit }, keyword) => {
+    commit("setLoading", true);
+    return await axios
+      .get(`https://api.unsplash.com/search/photos?query=${keyword}&w=800&h=400`, {
         headers: {
           Authorization: "Client-ID NjFwGYsnksnzH2uh12W55aobUpTe0h06oSVACd5cWt0",
           "X-Total": 1
         }
-      }
-    );
-
-    if (response.data.total === 0) throw new Error("0 found.");
-
-    return response.data.results[0];
+      })
+      .then(res => {
+        if (res.data.total === 0) throw new Error("0 found.");
+        return res.data.results[0];
+      })
+      .finally(() => commit("setLoading", false));
   }
 };

src/store/getters.js

@@ -1,5 +1 @@
-export default {
-  parsedFruits: () => {
-    return [{ id: 1 }];
-  }
-};
+export default {};

src/store/index.js

@@ -7,7 +7,8 @@ import getters from "./getters";
 export const state = {
   fruits: [],
   fruit: {},
-  modalIsOpen: false
+  modalIsOpen: false,
+  loading: true
 };
 
 Vue.use(Vuex);

src/store/mutations.js

@@ -15,5 +15,8 @@ export default {
   },
   toggleModal: state => {
     state.modalIsOpen = !state.modalIsOpen;
+  },
+  setLoading: (state, loading) => {
+    state.loading = loading;
   }
 };