Merge pull request #264 from lightningnetworkstores/feature/meme-bank

Feature/meme bank

Author: lightningnetworkstores

nuxt/components/discussions/AddMemeModal.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="500">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn @click="deleteCommentRequested" icon :attrs="attrs" v-on="on">
+        <v-icon small color="primary">mdi-image-album</v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title>Confirm</v-card-title>
+      <v-card-text>Please confirm this meme selection</v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="secondary" @click="showDialog = false">Cancel</v-btn>
+        <v-btn color="primary" @click="postMeme">Confirm</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  props: {
+    commentId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      showDialog: false
+    }
+  },
+  methods: {
+    postMeme() {
+      const payload = { commentId: this.commentId }
+      this.$axios.$post('/api/meme', payload)
+        .then(data => {
+          console.log('post meme response: ', data)
+        })
+        .catch(err => console.error(err))
+        .finally(() => this.showDialog = false)
+    }
+  }
+}
+</script>

nuxt/components/discussions/ChangeTopicModal.vue

@@ -2,7 +2,7 @@
   <v-dialog v-model="showDialog" max-width="500">
     <template v-slot:activator="{ attrs, on }">
       <v-btn v-on="on" :attrs="attrs" icon color="secondary">
-        <v-icon>mdi-tooltip-edit</v-icon>
+        <v-icon small>mdi-tooltip-edit</v-icon>
       </v-btn>
     </template>
     <v-card>

nuxt/components/discussions/DeleteCommentModal.vue

@@ -2,7 +2,7 @@
   <v-dialog v-model="showDialog" max-width="500">
     <template v-slot:activator="{ on, attrs }">
       <v-btn @click="deleteCommentRequested" icon :attrs="attrs" v-on="on">
-        <v-icon color="red">mdi-delete</v-icon>
+        <v-icon small color="red">mdi-delete</v-icon>
       </v-btn>
     </template>
     <v-card>

nuxt/components/discussions/DiscussionThreads.vue

@@ -61,6 +61,10 @@
                 :threadIndex="threadIndex"
                 :commentId="reply.id"
               />
+              <AddMemeModal
+                v-if="isAdmin && reply.link"
+                :commentId="reply.id"
+              />
             </div>
             <v-divider v-if="replyIndex < repliesCount(threadIndex) - 1"/>
           </v-sheet>
@@ -95,6 +99,7 @@ import DiscussionHeader from './DiscussionHeader.vue'
 import DeleteCommentModal from './DeleteCommentModal.vue'
 import DiscussionImage from '@/components/discussions/DiscussionImage'
 import ReplyBar from '@/components/discussions/ReplyBar'
+import AddMemeModal from '@/components/discussions/AddMemeModal'
 
 export default {
   components: {
@@ -104,7 +109,8 @@ export default {
     DiscussionHeader,
     DeleteCommentModal,
     DiscussionImage,
-    ReplyBar
+    ReplyBar,
+    AddMemeModal
   },
   props: {
     threads: {