Basic OFF API implementation

This commit is contained in:
Lucas Verney 2017-09-19 04:28:26 +02:00
parent a2b8fac903
commit 762d2866b8
10 changed files with 115 additions and 10 deletions

View File

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

View File

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

13
src/api/index.js Normal file
View File

@ -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}.`));
}

View File

@ -1,13 +1,41 @@
<template> <template>
<div>
<template v-if="isLoading">
<p>Loading</p>
</template>
<template v-else>
<h2>{{ this.product.product_name }}</h2>
<table> <table>
<tr> <tr>
<th>Barcode</th> <th>Barcode</th>
<td>{{ $route.params.barcode }}</td> <td>{{ $route.params.barcode }}</td>
</tr> </tr>
</table> </table>
</template>
</div>
</template> </template>
<script> <script>
export default { 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> </script>

View File

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

14
src/store/actions.js Normal file
View File

@ -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 });
},
);
},
};

4
src/store/getters.js Normal file
View File

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

17
src/store/index.js Normal file
View File

@ -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()],
});

View File

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

16
src/store/mutations.js Normal file
View File

@ -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;
},
};