Cleaner request formatting

pages/dashboard/moderation.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="page-container">
+    <div class="page-contents">
+      <div class="sidebar-l">
+        <div class="card page-nav">
+          <nuxt-link :to="'/dashboard/projects'" class="tab last">
+            <ModIcon />
+            My mods
+          </nuxt-link>
+          <nuxt-link
+            v-if="
+              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
+            "
+            :to="'/dashboard/moderation'"
+            class="tab last"
+          >
+            <ModerationIcon />
+            Moderation
+          </nuxt-link>
+        </div>
+        <client-only>
+          <EthicalAd type="image" />
+        </client-only>
+      </div>
+      <div class="content">
+        <div class="section-header">
+          <h3 class="column-grow-1">Mods</h3>
+        </div>
+        <ModCard
+          v-for="mod in mods"
+          :id="mod.id"
+          :key="mod.id"
+          :author="mod.author"
+          :name="mod.title"
+          :description="mod.description"
+          :latest-version="mod.latest_version"
+          :created-at="mod.published"
+          :updated-at="mod.updated"
+          :downloads="mod.downloads.toString()"
+          :icon-url="mod.icon_url"
+          :author-url="mod.author_url"
+          :page-url="mod.page_url"
+          :categories="mod.categories"
+          :edit-mode="true"
+          :status="mod.status"
+          :is-modrinth="true"
+        />
+        <div class="section-header">
+          <h3 class="column-grow-1">Versions</h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import EthicalAd from '@/components/EthicalAd'
+import ModCard from '@/components/ProjectCard'
+
+import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
+
+export default {
+  components: {
+    EthicalAd,
+    ModCard,
+    ModIcon,
+    ModerationIcon,
+  },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local'),
+      },
+    }
+
+    let res = await axios.get(
+      `https://api.modrinth.com/api/v1/moderation/mods`,
+      config
+    )
+
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`,
+      config
+    )
+
+    const mods = res.data
+
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/moderation/versions`,
+      config
+    )
+
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+        res.data
+      )}`,
+      config
+    )
+
+    return {
+      mods,
+      versions: res.data,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.section-header {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-md);
+  h3 {
+    margin: auto 0;
+    color: var(--color-text-dark);
+    font-weight: var(--font-weight-extrabold);
+  }
+}
+</style>

pages/dashboard/projects.vue

@@ -7,6 +7,16 @@
             <ModIcon />
             My mods
           </nuxt-link>
+          <nuxt-link
+            v-if="
+              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
+            "
+            :to="'/dashboard/moderation'"
+            class="tab last"
+          >
+            <ModerationIcon />
+            Moderation
+          </nuxt-link>
         </div>
         <client-only>
           <EthicalAd type="image" />
@@ -49,12 +59,14 @@ import EthicalAd from '@/components/EthicalAd'
 import ModCard from '@/components/ProjectCard'
 
 import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 
 export default {
   components: {
     EthicalAd,
     ModCard,
     ModIcon,
+    ModerationIcon,
   },
   async asyncData(data) {
     const config = {
@@ -92,86 +104,6 @@ export default {
   }
 }
 
-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  margin-bottom: var(--spacing-card-md);
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
-
-  * {
-    text-align: left;
-  }
-
-  tr:not(:last-child),
-  tr:first-child {
-    th,
-    td {
-      border-bottom: 1px solid var(--color-divider);
-    }
-  }
-
-  th,
-  td {
-    &:first-child {
-      text-align: center;
-      width: 7%;
-    }
-
-    &:nth-child(2) {
-      padding-left: 0;
-      width: 30%;
-    }
-  }
-
-  th {
-    color: var(--color-heading);
-    font-size: 0.8rem;
-    letter-spacing: 0.02rem;
-    margin-bottom: 0.5rem;
-    margin-top: 1.5rem;
-    padding: 1rem 1rem;
-    text-transform: uppercase;
-  }
-
-  td {
-    padding: 0.75rem;
-
-    img {
-      height: 3rem;
-      width: 3rem;
-    }
-  }
-}
-
-@media screen and (max-width: 550px) {
-  th,
-  td {
-    &:nth-child(1) {
-      img {
-        height: 2rem;
-        width: 2rem;
-      }
-    }
-    &:nth-child(3) {
-      display: none;
-    }
-  }
-}
-
-@media screen and (max-width: 850px) {
-  th,
-  td {
-    &:nth-child(2) {
-      width: 25% !important;
-    }
-    &:nth-child(6) {
-      display: none;
-    }
-  }
-}
-
 .mod-name {
   font-weight: bold;
 }

pages/mod/_id/index.vue

@@ -18,36 +18,39 @@ export default {
       },
     }
 
-    let res = await axios.get(
-      `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
-      config
-    )
-    const mod = res.data
-
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
-      config
-    )
-    const members = res.data
-    for (let i = 0; i < members.length; i++) {
-      res = await axios.get(
-        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+    const mod = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
         config
       )
-      members[i].avatar_url = res.data.avatar_url
+    ).data
+
+    const members = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
+        config
+      )
+    ).data
+    for (let i = 0; i < members.length; i++) {
+      members[i].avatar_url = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+          config
+        )
+      ).data.avatar_url
     }
 
