feat(ContextMenu): emoji quick reactions for message context menu (#177)

* feat(Messages): context menu quick reactions

* feat(ContextMenu): completed context menu quick reactions

* fix(ContextMenu): quick reactions cleanup

* fix(ContextMenu): one more cleanup for quick reactions lol

Co-authored-by: Jason Panay <jason@Jasons-MacBook-Pro.local>

components/interactables/ContextMenu/ContextMenu.html

@@ -6,10 +6,12 @@
   v-click-outside="close"
 >
   <TypographySubtitle :size="6" :text="title" v-if="title.length" />
-  <p
-    v-for="item of ui.contextMenuValues"
-    @click="handle(item.func)"
-  >
-    {{ item.text }}
-  </p>
+  <div v-for="item of ui.contextMenuValues" >
+    <div v-if="item.text === 'quickReaction'" class="quickReactions"> 
+      <p v-for="reaction of ui.recentReactions" @click="handle(() => {item.func(reaction)})" >
+        {{ reaction }}
+      </p>
+    </div>
+    <p v-else @click="handle(item.func)"> {{ item.text }} </p>
+  </div>
 </div>

components/interactables/ContextMenu/ContextMenu.less

@@ -25,4 +25,24 @@
     background: @primary-color;
     color: @bright-text;
   }
+  .quickReactions {
+    display: flex;
+    flex-flow: row nowrap;
+    height: 3rem;
+    border-bottom: 1px solid;
+    padding-bottom: 4px;
+    margin-bottom: 4px;
+    justify-content: center;
+    p {
+      display: flex;
+      flex-grow: 1;
+      font-size: 2rem;
+      justify-content: center;
+      align-items: center;
+    }
+    p:hover {
+      background: none;
+      text-shadow: -1px 0 1px @primary-color, 0 1px 1px @primary-color, 1px 0 1px @primary-color, 0 -1px 1px @primary-color, 0 0 12px @gray;
+    }
+  }
 }

components/tailored/messaging/enhancers/Enhancers.vue

@@ -36,7 +36,7 @@ export default Vue.extend({
       if (this.ui.settingReaction.status) {
         this.$store.dispatch('addReaction', {
           emoji: emoji.native,
-          reactor: 'Jpanay',
+          reactor: this.$mock.user.name,
           groupID: this.ui.settingReaction.groupID,
           messageID: this.ui.settingReaction.messageID,
           replyID: this.ui.settingReaction.replyID,

components/tailored/messaging/message/Message.vue

@@ -57,6 +57,7 @@ export default Vue.extend({
       messageHover: false,
       disData: 'DataFromTheProperty',
       contextMenuValues: [
+        { text: 'quickReaction', func: (this as any).quickReaction },
         { text: 'Edit Message', func: (this as any).editMessage },
         { text: 'Add Reaction', func: (this as any).emojiReaction },
         { text: 'Reply', func: this.setReplyChatbarContent },
@@ -117,6 +118,14 @@ export default Vue.extend({
       })
       this.$store.commit('toggleEnhancers', true)
     },
+    quickReaction(emoji: String) {
+      this.$store.dispatch('addReaction', {
+        emoji,
+        reactor: this.$mock.user.name,
+        groupID: this.$props.group.id,
+        messageID: this.$props.message.id,
+      })
+    },
     /**
      * Called when click the "Edit Message" on context menu
      * Commit store mutation in order to notify the edit status

store/ui/actions.ts

@@ -29,5 +29,6 @@ export default {
   },
   addReaction({ commit }: ActionsArguments, reaction: any) {
     commit('addReaction', reaction)
+    commit('updateRecentReactions', reaction.emoji)
   },
 }

store/ui/mutations.ts

@@ -196,7 +196,6 @@ export default {
   },
 
   addReaction(state: NuxtState, reaction: any) {
-    console.log(reaction)
     const messageGroups: MessageGroup = [...state.ui.messages]
 
     //Find message group meant for reaction
@@ -217,8 +216,6 @@ export default {
         )
       }
 
-      console.log(currMessage)
-
       if (currMessage) {
         // If reactions array doesnt exist create with new reaction
         if (!currMessage.reactions) {
@@ -277,4 +274,15 @@ export default {
       hoveredGlyphInfo: values,
     }
   },
+  updateRecentReactions(state: NuxtState, emoji: String) {
+    const newRecentReactions = state.ui.recentReactions
+    if (!state.ui.recentReactions.includes(emoji)) {
+      newRecentReactions.unshift(emoji)
+      newRecentReactions.pop()
+    }
+    state.ui = {
+      ...state.ui,
+      recentReactions: newRecentReactions,
+    }
+  },
 }

store/ui/state.ts

@@ -31,6 +31,7 @@ interface UIState {
     from: string
     payload: string
   }
+  recentReactions: Array<String>
 }
 
 const InitalUIState = (): UIState => ({
@@ -61,6 +62,7 @@ const InitalUIState = (): UIState => ({
   settingReaction: { status: false, groupID: null, messageID: null },
   hoveredGlyphInfo: undefined,
   editMessage: { id: '', from: '', payload: '' },
+  recentReactions: ['👍', '😂', '♥️'],
 })
 
 export default InitalUIState