refactoring Vuex

splitting vuex store into modules.

src/components/JoinMicrocosm.vue

@@ -5,7 +5,7 @@
     <p>
       First we need to connect this device to your ideas. This name is what
       allows you to create and edit your nodes and this name can be anything you
-      like, this name is always anonymous.
+      like, this name is always anonymous. <strong>This is required.</strong>
     </p>
     <div class="breaker-one">
       <label for="name">Your Name: {{ nameFormatted }}</label>
@@ -14,13 +14,11 @@
         v-model.trim="name"
         type="text"
         id="name"
-        autofocus
         placeholder="type name here!"
         autocorrect="off"
         autocapitalize="none"
-        @keyup.enter="setName()"
+        required
       />
-      <button type="button" @click="setName()">Store</button>
     </div>
     <h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>
 
@@ -39,9 +37,11 @@
         placeholder="type microcosm name here!"
         autocorrect="off"
         autocapitalize="none"
-        @keyup.enter="setMicrocosm()"
+        @keyup.enter="setName(), setMicrocosm()"
       />
-      <button type="button" @click="setMicrocosm()">Start or Join</button>
+      <button type="button" @click="setName(), setMicrocosm()">
+        Start or Join
+      </button>
       <button class="configButton" type="button" @click="settings = !settings">
         Change CouchDB Configuration
       </button>
