Do not store the whole product object from the API in the store

src/api/index.js

@@ -3,11 +3,17 @@ require('isomorphic-fetch');
 
 /**
  * TODO: Handle country/locale
+ * TODO: Handle errors
  */
 export default function (EAN) {
     return fetch(
         `https://world.openfoodfacts.org/api/v0/product/${EAN}.json`,
     )
         .then(response => response.json())
+        .then(response => ({
+            // Return a clean object with only interesting fields
+            icon: response.product.image_thumb_url,
+            name: response.product.product_name,
+        }))
         .catch(exc => console.error(`Unable to fetch product: ${exc}.`));
 }

src/store/actions.js

@@ -5,10 +5,7 @@ export default {
     getProduct({ commit }, { EAN }) {
         commit(types.IS_LOADING);
         getProduct(EAN).then(
-            (result) => {
+            product => commit(types.STORE_PRODUCT, { product }),
-                const { product } = result;
-                commit(types.STORE_PRODUCT, { product });
-            },
         );
     },
     setTitle({ commit }, { title }) {

src/store/mutations.js

@@ -14,7 +14,7 @@ export const mutations = {
     [types.STORE_PRODUCT](state, { product }) {
         state.product = product;
         state.isLoading = false;
-        state.ui.title = product.product_name;  // Set UI title
+        state.ui.title = product.name;  // Set UI title
     },
     [types.IS_LOADING](state) {
         state.isLoading = true;

src/views/Product.vue

@@ -5,7 +5,7 @@
             <v-layout row align-baseline>
                 <v-flex xs3 class="text-xs-center">
                     <v-avatar size="100%">
-                      <img :src="this.product.image_front_small_url" :alt="product.product_name">
+                      <img :src="this.product.icon" :alt="product.name">
                     </v-avatar>
                 </v-flex>
             </v-layout>