Report/disable message shows data of the resource

components/Comment.vue

@@ -10,8 +10,8 @@
         <content-menu
           placement="bottom-end"
           resource-type="comment"
+          :resource="comment"
           style="float-right"
-          :item-id="comment.id"
           :is-owner="isAuthor(author.id)"
         />
       </no-ssr>

components/ContentMenu.vue

@@ -52,7 +52,7 @@ export default {
   },
   props: {
     placement: { type: String, default: 'top-end' },
-    itemId: { type: String, required: true },
+    resource: { type: Object, required: true },
     isOwner: { type: Boolean, default: false },
     resourceType: {
       type: String,
@@ -72,7 +72,7 @@ export default {
           path: this.$router.resolve({
             name: 'post-edit-id',
             params: {
-              id: this.itemId
+              id: this.resource.id
             }
           }).href,
           icon: 'edit'
@@ -136,8 +136,7 @@ export default {
         name: dialog,
         data: {
           type: this.resourceType,
-          id: this.itemId,
-          name: this.name
+          resource: this.resource
         }
       })
     }

components/Modal.spec.js

@@ -67,8 +67,10 @@ describe('Modal.vue', () => {
           open: 'disable',
           data: {
             type: 'contribution',
-            name: 'some title',
-            id: 456
+            resource: {
+              id: 'c456',
+              title: 'some title'
+            }
           }
         }
         wrapper = Wrapper()
@@ -79,10 +81,10 @@ describe('Modal.vue', () => {
       })
 
       it('passes data to disable modal', () => {
-        expect(wrapper.find(DisableModal).props().resource).toEqual({
+        expect(wrapper.find(DisableModal).props()).toEqual({
           type: 'contribution',
           name: 'some title',
-          id: 456
+          id: 'c456'
         })
       })
 
@@ -92,6 +94,31 @@ describe('Modal.vue', () => {
           expect(wrapper.contains(DisableModal)).toBe(false)
         })
       })
+
+      describe('store/modal data contains a comment', () => {
+        it('passes author name to disable modal', () => {
+          state.data = {
+            type: 'comment',
+            resource: { id: 'c456', author: { name: 'Author name' } }
+          }
+          wrapper = Wrapper()
+          expect(wrapper.find(DisableModal).props()).toEqual({
+            type: 'comment',
+            name: 'Author name',
+            id: 'c456'
+          })
+        })
+
+        it('does not crash if author is undefined', () => {
+          state.data = { type: 'comment', resource: { id: 'c456' } }
+          wrapper = Wrapper()
+          expect(wrapper.find(DisableModal).props()).toEqual({
+            type: 'comment',
+            name: '',
+            id: 'c456'
+          })
+        })
+      })
     })
   })
 })

components/Modal.vue

@@ -2,12 +2,16 @@
   <div class="modal-wrapper">
     <disable-modal
       v-if="open === 'disable'"
-      :resource="data"
+      :id="data.resource.id"
+      :type="data.type"
+      :name="name"
       @close="close"
     />
     <report-modal
       v-if="open === 'report'"
-      :resource="data"
+      :id="data.resource.id"
+      :type="data.type"
+      :name="name"
       @close="close"
     />
   </div>