@@ -141,7 +141,7 @@ export default {
       // focus on next input field for speed
       this.focusInput()
       // now we sent this same data set to the store
-      this.$store.dispatch('setName', this.nameFormatted)
+      // this.$store.dispatch('setName', this.nameFormatted)
     },
 
     setMicrocosm() {
@@ -152,7 +152,10 @@ export default {
       this.microcosmSet = true
       localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
       // now we sent this same data set to the store
-      this.$store.dispatch('setMicrocosm', this.microcosmFormatted)
+      var devicename = this.nameFormatted
+      var microcosm = this.microcosmFormatted
+      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
+      this.$store.dispatch('startDB')
     },
     configureRemote(protocol, username, password, url) {
       // console.log(protocol, username, password, url)

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './store/store'
 
-createApp(App)
-  .use(store)
-  .use(router)
-  .mount('#app')
+createApp(App).use(store).use(router).mount('#app')

src/store/index.js

-import { createStore } from 'vuex'
-import PouchDB from 'pouchdb'
-
-//import Router from '@/router'
-
-// Checking for previous microcosm last entered from LocalStorage
-if (localStorage.getItem('nogg_microcosm') == null) {
-  var microcosm = 'first_visit'
-} else {
-  microcosm = localStorage.getItem('nogg_microcosm')
-}
-
-// Checking for previous name last entered from LocalStorage
-if (localStorage.getItem('nogg_name') == null) {
-  var name = 'no_name'
-} else {
-  name = localStorage.getItem('nogg_name')
-}
-
-// set up PouchDB and add a remote from env files
-var pouchdb = new PouchDB(microcosm)
-var remote =
-  process.env.VUE_APP_COUCH_HTTP +
-  '://' +
-  process.env.VUE_APP_COUCH_USER +
-  ':' +
-  process.env.VUE_APP_COUCH_PASS +
-  process.env.VUE_APP_COUCH_URL +
-  microcosm +
-  '/'
-
-export const store = createStore({
-  state() {
-    return {
-      version: process.env.VUE_APP_VERSION,
-      microcosm: '',
-      name: name,
-      myNodes: [],
-      allNodes: [],
-      configRemote: [],
-    }
-  },
-  mutations: {
-    SET_NAME(state, e) {
-      state.name = e
-    },
-
-    SET_MICROCOSM(state, e) {
-      //  const urlmicrocosm = Router.currentRoute.params.microcosm
-      pouchdb.close().then(function () {
-        // if the URL Parameter has /microcosm/usethisname
-        microcosm = e
-        // if (urlmicrocosm != undefined) {
-        //   microcosm = urlmicrocosm
-        //   localStorage.setItem('nogg_microcosm', microcosm)
-        // } else {
-        //   microcosm = doc
-        // }
-        pouchdb = new PouchDB(microcosm)
-        if (state.configRemote && state.configRemote.length > 0) {
-          remote =
-            state.configRemote[0].protocol +
-            '://' +
-            state.configRemote[0].username +
-            ':' +
-            state.configRemote[0].password +
-            '@' +
-            state.configRemote[0].url +
-            '/' +
-            microcosm +
-            '/'
-        } else {
-          remote =
-            process.env.VUE_APP_COUCH_HTTP +
-            '://' +
-            process.env.VUE_APP_COUCH_USER +
-            ':' +
-            process.env.VUE_APP_COUCH_PASS +
-            process.env.VUE_APP_COUCH_URL +
-            microcosm +
-            '/'
-        }
-
-        store.dispatch('syncDB')
-      })
-    },
-
-    SET_REMOTE(state, e) {
-      state.configRemote = [
-        {
-          protocol: e.protocol,
-          username: e.username,
-          password: e.password,
-          url: e.url,
-        },
-      ]
-    },
-
-    // ADD_NODE(state) {
-    //   var uniqueid =
-    //     Math.random().toString(36).substring(2, 15) +
-    //     Math.random().toString(36).substring(2, 15)
-
-    //   if (state.microcosm == 'first_visit') {
-    //     console.log('not allowed on this microcosm')
-    //   } else {
-    //     pouchdb.get(state.name).then(function (doc) {
-    //       doc.nodes.push({
-    //         node_id: uniqueid,
-    //         node_text: '',
-    //         node_owner: state.name,
-    //         node_type: 'sheet',
-    //         node_shape: 'square',
-    //         node_deleted: false,
-    //         node_readmode: false,
-    //         node_color: '#9bc2d8',
-    //       })
-    //       return pouchdb
-    //         .put({
-    //           _id: state.name,
-    //           _rev: doc._rev,
-    //           _attachments: doc._attachments,
-    //           nodes: doc.nodes,
-    //         })
-    //         .then(function () {
-    //           return pouchdb.get(state.name).then(function (doc) {
-    //             state.myNodes = doc.nodes
-    //             var end = Object.keys(state.myNodes).length - 1
-    //             const newNode = {
-    //               nodeid: state.myNodes[end].id,
-    //               nodetext: state.myNodes[end].text,
-    //             }
-    //             console.log(newNode)
-    //           })
-    //         })
-    //         .catch(function (err) {
-    //           if (err.status == 404) {
-    //             // pouchdb.put({  })
-    //           }
-    //         })
-    //     })
-    //   }
-    // },
-
-    GET_ALL_NODES(state) {
-      pouchdb
-        .allDocs({
-          include_docs: true,
-        })
-        .then(function (doc) {
-          state.allNodes = doc.rows
-          store.commit('GET_MY_NODES')
-        })
-        .catch(function () {
-          //console.log(err)
-        })
-    },
-
-    GET_MY_NODES(state) {
-      pouchdb
-        .get(state.name)
-        .then(function (doc) {
-          var i
-          for (i = 0; i < Object.keys(doc.nodes).length; i++) {
-            state.myNodes = doc.nodes
-          }
-        })
-        .catch(function () {
-          // console.log(err)
-        })
-    },
-  },
-  actions: {
-    syncDB: () => {
-      pouchdb.replicate.from(remote).on('complete', function () {
-        // turn on two-way, continuous, retriable sync
-        store.commit('GET_ALL_NODES')
-        pouchdb
-          .sync(remote, {
-            live: true,
-            since: 'now',
-            retry: true,
-            attachments: true,
-          })
-          .on('change', function () {
-            // pop info into function to find out more
-            store.commit('GET_ALL_NODES')
-          })
-          .on('paused', function () {})
-          .on('active', function () {})
-          .on('denied', function () {})
-          .on('complete', function () {})
-          .on('error', function (err) {
-            console.log(err)
-          })
-      })
-    },
-
-    setName: ({ commit }, e) => {
-      commit('SET_NAME', e)
-    },
-    setMicrocosm: ({ commit }, e) => {
-      commit('SET_MICROCOSM', e)
-    },
-    configureRemote: ({ commit }, e) => {
-      commit('SET_REMOTE', e)
-    },
-  },
-  modules: {},
-})
-export default store
-store.dispatch('syncDB')

src/store/modules/nodes.js

+import { createStore } from 'vuex'
+
+
+export const nodesstore = createStore({
+  state() {
+    return {
+      version: process.env.VUE_APP_VERSION,
+      myNodes: [],
+      allNodes: [],
+    }
+  },
+  mutations: {},
+  actions: {
+   
+})
+export default nodesstore
+
+// ADD_NODE(state) {
+//   var uniqueid =
+//     Math.random().toString(36).substring(2, 15) +
+//     Math.random().toString(36).substring(2, 15)
+
+//   if (state.microcosm == 'first_visit') {
+//     console.log('not allowed on this microcosm')
+//   } else {
+//     pouchdb.get(state.deviceName).then(function (doc) {
+//       doc.nodes.push({
+//         node_id: uniqueid,
+//         node_text: '',
+//         node_owner: state.deviceName,
+//         node_type: 'sheet',
+//         node_shape: 'square',
+//         node_deleted: false,
+//         node_readmode: false,
+//         node_color: '#9bc2d8',
+//       })
+//       return pouchdb
+//         .put({
+//           _id: state.name,
+//           _rev: doc._rev,
+//           _attachments: doc._attachments,
+//           nodes: doc.nodes,
+//         })
+//         .then(function () {
+//           return pouchdb.get(state.name).then(function (doc) {
+//             state.myNodes = doc.nodes
+//             var end = Object.keys(state.myNodes).length - 1
+//             const newNode = {
+//               nodeid: state.myNodes[end].id,
+//               nodetext: state.myNodes[end].text,
+//             }
+//             console.log(newNode)
+//           })
+//         })
+//         .catch(function (err) {
+//           if (err.status == 404) {
+//             // pouchdb.put({  })
+//           }
+//         })
+//     })
+//   }
+// },
+
+// GET_ALL_NODES(state) {
+//     pouchdb
+//       .allDocs({
+//         include_docs: true,
+//       })
+//       .then(function (doc) {
+//         state.allNodes = doc.rows
+//       })
+//       .catch(function () {
+//         //console.log(err)
+//       })
+//   },
+
+// GET_MY_NODES(state) {
+//   pouchdb
+//     .get(state.deviceName)
+//     .then(function (doc) {
+//       var i
+//       for (i = 0; i < Object.keys(doc.nodes).length; i++) {
+//         state.myNodes = doc.nodes
+//       }
+//     })
+//     .catch(function () {
+//       // console.log(err)
+//     })
+// },

src/store/modules/setup.js

+import PouchDB from 'pouchdb'
+var pouchdb
+var remote
+
+export const state = {
+  microcosmName: '',
+  deviceName: '',
+  remoteAddress: '',
+  configRemote: [],
+}
+
+export const mutations = {
+  SET_MICROCOSM(state, e) {
+    state.deviceName = e.devicename
+    state.microcosmName = e.microcosm
+
+    pouchdb = new PouchDB(state.microcosmName)
+
+    if (state.configRemote && state.configRemote.length > 0) {
+      remote =
+        state.configRemote[0].protocol +
+        '://' +
+        state.configRemote[0].username +
+        ':' +
+        state.configRemote[0].password +
+        '@' +
+        state.configRemote[0].url +
+        '/' +
+        state.microcosmName +
+        '/'
+    } else {
+      remote =
+        process.env.VUE_APP_COUCH_HTTP +
+        '://' +
+        process.env.VUE_APP_COUCH_USER +
+        ':' +
+        process.env.VUE_APP_COUCH_PASS +
+        process.env.VUE_APP_COUCH_URL +
+        state.microcosmName +
+        '/'
+    }
+    state.remoteAddress = remote
+  },
+
+  SET_REMOTE(state, e) {
+    state.configRemote = [
+      {
+        protocol: e.protocol,
+        username: e.username,
+        password: e.password,
+        url: e.url,
+      },
+    ]
+  },
+}
+
+export const actions = {
+  setMicrocosm: ({ commit }, e) => {
+    commit('SET_MICROCOSM', e)
+  },
+  configureRemote: ({ commit }, e) => {
+    commit('SET_REMOTE', e)
+  },
+
+  startDB: () => {
+    pouchdb.replicate.from(remote).on('complete', function () {})
+  },
+}

src/store/store.js

+import { createStore } from 'vuex'
+
+import * as setup from '@/store/modules/setup.js'
+//import * as nodes from '@/store/modules/nodes.js'
+
+export const store = createStore({
+  //
+  modules: {
+    setup,
+    // nodes,
+  },
+
+})
+export default store