feat(home): add stats example ✨

weareopensource · Jul 16, 2020 · 4fc06ae · 4fc06ae
1 parent d5b4645
commit 4fc06ae
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/config/defaults/development.js b/src/config/defaults/development.js
@@ -124,9 +124,9 @@ module.exports = {
     stats: {
       background: 'https://images.unsplash.com/photo-1510915228340-29c85a43dcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
       data: [
-        ['24k', 'Github Stars'],
+        ['0', 'Tasks'],
         ['330+', 'Releases'],
-        ['1m', 'Downloads/mo'],
+        ['0', 'Users'],
         ['5m', 'Total Downloads'],
       ],
     },

diff --git a/src/modules/home/stores/home.store.js b/src/modules/home/stores/home.store.js
@@ -17,6 +17,7 @@ const getters = {
   news: (state) => state.news,
   subscription: (state) => state.subscription,
   contact: (state) => state.contact,
+  statistics: (state) => state.statistics,
 };
 
 /**
@@ -46,6 +47,18 @@ const actions = {
       commit('subscription_error', err);
     }
   },
+  getStatistics: async ({ commit }) => {
+    try {
+      const tasks = await Vue.prototype.axios.get(`${api}/${config.api.endPoints.tasks}/stats`);
+      const users = await Vue.prototype.axios.get(`${api}/${config.api.endPoints.users}/stats`);
+      commit('statistics_set', {
+        tasks: tasks.data.data,
+        users: users.data.data,
+      });
+    } catch (err) {
+      commit('statistics_error', err);
+    }
+  },
 };
 
 /**
@@ -79,6 +92,13 @@ const mutations = {
   contact_update(state, data) {
     _.merge(state.contact, data);
   },
+  // statistics
+  statistics_error(err) {
+    console.log(err);
+  },
+  statistics_set(state, data) {
+    state.statistics = data;
+  },
 };
 
 /**
@@ -88,6 +108,7 @@ const state = {
   news: [],
   subscription: {},
   contact: {},
+  statistics: {},
 };
 
 /**

diff --git a/src/modules/home/views/home.view.vue b/src/modules/home/views/home.view.vue
@@ -255,7 +255,7 @@ export default {
     VueMarkdown,
   },
   computed: {
-    ...mapGetters(['theme', 'news', 'subscription', 'contact']),
+    ...mapGetters(['theme', 'news', 'subscription', 'contact', 'statistics']),
     email: {
       get() {
         return this.subscription.email;
@@ -286,7 +286,15 @@ export default {
   },
   created() {
     AOS.init();
-    this.$store.dispatch('getNews');
+    this.$store.dispatch('getStatistics').then(() => {
+      this.$store.dispatch('getNews');
+      this.config.home.stats.data = [
+        [this.statistics.tasks, 'Tasks'],
+        ['330+', 'Releases'],
+        [this.statistics.users, 'Users'],
+        ['5m', 'Total Downloads'],
+      ];
+    });
   },
   methods: {
     generateTemporalBackground() {