Centralized and refactored report mutations and queries

webapp/components/Modal/ReportModal.vue

@@ -68,8 +68,8 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
+import { reportMutation } from '~/graphql/Moderation.js'
 
 export default {
   name: 'ReportModal',
@@ -173,13 +173,7 @@ export default {
       // await this.modalData.buttons.confirm.callback()
       this.$apollo
         .mutate({
-          mutation: gql`
+          mutation: reportMutation(),
-            mutation($id: ID!, $reasonCategory: String!, $description: String!) {
-              report(id: $id, reasonCategory: $reasonCategory, description: $description) {
-                id
-              }
-            }
-          `,
           variables: {
             id: this.id,
             reasonCategory: reasonCategory.value,

webapp/graphql/Moderation.js

@@ -1,13 +1,14 @@
 import gql from 'graphql-tag'
 
-export default app => {
+export const reportListQuery = () => {
   return gql`
     query {
       Report(first: 20, orderBy: createdAt_desc) {
         id
+        createdAt
+        reasonCategory
         description
         type
-        createdAt
         submitter {
           id
           slug
@@ -79,3 +80,13 @@ export default app => {
     }
   `
 }
+
+export const reportMutation = () => {
+  return gql`
+    mutation($id: ID!, $reasonCategory: String!, $description: String!) {
+      report(id: $id, reasonCategory: $reasonCategory, description: $description) {
+        id
+      }
+    }
+  `
+}

webapp/pages/moderation/index.vue

@@ -110,7 +110,7 @@
 
 <script>
 import HcEmpty from '~/components/Empty.vue'
-import query from '~/graphql/ModerationListQuery.js'
+import { reportListQuery } from '~/graphql/Moderation.js'
 
 export default {
   components: {
@@ -134,7 +134,7 @@ export default {
   },
   apollo: {
     Report: {
-      query,
+      query: reportListQuery(),
       fetchPolicy: 'cache-and-network',
     },
   },