Follows + Reports

pages/dashboard/moderation.vue

@@ -4,7 +4,7 @@
       <h3 class="column-grow-1">Mods</h3>
     </div>
     <ModCard
-      v-for="mod in mods"
+      v-for="(mod, index) in mods"
       :id="mod.id"
       :key="mod.id"
       :author="mod.author"
@@ -24,17 +24,49 @@
     >
       <button
         class="button column approve"
-        @click="changeModStatus(mod.id, 'approved')"
+        @click="changeModStatus(mod.id, 'approved', index)"
       >
         Approve
       </button>
       <button
         class="button column reject"
-        @click="changeModStatus(mod.id, 'rejected')"
+        @click="changeModStatus(mod.id, 'rejected', index)"
       >
         Reject
       </button>
     </ModCard>
+    <div class="section-header">
+      <h3 class="column-grow-1">Reports</h3>
+    </div>
+    <div v-for="(report, index) in reports" :key="report.id" class="report">
+      <div class="header">
+        <h5 class="title">
+          Report for {{ report.item_type }}
+          <nuxt-link
+            :to="report.item_type + '/' + report.item_id.replace(/\W/g, '')"
+            >{{ report.item_id }}</nuxt-link
+          >
+        </h5>
+        <p
+          v-tooltip="
+            $dayjs(report.created).format(
+              '[Created at] YYYY-MM-DD [at] HH:mm A'
+            )
+          "
+          class="date"
+        >
+          Created {{ $dayjs(report.created).fromNow() }}
+        </p>
+        <button class="delete iconified-button" @click="deleteReport(index)">
+          Delete
+        </button>
+      </div>
+      <div
+        v-compiled-markdown="report.body"
+        v-highlightjs
+        class="markdown-body"
+      ></div>
+    </div>
   </DashboardPage>
 </template>
 
@@ -62,12 +94,17 @@ export default {
       await axios.get(`https://api.modrinth.com/api/v1/moderation/mods`, config)
     ).data
 
+    const reports = (
+      await axios.get(`https://api.modrinth.com/api/v1/report`, config)
+    ).data
+
     return {
       mods,
+      reports,
     }
   },
   methods: {
-    async changeModStatus(id, status) {
+    async changeModStatus(id, status, index) {
       const config = {
         headers: {
           Authorization: this.$auth.getToken('local')
@@ -84,7 +121,23 @@ export default {
         config
       )
 
-      await this.$router.go(0)
+      this.mods.splice(index, 1)
+    },
+    async deleteReport(index) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local')
+            ? this.$auth.getToken('local')
+            : '',
+        },
+      }
+
+      await axios.delete(
+        `https://api.modrinth.com/api/v1/report/${this.reports[index].id}`,
+        config
+      )
+
+      this.reports.splice(index, 1)
     },
   },
 }
@@ -94,4 +147,24 @@ export default {
 .button {
   margin: 0.25rem 0;
 }
+
+.report {
+  @extend %card-spaced-b;
+  padding: var(--spacing-card-sm) var(--spacing-card-lg);
+
+  .header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    .title {
+      font-size: var(--font-size-lg);
+      margin: 0 0.5rem 0 0;
+    }
+
+    .iconified-button {
+      margin-left: auto;
+    }
+  }
+}
 </style>

pages/dashboard/notifications.vue

@@ -79,12 +79,8 @@ export default {
       try {
         if (index) {
           const config = {
-            method: Object.keys(
-              notification.actions[index].action_route
-            )[0].toLowerCase(),
-            url: `https://api.modrinth.com/api/v1/${
-              Object.values(notification.actions[index].action_route)[0]
-            }`,
+            method: notification.actions[index].action_route[0].toLowerCase(),
+            url: `https://api.modrinth.com/api/v1/${notification.actions[index].action_route[1]}`,
             headers: {
               Authorization: this.$auth.getToken('local'),
             },