Basic OFF API implementation

.eslintrc.js

@@ -36,6 +36,14 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     // Use 4 spaces indent
-    'indent': ['error', 4]
+    'indent': ['error', 4],
+    // Ignore assignment to state
+    'no-param-reassign': [
+        "error",
+        {
+            "props": true,
+            "ignorePropertyModificationsFor": ["state"]
         }
+    ],
   }
+};

package.json

@@ -14,10 +14,11 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "quagga": "^0.12.1",
+    "es6-promise": "^4.1.1",
+    "isomorphic-fetch": "^2.2.1",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0",
-    "webrtc-adapter": "^5.0.4"
+    "vuex": "^2.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/api/index.js

@@ -0,0 +1,13 @@
+require('es6-promise').polyfill();
+require('isomorphic-fetch');
+
+/**
+ * TODO
+ */
+export default function (EAN) {
+    return fetch(
+        `https://world.openfoodfacts.org/api/v0/product/${EAN}.json`,
+    )
+        .then(response => response.json())
+        .catch(exc => console.error(`Unable to fetch product: ${exc}.`));
+}

src/components/Product.vue

@@ -1,4 +1,10 @@
 <template>
+    <div>
+        <template v-if="isLoading">
+            <p>Loading…</p>
+        </template>
+        <template v-else>
+            <h2>{{ this.product.product_name }}</h2>
             <table>
                 <tr>
                     <th>Barcode</th>
@@ -6,8 +12,30 @@
                 </tr>
             </table>
         </template>
+    </div>
+</template>
 
 <script>
 export default {
+    created() {
+        this.fetchData();
+    },
+    watch: {
+        // Fetch again when the component is updated
+        $route: 'fetchData',
+    },
+    computed: {
+        product() {
+            return this.$store.getters.product;
+        },
+        isLoading() {
+            return this.$store.getters.isLoading;
+        },
+    },
+    methods: {
+        fetchData() {
+            this.$store.dispatch('getProduct', { EAN: this.$route.params.barcode });
+        },
+    },
 };
 </script>

src/main.js

@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+import store from './store';
 
 Vue.config.productionTip = false;
 
@@ -10,6 +11,7 @@ Vue.config.productionTip = false;
 new Vue({
     el: '#app',
     router,
+    store,
     template: '<App/>',
     components: { App },
 });

src/store/actions.js

@@ -0,0 +1,14 @@
+import getProduct from '@/api';
+import * as types from './mutations-types';
+
+export default {
+    getProduct({ commit }, { EAN }) {
+        commit(types.IS_LOADING);
+        getProduct(EAN).then(
+            (result) => {
+                const { product } = result;
+                commit(types.STORE_PRODUCT, { product });
+            },
+        );
+    },
+};

src/store/getters.js

@@ -0,0 +1,4 @@
+export default {
+    product: state => state.product,
+    isLoading: state => state.isLoading,
+};

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createLogger from 'vuex/dist/logger';  // TODO
+
+import actions from './actions';
+import getters from './getters';
+import { initialState as state, mutations } from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state,
+    actions,
+    getters,
+    mutations,
+    plugins: [createLogger()],
+});

src/store/mutations-types.js

@@ -0,0 +1,2 @@
+export const IS_LOADING = 'IS_LOADING';
+export const STORE_PRODUCT = 'STORE_PRODUCT';

src/store/mutations.js

@@ -0,0 +1,16 @@
+import * as types from './mutations-types';
+
+export const initialState = {
+    product: null,
+    isLoading: false,
+};
+
+export const mutations = {
+    [types.STORE_PRODUCT](state, { product }) {
+        state.product = product;
+        state.isLoading = false;
+    },
+    [types.IS_LOADING](state) {
+        state.isLoading = true;
+    },
+};