emoji "voting" now working

CHANGELOG.md

+# 0.2.5
+
+_10th Septemeber 2021_
+
+## Added
+
+- various formatting buttons to format your node text with markdown
+- emojis "voting" is now working on other nodes
+
 # 0.2.4
 
 _6th Septemeber 2021_

package.json

 {
   "name": "nodenogg.in",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/OtherNodes.vue

@@ -12,7 +12,18 @@
       :id="nodes.node_id"
       v-html="marked(nodes.node_text)"
     ></p>
-    <button @click="openEmoji">
+    <div class="allemoji">
+      <div
+        class="eachemoji"
+        v-for="(emojis, index) in allEmoji.allEmoji"
+        :key="index"
+      >
+        <p v-if="nodes.node_id == emojis.node_id">
+          {{ emojis.emoji_unicode }}
+        </p>
+      </div>
+    </div>
+    <button @click="openEmoji(nodes.node_id)">
       <svg
         height="24"
         viewBox="0 0 24 24"
@@ -26,9 +37,9 @@
       </svg>
     </button>
     <VuemojiPicker
-      v-show="showEmoji"
+      v-if="showEmoji === nodes.node_id"
       class="emojipicker"
-      @emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
+      @emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
       :pickerStyle="{}"
     />
   </div>
@@ -52,7 +63,7 @@ export default {
 
   data: function () {
     return {
-      showEmoji: false,
+      showEmoji: String,
     }
   },
 
@@ -63,13 +74,16 @@ export default {
   computed: {
     ...mapState({
       otherNodes: (state) => state.otherNodes,
-      configEmoji: (state) => state.configEmoji,
+      allEmoji: (state) => state.allEmoji,
     }),
   },
 
   mounted() {
     this.$store.dispatch('getOthernodes')
     setTimeout(this.loadData, 500)
+    // this is to get the last letter typed if no space
+    // this also loads in new Emoji
+    // May need to EDIT
     setInterval(this.loadData, 5000)
   },
 
@@ -77,17 +91,34 @@ export default {
     getNodeid(nodeid) {
       this.nodeid = nodeid
     },
-    handleEmojiClick(detail, nodeid) {
-      console.log(detail)
+    handleEmojiClick(nodeid, detail) {
       console.log(nodeid)
+
+      var unicode = detail.emoji.unicode
+      var annotation = detail.emoji.annotation
+      var skinTone = detail.skinTone
+      var emoticon = detail.emoji.emoticon
+
+      this.$store.dispatch('addEmoji', {
+        nodeid,
+        unicode,
+        annotation,
+        skinTone,
+        emoticon,
+      })
     },
 
-    openEmoji() {
-      this.showEmoji = !this.showEmoji
+    openEmoji(nodeid) {
+      if (this.showEmoji == nodeid) {
+        this.showEmoji = null
+      } else {
+        this.showEmoji = nodeid
+      }
     },
 
     loadData() {
       this.$store.dispatch('setOthernodes')
+      this.$store.dispatch('getEmoji')
     },
     marked,
   },
@@ -103,4 +134,11 @@ button {
   background: none;
   border: none;
 }
+
+.allemoji {
+  font-size: 1.5em;
+  padding: 0em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(0, auto));
+}
 </style>

src/store/modules/allEmoji.js

-export const state = {}
+var pouchdb
 
-export const mutations = {}
+export const state = {
+  docName: 'emojis',
+  allEmoji: [],
+}
 
-export const actions = {}
+export const mutations = {
+  GET_EMOJI(state) {
+    pouchdb
+      .get(state.docName)
+      .then(function (doc) {
+        state.allEmoji = doc.emojis
+      })
+      .catch(function (err) {
+        if (err.status == 404) {
+          return pouchdb.put({
+            _id: state.docName,
+            emojis: [],
+          })
+        }
+      })
+  },
+  ADD_EMOJI(state, e) {
+    var uniqueid =
+      Math.random().toString(36).substring(2, 15) +
+      Math.random().toString(36).substring(2, 15)
+    pouchdb.get(state.docName).then(function (doc) {
+      doc.emojis.push({
+        emoji_id: uniqueid,
+        node_id: e.nodeid,
+        emoji_unicode: e.unicode,
+        emoji_annotation: e.annotation,
+        emoji_skintone: e.skinTone,
+        emoji_emoticon: e.emoticon,
+      })
+      return pouchdb
+        .put({
+          _id: state.docName,
+          _rev: doc._rev,
+          emojis: doc.emojis,
+        })
+        .catch(function () {})
+    })
+  },
+}
+
+export const actions = {
+  getEmoji: ({ commit }) => {
+    commit('GET_EMOJI')
+  },
+
+  addEmoji: (
+    { commit },
+    { nodeid, unicode, annotation, skinTone, emoticon }
+  ) => {
+    commit('ADD_EMOJI', {
+      nodeid,
+      unicode,
+      annotation,
+      skinTone,
+      emoticon,
+    })
+  },
+
+  getMicrocosm(vuexContext) {
+    pouchdb = vuexContext.rootState.setup.pouchdb
+  },
+}
 
 export const getters = {}

src/store/modules/otherNodes.js

 var pouchdb
 var deviceName
+var docName
 
 export const state = {
   allNodes: [],
@@ -27,7 +28,10 @@ export const mutations = {
     var j
 
     for (i = 0; i < Object.keys(state.allNodes).length; i++) {
-      if (state.allNodes[i].id != deviceName) {
+      if (
+        state.allNodes[i].id != deviceName &&
+        state.allNodes[i].id != docName
+      ) {
         for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
           const newNode = {
             node_id: state.allNodes[i].doc.nodes[j].node_id,
@@ -55,6 +59,7 @@ export const actions = {
   getMicrocosm(vuexContext) {
     deviceName = vuexContext.rootState.setup.deviceName
     pouchdb = vuexContext.rootState.setup.pouchdb
+    docName = vuexContext.rootState.allEmoji.docName
   },
 }