+    const versions = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+          mod.versions
+        )}`,
+        config
+      )
+    ).data.reverse()
+
     const body = (await axios.get(mod.body_url)).data
 
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-        mod.versions
-      )}`,
-      config
-    )
-
-    const versions = res.data.reverse()
-
     return {
       mod,
       body,

pages/mod/_id/version/_version.vue

@@ -125,33 +125,36 @@ export default {
       },
     }
 
-    let res = await axios.get(
-      `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
-      config
-    )
-    const mod = res.data
-
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
-      config
-    )
-    const members = res.data
-    for (let i = 0; i < members.length; i++) {
-      res = await axios.get(
-        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+    const mod = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
         config
       )
-      members[i].avatar_url = res.data.avatar_url
+    ).data
+
+    const members = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
+        config
+      )
+    ).data
+    for (let i = 0; i < members.length; i++) {
+      members[i].avatar_url = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+          config
+        )
+      ).data.avatar_url
     }
 
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-        mod.versions
-      )}`,
-      config
-    )
-
-    const versions = res.data.reverse()
+    const versions = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+          mod.versions
+        )}`,
+        config
+      )
+    ).data.reverse()
 
     const version = versions.find((x) => x.id === data.params.version)
 

pages/mod/_id/versions.vue

@@ -224,39 +224,44 @@ export default {
       },
     }
 
-    let res = await axios.get(
-      `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
-      config
-    )
-    const mod = res.data
-
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
-      config
-    )
-    const members = res.data
-    for (let i = 0; i < members.length; i++) {
-      res = await axios.get(
-        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+    const mod = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
         config
       )
-      members[i].avatar_url = res.data.avatar_url
+    ).data
+
+    const members = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
+        config
+      )
+    ).data
+    for (let i = 0; i < members.length; i++) {
+      members[i].avatar_url = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
+          config
+        )
+      ).data.avatar_url
     }
 
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-        mod.versions
-      )}`,
-      config
-    )
+    const versions = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+          mod.versions
+        )}`,
+        config
+      )
+    ).data.reverse()
 
-    const versions = res.data.reverse()
+    const selectableLoaders = (
+      await axios.get(`https://api.modrinth.com/api/v1/tag/loader`)
+    ).data
 
-    res = await axios.get(`https://api.modrinth.com/api/v1/tag/loader`)
-    const selectableLoaders = res.data
-
-    res = await axios.get(`https://api.modrinth.com/api/v1/tag/game_version`)
-    const selectableVersions = res.data
+    const selectableVersions = (
+      await axios.get(`https://api.modrinth.com/api/v1/tag/game_version`)
+    ).data
 
     return {
       mod,