staying connected

ADDED
added a leave button to clear localStorage refs

FIXED:
adding nodes reloads nodes & support for dev changes means you stay connected

src/components/MyNodes.vue

 <template>
-  <div v-for="(nodes, index) in myArray" v-bind:key="index">
+  <div v-for="(nodes, index) in myArray" :key="index">
     <form class="nodes">
       <template v-if="nodes.node_readmode == false">
         <textarea
@@ -55,35 +55,27 @@ export default {
   },
 
   mounted() {
+    //console.log('mounted')
     setTimeout(this.loadData, 500)
-    //console.log(this.microcosmName.microcosmName)
-    // NOT SURE THIS IS DOING ANYTHING ???
-    // const unwatch = this.$watch('nodesFiltered', (value) => {
-    //   this.$options.myArray = this.nodesFiltered
-    //   this.$forceUpdate()
-    //   // ignore falsy values
-    //   if (!value) return
-    //   // stop watching when nodesFiltered[] is not empty
-    //   if (value && value.length) unwatch()
-    //   // process value here
-    // })
-  },
 
-  watch: {
-    added: {
-      deep: true,
-      handler() {
-        setTimeout(this.loadData, 500)
-      },
-    },
+    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
+      var devicename = localStorage.nogg_name
+      var microcosm = localStorage.nogg_microcosm
+      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
+    } else {
+      console.log('no')
+      // go home
+    }
   },
 
   methods: {
     loadData() {
       // console.log('loading data')
-      this.myArray = this.nodesFiltered
-      // console.log(this.myArray)
-      // this.$forceUpdate()
+      var nodesFiltered = this.myNodes.myNodes.filter(
+        (nodes) => nodes.node_deleted == false
+      )
+      this.$store.dispatch('getMynodes')
+      this.myArray = nodesFiltered.reverse()
     },
 
     editNode(e) {

src/components/ToolBar.vue

@@ -4,6 +4,7 @@
     <button>Select Node</button>
     <button>Make Connections</button>
     <UploadMedia />
+    <button @click="exitMicrocosm()">Exit</button>
   </div>
 </template>
 
@@ -37,6 +38,15 @@ export default {
       this.$emit('added-node')
       this.$store.dispatch('addNode')
     },
+    exitMicrocosm() {
+    
+      localStorage.removeItem('nogg_microcosm')
+      localStorage.removeItem('nogg_name')
+
+      location.assign(
+        process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
+      )
+    },
   },
 }
 </script>

src/store/modules/mynodes.js

@@ -6,8 +6,6 @@ var deviceName
 export const state = {
   myNodes: [],
   activeNode: {},
-  lastMicrocosm: '',
-  lastdeviceName: '',
 }
 
 export const mutations = {
@@ -81,7 +79,7 @@ export const mutations = {
       })
   },
   GET_MY_NODES() {
-    // console.log('called ' + deviceName)
+    console.log('called ' + deviceName)
     pouchdb
       .get(deviceName)
       .then(function (doc) {
@@ -108,7 +106,6 @@ export const mutations = {
       .get(deviceName)
       .then(function (doc) {
         // put the store into pouchdb
-
         return pouchdb.bulkDocs([
           {
             _id: deviceName,

src/store/modules/setup.js

@@ -14,9 +14,6 @@ export const mutations = {
   SET_MICROCOSM(state, e) {
     state.deviceName = e.devicename
     state.microcosmName = e.microcosm
-    // if (state.microcosmName == '') {
-    //   console.log('empty')
-    // }
 
     pouchdb = new PouchDB(state.microcosmName)
     state.pouchdb = pouchdb

src/views/Collect.vue

 <template>
   <ToolBar @added-node="addedNode" />
-  <MyNodes :added="added" />
+  <MyNodes :added="added" :key="componentKey" />
 </template>
 
 <script>
@@ -21,6 +21,7 @@ export default {
 
   data() {
     return {
+      componentKey: 0,
       added: true,
     }
   },
@@ -29,6 +30,11 @@ export default {
     addedNode() {
       //console.log('I hear you!')
       this.added = !this.added
+      this.forceRender()
+    },
+    forceRender() {
+      // reloads the data after adding a node
+      this.componentKey += 1
     },
   },
 }