diff --git a/src/pages/Customers.vue b/src/pages/Customers.vue index 97e6d9d..d1aff47 100644 --- a/src/pages/Customers.vue +++ b/src/pages/Customers.vue @@ -6,19 +6,30 @@
-
@@ -62,14 +73,23 @@ mode: 'cards', } }, - computed: Object.assign({}, mapState('customers', ['customers', 'loading'])), + computed: Object.assign({}, mapState('customers', [ + 'customers', + 'loading', + 'updatedAt', + ])), methods: Object.assign({ setMode(mode) { this.mode = (mode === 'table') ? 'table' : 'cards'; }, - }, mapActions('customers', ['fetchCustomers'])), + }, mapActions('customers', [ + 'fetchCustomers', + ])), created() { - this.fetchCustomers(); + const diffTime = (new Date().getTime()) - this.updatedAt; + const seconds = 30; + + if (diffTime >= seconds * 1000) this.fetchCustomers(); }, } diff --git a/src/store/customers.js b/src/store/customers.js index 21b7ac5..f73c652 100644 --- a/src/store/customers.js +++ b/src/store/customers.js @@ -3,26 +3,31 @@ export default { state: { loading: false, customers: [], + updatedAt: 0, + pagination: { + page: 0, + count: 10, + }, }, mutations: { setCustomers(state, customers) { state.customers = customers; - state.loaded = true; + state.updatedAt = new Date().getTime(); }, - toggleLoading(state) { - state.loading = !state.loading; + setPagination(state, opts = {}) { + if (opts.page) state.pagination.page = opts.page; + if (opts.count) state.pagination.count = opts.count; + }, + toggleLoading(state, loading) { + state.loading = loading || !state.loading; }, }, actions: { - fetchCustomers({ commit }, opts = {}) { - commit('toggleLoading'); + fetchCustomers({ commit, state }, opts = {}) { + commit('toggleLoading', true); + commit('setPagination', opts); // TODO: fetch customers from server - const options = Object.assign({ - page: 0, - count: 10, - }, opts); - return new Promise((resolve) => { const customers = [{ id: 'ai7rgail73ria3uhr', @@ -69,9 +74,10 @@ export default { }]; setTimeout(() => { - const results = customers.slice(options.page, options.count); + const { page, count } = state.pagination; + const results = customers.slice(page, count); commit('setCustomers', results); - commit('toggleLoading'); + commit('toggleLoading', false); resolve(); }, 300); });