Merge pull request #9 from rohitverma007/master

Added vuex, created user module for store

package.json

@@ -24,7 +24,8 @@
     "express": "^4.16.4",
     "morgan": "^1.9.1",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.5",

src/App.vue

@@ -17,7 +17,10 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'app',
+  created () {
+    this.$store.dispatch('user/loadFromConfigFile')
+  }
 }
 </script>
 

src/components/Config.vue

@@ -1,65 +1,43 @@
 <template>
-  <div class="config row">
-    <div class="col-md-12">
-      <b-form>
-        <b-form-group label="Name" label-for="config-name">
-          <b-form-input id="config-name" type="text" v-model="form.name" :disabled="true"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Fee %" label-for="config-fee-percent">
-          <b-form-input id="config-fee-percent" type="number" v-model="form.fee_percent" :disabled="true"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Minimum contribution" label-for="config-minimum-contribution">
-          <b-form-input id="config-minimum-contribution" type="number" v-model="form.minimum_contribution" :disabled="true"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Tezos RPC address" label-for="config-tezos-rpc-address">
-          <b-form-input id="config-tezos-rpc-address" type="text" v-model="form.tezos_rpc_address" :disabled="true"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Baker Tz address" label-for="config-baker-tz-address">
-          <b-form-input id="config-baker-tz-address" type="text" v-model="form.baker_tz_address" :disabled="true"></b-form-input>
-        </b-form-group>
-      </b-form>
+  <div class="container pt-3">
+    <div class="config row">
+      <div class="col-6 offset-3">
+        <h3 class="text-center">Config</h3>
+        <b-form>
+          <b-form-group label="Name" label-for="config-name">
+            <b-form-input id="config-name" type="text" v-model="user.name" :disabled="true"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Fee %" label-for="config-fee-percent">
+            <b-form-input id="config-fee-percent" type="number" v-model="user.fee_percent" :disabled="true"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Minimum contribution" label-for="config-minimum-contribution">
+            <b-form-input id="config-minimum-contribution" type="number" v-model="user.minimum_contribution" :disabled="true"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Tezos RPC address" label-for="config-tezos-rpc-address">
+            <b-form-input id="config-tezos-rpc-address" type="text" v-model="user.tezos_rpc_address" :disabled="true"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Baker Tz address" label-for="config-baker-tz-address">
+            <b-form-input id="config-baker-tz-address" type="text" v-model="user.baker_tz_address" :disabled="true"></b-form-input>
+          </b-form-group>
+          <b-form-group class="text-center">
+            <b-button variant="primary col-3">
+              Save
+            </b-button>
+          </b-form-group>
+        </b-form>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name: 'hello',
-  data () {
-    return {
-      form: {
-        name: null,
-        fee_percent: null,
-        minimum_contribution: null,
-        tezos_rpc_address: null,
-        baker_tz_address: null
-      }
-    }
-  },
-  created () {
-    this.loadConfig()
-  },
-  methods: {
-    loadDefaultConfig () {
-      console.log('No /static/config.json found; using default config.')
-      this.form = {
-        name: 'foo',
-        fee_percent: 5,
-        minimum_contribution: 3,
-        tezos_rpc_address: 'asdf',
-        baker_tz_address: 'asdf'
-      }
-    },
-    loadConfig () {
-      fetch('/static/config.json')
-        .then((resp) => {
-          if (resp.ok) resp.json().then((j) => { this.form = j })
-          else this.loadDefaultConfig()
-        })
-        .catch(() => {
-          this.loadDefaultConfig()
-        })
-    }
+  computed: {
+    ...mapState({
+      user: state => state.user
+    })
   }
 }
 </script>

src/main.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import store from './store'
 import App from './App'
 import router from './router'
 import BootstrapVue from 'bootstrap-vue'
@@ -13,6 +14,7 @@ Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  store,
   router,
   template: '<App/>',
   components: { App }

src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import user from './modules/user'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    user
+  }
+})

src/store/modules/user.js

@@ -0,0 +1,33 @@
+// initial state
+const state = {
+  name: null,
+  fee_percent: null,
+  minimum_contribution: null,
+  tezos_rpc_address: null,
+  baker_tz_address: null
+}
+
+// actions
+const actions = {
+  loadFromConfigFile ({ commit }) {
+    commit('setUserConfig', require('../../../static/config.json'))
+  }
+}
+
+// mutations
+const mutations = {
+  setUserConfig (state, { name, feePercent, minimumContribution, tezosRpcAddress, bakerTzAddress }) {
+    state.name = name
+    state.fee_percent = feePercent
+    state.minimum_contribution = minimumContribution
+    state.tezos_rpc_address = tezosRpcAddress
+    state.baker_tz_address = bakerTzAddress
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations
+}