From e8d2959350ff27c5039a51d3fb3380f5e8d49436 Mon Sep 17 00:00:00 2001
From: Emma <emmaffle@modrinth.com>
Date: Mon, 23 Aug 2021 08:31:44 -0400
Subject: [PATCH] Add follow count & user ID to user page (#253)

* Add follows & user ID to user page
Closes #192

* Why did package lock change?

* Change name follows -> followers
---
 pages/user/_id.vue | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 2985b911..b3c4f5fc 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -29,6 +29,24 @@
           </div>
         </div>
         <div class="card stats">
+          <div class="stat">
+            <DownloadIcon />
+            <div class="info">
+              <h4>Downloads</h4>
+              <p class="value">
+                {{ sumDownloads() }}
+              </p>
+            </div>
+          </div>
+          <div class="stat">
+            <HeartIcon />
+            <div class="info">
+              <h4>Followers</h4>
+              <p class="value">
+                {{ sumFollowers() }}
+              </p>
+            </div>
+          </div>
           <div class="stat">
             <CalendarIcon />
             <div class="info">
@@ -46,12 +64,10 @@
             </div>
           </div>
           <div class="stat">
-            <DownloadIcon />
+            <UserIcon />
             <div class="info">
-              <h4>Downloads</h4>
-              <p class="value">
-                {{ sumDownloads() }}
-              </p>
+              <h4>User ID</h4>
+              <p class="value">{{ user.id }}</p>
             </div>
           </div>
         </div>
@@ -95,6 +111,8 @@ import MFooter from '~/components/layout/MFooter'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import HeartIcon from '~/assets/images/utils/heart.svg?inline'
+import UserIcon from '~/assets/images/utils/user.svg?inline'
 import Advertisement from '~/components/ads/Advertisement'
 
 export default {
@@ -106,6 +124,8 @@ export default {
     DownloadIcon,
     MFooter,
     ReportIcon,
+    HeartIcon,
+    UserIcon,
   },
   async asyncData(data) {
     try {
@@ -141,6 +161,15 @@ export default {
         sum += mod.downloads
       }
 
+      return this.formatNumber(sum)
+    },
+    sumFollowers() {
+      let sum = 0
+
+      for (const mod of this.mods) {
+        sum += mod.followers
+      }
+
       return this.formatNumber(sum)
     },
   },
@@ -173,7 +202,7 @@ export default {
           name: 'description',
           content:
             this.user.bio +
-            ' - View minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform that is compatible with CurseForge too!',
+            ' - View Minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform.',
         },
         {
           hid: 'og:url',
@@ -230,6 +259,8 @@ export default {
     display: flex;
     flex-wrap: wrap;
     .stat {
+      width: 8.5rem;
+      margin: 0.5rem;
       @extend %stat;
 
       svg {