From 762d2866b838b6989dacbde1954332a81d4d19d3 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Tue, 19 Sep 2017 04:28:26 +0200
Subject: [PATCH] Basic OFF API implementation

---
 .eslintrc.js                 | 12 +++++++++--
 package.json                 |  5 +++--
 src/api/index.js             | 13 ++++++++++++
 src/components/Product.vue   | 40 ++++++++++++++++++++++++++++++------
 src/main.js                  |  2 ++
 src/store/actions.js         | 14 +++++++++++++
 src/store/getters.js         |  4 ++++
 src/store/index.js           | 17 +++++++++++++++
 src/store/mutations-types.js |  2 ++
 src/store/mutations.js       | 16 +++++++++++++++
 10 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 src/api/index.js
 create mode 100644 src/store/actions.js
 create mode 100644 src/store/getters.js
 create mode 100644 src/store/index.js
 create mode 100644 src/store/mutations-types.js
 create mode 100644 src/store/mutations.js

diff --git a/.eslintrc.js b/.eslintrc.js
index d859677..1be234d 100644
--- a/.eslintrc.js
+++ b/.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"]
+        }
+    ],
   }
-}
+};
diff --git a/package.json b/package.json
index 71b7461..916f871 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..4b687a1
--- /dev/null
+++ b/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}.`));
+}
diff --git a/src/components/Product.vue b/src/components/Product.vue
index 351dda6..433d232 100644
--- a/src/components/Product.vue
+++ b/src/components/Product.vue
@@ -1,13 +1,41 @@
 <template>
-    <table>
-        <tr>
-            <th>Barcode</th>
-            <td>{{ $route.params.barcode }}</td>
-        </tr>
-    </table>
+    <div>
+        <template v-if="isLoading">
+            <p>Loading…</p>
+        </template>
+        <template v-else>
+            <h2>{{ this.product.product_name }}</h2>
+            <table>
+                <tr>
+                    <th>Barcode</th>
+                    <td>{{ $route.params.barcode }}</td>
+                </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>
diff --git a/src/main.js b/src/main.js
index f4de9a7..b38c835 100644
--- a/src/main.js
+++ b/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 },
 });
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..c5f086c
--- /dev/null
+++ b/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 });
+            },
+        );
+    },
+};
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..d0d23dd
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,4 @@
+export default {
+    product: state => state.product,
+    isLoading: state => state.isLoading,
+};
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..1076c3f
--- /dev/null
+++ b/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()],
+});
diff --git a/src/store/mutations-types.js b/src/store/mutations-types.js
new file mode 100644
index 0000000..10e2640
--- /dev/null
+++ b/src/store/mutations-types.js
@@ -0,0 +1,2 @@
+export const IS_LOADING = 'IS_LOADING';
+export const STORE_PRODUCT = 'STORE_PRODUCT';
diff --git a/src/store/mutations.js b/src/store/mutations.js
new file mode 100644
index 0000000..84ae8d3
--- /dev/null
+++ b/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;
+    },
+};