From b36bad32947db1a1efba096015a31c3b5fc30ddc Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Sep 05 2017 21:16:56 +0000
Subject: [PATCH 1/2] Changing architecture to Vuex standards


Signed-off-by: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Signed-off-by: Matheus Godinho <matheus.godinho@outlook.com>
Signed-off-by: Eduardo Nunes <eduardonunes2525@gmail.com>

---

diff --git a/package.json b/package.json
index 8daa5a1..53af5fd 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
-    "vue-table-component": "^1.3.0"
+    "vue-table-component": "^1.3.0",
+    "vuex": "^2.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/App.vue b/src/App.vue
index 1b90d41..0ec5f1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,10 @@
 import Vue from 'vue'
 import VueMaterial from 'vue-material'
 import 'vue-material/dist/vue-material.css'
+import Vuex from 'vuex'
+
 Vue.use(VueMaterial)
+Vue.use(Vuex)
 
 export default {
 
diff --git a/src/api/index.js b/src/api/index.js
index f00eb03..7982ba4 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,6 @@
 import axios from 'axios'
 
 let axiosApi = axios.create({
-  // baseURL: '/api',
   baseURL: 'http://localhost:5000',
   timeout: 1000
 })
diff --git a/src/main.js b/src/main.js
index e4ca4c3..a025eca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import App from './App'
 
 import VueRouter from 'vue-router'
 import { routes } from './router/routes'
+import store from './store'
 
 import DataTables from 'vue-data-tables'
 import ElementUI from 'element-ui'
@@ -39,5 +40,6 @@ const router = new VueRouter({
 new Vue({
   el: '#app',
   router: router,
+  store,
   render: h => h(App)
 })
diff --git a/src/store/actionTypes.js b/src/store/actionTypes.js
new file mode 100644
index 0000000..bf553e5
--- /dev/null
+++ b/src/store/actionTypes.js
@@ -0,0 +1 @@
+export const FETCH_PACKAGES = 'fetchPackages'
diff --git a/src/store/getterNames.js b/src/store/getterNames.js
new file mode 100644
index 0000000..f1e1aba
--- /dev/null
+++ b/src/store/getterNames.js
@@ -0,0 +1 @@
+export const allPackages = 'allPackages'
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..066bf2c
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,9 @@
+import Vuex from 'vuex'
+
+import packages from './modules/packages'
+
+export default new Vuex.Store({
+  modules: {
+    packages
+  }
+})
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
new file mode 100644
index 0000000..a85b18f
--- /dev/null
+++ b/src/store/modules/packages.js
@@ -0,0 +1,39 @@
+import api from '../../api/packages'
+import * as actionTypes from '../actionTypes'
+import * as getterNames from '../getterNames'
+import * as mutationTypes from '../mutationsTypes'
+
+const state = {
+  allPackages: []
+}
+
+const getters = {
+  [getterNames.allPackages]: (state) => {
+    return state.allPackages
+  }
+}
+
+const actions = {
+  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
+    let { data } = await api.get()
+    commit(mutationTypes.STORE_PACKAGES, data)
+  }
+}
+
+const mutations = {
+  [mutationTypes.STORE_PACKAGES] (state, data) {
+    state.allPackages = data.packages.map((pkg) => {
+      return {
+        name: pkg.name,
+        last_version: pkg.versions[0].number
+      }
+    })
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/mutationsTypes.js b/src/store/mutationsTypes.js
new file mode 100644
index 0000000..fca80de
--- /dev/null
+++ b/src/store/mutationsTypes.js
@@ -0,0 +1 @@
+export const STORE_PACKAGES = 'STORE_PACKAGES'

From c3110d1d6bb0721fc48e55c0677f9db38893dcc0 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Sep 05 2017 21:20:49 +0000
Subject: [PATCH 2/2] Adapting component List of packages to Vuex


 Signed-off-by: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
 Signed-off-by: Matheus Godinho <matheus.godinho@outlook.com>
 Signed-off-by: Eduardo Nunes <eduardonunes2525@gmail.com>

---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 28355fa..c9ad844 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="list-pkgs">
-  <md-button v-on:click="updateTable">Update Table</md-button>
-    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
+  <md-button v-on:click="fetchPackages()">Update Table</md-button>
+    <el-table :data="allPackages"  height="400" @cell-click="showPackage" border>
       <el-table-column prop="name" label="project name" sortable="custom">
       </el-table-column>
       <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
@@ -11,41 +11,35 @@
 </template>
 
 <script>
-import packagesApi from '../../api/packages.js'
+
+import { mapActions, mapGetters } from 'vuex'
+import * as actionTypes from '../../store/actionTypes.js'
+import * as getterNames from '../../store/getterNames.js'
 
 export default {
   data () {
     return {
-      tableData: [],
       searchDef: {
         show: false
       },
       currentRow: null
     }
   },
+  computed: {
+    ...mapGetters([
+      getterNames.allPackages
+    ])
+  },
   methods: {
-    parseApiData (packages) {
-      var parsedPackages = []
-
-      for (var pkg of packages) {
-        var pkgName = pkg.name
-        var pkgNewestAnalyzedVersion = pkg.versions[0].number
-        var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
-        parsedPackages.push(item)
-      }
-
-      return parsedPackages
-    },
+    ...mapActions([
+      actionTypes.FETCH_PACKAGES
+    ]),
     showPackage () {
       // show the analysis here
-    },
-    async updateTable () {
-      let { data } = await packagesApi.get()
-      this.tableData = this.parseApiData(data.packages)
     }
   },
   created () {
-    this.updateTable()
+    this.fetchPackages()
   }
 }
 