@@ -28,7 +32,23 @@ export default {
     ...mapGetters({
       data: 'modal/data',
       open: 'modal/open'
-    })
+    }),
+    name() {
+      if (!this.data || !this.data.resource) return ''
+      const {
+        resource: { name, title, author }
+      } = this.data
+      switch (this.data.type) {
+        case 'user':
+          return name
+        case 'contribution':
+          return title
+        case 'comment':
+          return author && author.name
+        default:
+          return null
+      }
+    }
   },
   methods: {
     close() {

components/Modal/DisableModal.spec.js

@@ -14,7 +14,11 @@ describe('DisableModal.vue', () => {
   let wrapper
 
   beforeEach(() => {
-    propsData = {}
+    propsData = {
+      type: 'contribution',
+      name: 'blah',
+      id: 'c42'
+    }
     mocks = {
       $filters: {
         truncate: a => a
@@ -38,10 +42,9 @@ describe('DisableModal.vue', () => {
     describe('given a user', () => {
       beforeEach(() => {
         propsData = {
-          resource: {
-            type: 'user',
-            name: 'Bob Ross'
-          }
+          type: 'user',
+          id: 'u2',
+          name: 'Bob Ross'
         }
       })
 
@@ -56,10 +59,9 @@ describe('DisableModal.vue', () => {
     describe('given a contribution', () => {
       beforeEach(() => {
         propsData = {
-          resource: {
-            type: 'contribution',
-            name: 'This is some post title.'
-          }
+          type: 'contribution',
+          id: 'c3',
+          name: 'This is some post title.'
         }
       })
 
@@ -83,9 +85,8 @@ describe('DisableModal.vue', () => {
     describe('given id', () => {
       beforeEach(() => {
         propsData = {
-          resource: {
-            id: 4711
-          }
+          type: 'user',
+          id: 'u4711'
         }
       })
 
@@ -129,7 +130,7 @@ describe('DisableModal.vue', () => {
         it('passes id to mutation', () => {
           const calls = mocks.$apollo.mutate.mock.calls
           const [[{ variables }]] = calls
-          expect(variables).toEqual({ id: 4711 })
+          expect(variables).toEqual({ id: 'u4711' })
         })
 
         it('fades away', () => {

components/Modal/DisableModal.vue

@@ -32,12 +32,9 @@ import gql from 'graphql-tag'
 
 export default {
   props: {
-    resource: {
-      type: Object,
-      default() {
-        return { id: null, type: 'contribution', name: '' }
-      }
-    }
+    name: { type: String, default: '' },
+    type: { type: String, required: true },
+    id: { type: String, required: true }
   },
   data() {
     return {
@@ -48,11 +45,11 @@ export default {
   },
   computed: {
     title() {
-      return this.$t(`disable.${this.resource.type}.title`)
+      return this.$t(`disable.${this.type}.title`)
     },
     message() {
-      const name = this.$filters.truncate(this.resource.name, 30)
-      return this.$t(`disable.${this.resource.type}.message`, { name })
+      const name = this.$filters.truncate(this.name, 30)
+      return this.$t(`disable.${this.type}.message`, { name })
     }
   },
   methods: {
@@ -70,7 +67,7 @@ export default {
               disable(id: $id)
             }
           `,
-          variables: { id: this.resource.id }
+          variables: { id: this.id }
         })
         this.$toast.success(this.$t('disable.success'))
         this.isOpen = false

components/Modal/ReportModal.spec.js

@@ -16,7 +16,10 @@ describe('ReportModal.vue', () => {
   let mocks
 
   beforeEach(() => {
-    propsData = {}
+    propsData = {
+      type: 'contribution',
+      id: 'c43'
+    }
     mocks = {
       $t: jest.fn(),
       $filters: {
@@ -50,10 +53,9 @@ describe('ReportModal.vue', () => {
     describe('given a user', () => {
       beforeEach(() => {
         propsData = {
-          resource: {
-            type: 'user',
-            name: 'Bob Ross'
-          }
+          type: 'user',
+          id: 'u4',
+          name: 'Bob Ross'
         }
       })
 
@@ -64,6 +66,23 @@ describe('ReportModal.vue', () => {
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
+
+    describe('given a post', () => {
+      beforeEach(() => {
+        propsData = {
+          id: 'p23',
+          type: 'post',
+          name: 'It is a post'
+        }
+      })
+
+      it('mentions post title', () => {
+        Wrapper()
+        const calls = mocks.$t.mock.calls
+        const expected = [['report.post.message', { name: 'It is a post' }]]
+        expect(calls).toEqual(expect.arrayContaining(expected))
+      })
+    })
   })
 
   describe('mount', () => {
@@ -80,9 +99,8 @@ describe('ReportModal.vue', () => {
     describe('given id', () => {
       beforeEach(() => {
         propsData = {
-          resource: {
-            id: 4711
-          }
+          type: 'user',
+          id: 'u4711'
         }
         wrapper = Wrapper()
       })

components/Modal/ReportModal.vue

@@ -51,12 +51,9 @@ export default {
     SweetalertIcon
   },
   props: {
-    resource: {
-      type: Object,
-      default() {
-        return { id: null, type: 'contribution', name: '' }
-      }
-    }
+    name: { type: String, default: '' },
+    type: { type: String, required: true },
+    id: { type: String, required: true }
   },
   data() {
     return {
@@ -67,11 +64,11 @@ export default {
   },
   computed: {
     title() {
-      return this.$t(`report.${this.resource.type}.title`)
+      return this.$t(`report.${this.type}.title`)
     },
     message() {
-      const name = this.$filters.truncate(this.resource.name, 30)
-      return this.$t(`report.${this.resource.type}.message`, { name })
+      const name = this.$filters.truncate(this.name, 30)
+      return this.$t(`report.${this.type}.message`, { name })
     }
   },
   methods: {
@@ -92,7 +89,7 @@ export default {
               }
             }
           `,
-          variables: { id: this.resource.id }
+          variables: { id: this.id }
         })
         this.success = true
         this.$toast.success(this.$t('report.success'))

components/PostCard.vue

@@ -52,8 +52,7 @@
         <no-ssr>
           <content-menu
             resource-type="contribution"
-            :item-id="post.id"
-            :name="post.title"
+            :resource="post"
             :is-owner="isAuthor"
           />
         </no-ssr>

locales/fr.json

@@ -133,7 +133,7 @@
     "comment": {
       "title": "Désactiver le commentaire",
       "type": "Commentaire",
-      "message": "Souhaitez-vous vraiment désactiver le commentaire de \"<b>{nom}</b>\" ?"
+      "message": "Souhaitez-vous vraiment désactiver le commentaire de \"<b>{name}</b>\" ?"
     }
   },
   "report": {
@@ -166,4 +166,4 @@
     "edit": "Rédiger un commentaire",
     "delete": "Supprimer le commentaire"
   }
-}
+}

pages/post/_slug/index.vue

@@ -14,8 +14,7 @@
         <content-menu
           placement="bottom-end"
           resource-type="contribution"
-          :item-id="post.id"
-          :name="post.title"
+          :resource="post"
           :is-owner="isAuthor(post.author.id)"
         />
       </no-ssr>

pages/profile/_slug.vue

@@ -24,8 +24,7 @@
             <content-menu
               placement="bottom-end"
               resource-type="user"
-              :item-id="user.id"
-              :name="user.name"
+              :resource="user"
               :is-owner="myProfile"
             />
           </no-ssr>