Added illustration & mezssage when a page doe not contain any mod / projects (#133)

* Added new messages with illustration displaying that this page does not contain any elements
Fixed 404 error after deleting mod

* Fixed typo

pages/dashboard/follows.vue

@@ -3,34 +3,44 @@
     <div class="section-header">
       <h3 class="column-grow-1">Followed mods</h3>
     </div>
-    <ModCard
-      v-for="(mod, index) 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"
-      :is-modrinth="true"
-    >
-      <div class="buttons">
-        <button
-          class="button column unfav-button iconified-button"
-          @click="unfavMod(index)"
-        >
-          <FollowIcon />
-          Unfollow
-        </button>
-      </div>
-    </ModCard>
+    <div v-if="mods.length !== 0">
+      <ModCard
+        v-for="(mod, index) 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"
+        :is-modrinth="true"
+      >
+        <div class="buttons">
+          <button
+            class="button column unfav-button iconified-button"
+            @click="unfavMod(index)"
+          >
+            <FollowIcon />
+            Unfollow
+          </button>
+        </div>
+      </ModCard>
+    </div>
+    <div v-else class="error">
+      <FollowIllustration class="icon"></FollowIllustration><br />
+      <span class="text"
+        >You don't have any followed mods. <br />
+        Why don't you <nuxt-link to="/mods" class="link">search</nuxt-link> for
+        new ones?</span
+      >
+    </div>
   </DashboardPage>
 </template>
 
@@ -40,12 +50,14 @@ import axios from 'axios'
 import ModCard from '@/components/ProjectCard'
 import DashboardPage from '@/components/DashboardPage'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
+import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
 
 export default {
   components: {
     DashboardPage,
     ModCard,
     FollowIcon,
+    FollowIllustration,
   },
   async asyncData(data) {
     const res = await axios.get(
@@ -58,7 +70,6 @@ export default {
         `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`
       )
     ).data
-
     return {
       mods,
     }
@@ -100,4 +111,27 @@ export default {
   margin-left: auto;
   padding: 0.5rem;
 }
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+
+  .text {
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+    text-align: center;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+}
 </style>

pages/dashboard/moderation.vue

@@ -3,71 +3,84 @@
     <div class="section-header">
       <h3 class="column-grow-1">Mods</h3>
     </div>
-    <ModCard
-      v-for="(mod, index) 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="buttons">
-        <button
-          class="button column approve"
-          @click="changeModStatus(mod.id, 'approved', index)"
-        >
-          Approve
-        </button>
-        <button
-          class="button column reject"
-          @click="changeModStatus(mod.id, 'rejected', index)"
-        >
-          Reject
-        </button>
-      </div>
-    </ModCard>
+    <div v-if="mods.length !== 0">
+      <ModCard
+        v-for="(mod, index) 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="buttons">
+          <button
+            class="button column approve"
+            @click="changeModStatus(mod.id, 'approved', index)"
+          >
+            Approve
+          </button>
+          <button
+            class="button column reject"
+            @click="changeModStatus(mod.id, 'rejected', index)"
+          >
+            Reject
+          </button>
+        </div>
+      </ModCard>
+    </div>
+    <div v-else class="error">
+      <Security class="icon"></Security>
+      <br />
+      <span class="text">You are up-to-date!</span>
+    </div>
     <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
+    <div v-if="reports.length !== 0">
+      <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"
           >
-        </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>
+            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>
-      <div
-        v-compiled-markdown="report.body"
-        v-highlightjs
-        class="markdown-body"
-      ></div>
+    </div>
+    <div v-else class="error">
+      <Security class="icon"></Security><br />
+      <span class="text">You are up-to-date!</span>
     </div>
   </DashboardPage>
 </template>
@@ -77,11 +90,13 @@ import axios from 'axios'
 
 import ModCard from '@/components/ProjectCard'
 import DashboardPage from '@/components/DashboardPage'
+import Security from '~/assets/images/illustrations/security.svg?inline'
 
 export default {
   components: {
     DashboardPage,
     ModCard,
+    Security,
   },
   async asyncData(data) {
     const mods = (
@@ -159,4 +174,23 @@ export default {
     }
   }
 }
+
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+
+  .text {
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+  }
+}
 </style>

pages/dashboard/notifications.vue

@@ -3,54 +3,62 @@
     <div class="section-header columns">
       <h3 class="column-grow-1">My notifications</h3>
     </div>
-    <div
-      v-for="notification in notifications"
-      :key="notification.id"
-      class="notification columns"
-    >
-      <div class="text">
-        <nuxt-link :to="'/' + notification.link" class="top-wrapper">
-          <h3 class="title">
-            {{ notification.title }}
-          </h3>
-          <p
-            v-tooltip="
-              $dayjs(notification.created).format(
-                '[Created at] YYYY-MM-DD [at] HH:mm A'
-              )
-            "
-            class="date"
-          >
-            Notified {{ $dayjs(notification.created).fromNow() }}
+    <div v-if="notifications.length !== 0">
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        class="notification columns"
+      >
+        <div class="text">
+          <nuxt-link :to="'/' + notification.link" class="top-wrapper">
+            <h3 class="title">
+              {{ notification.title }}
+            </h3>
+            <p
+              v-tooltip="
+                $dayjs(notification.created).format(
+                  '[Created at] YYYY-MM-DD [at] HH:mm A'
+                )
+              "
+              class="date"
+            >
+              Notified {{ $dayjs(notification.created).fromNow() }}
+            </p>
+          </nuxt-link>
+          <p class="description">
+            {{ notification.text }}
           </p>
-        </nuxt-link>
-        <p class="description">
-          {{ notification.text }}
-        </p>
-      </div>
-      <div v-if="notification.actions.length > 0" class="actions">
-        <button
-          v-for="(action, index) in notification.actions"
-          :key="index"
-          @click="performAction(notification, index)"
-        >
-          {{ action.title }}
-        </button>
-      </div>
-      <div v-else class="actions">
-        <button @click="performAction(notification, null)">Dismiss</button>
+        </div>
+        <div v-if="notification.actions.length > 0" class="actions">
+          <button
+            v-for="(action, index) in notification.actions"
+            :key="index"
+            @click="performAction(notification, index)"
+          >
+            {{ action.title }}
+          </button>
+        </div>
+        <div v-else class="actions">
+          <button @click="performAction(notification, null)">Dismiss</button>
+        </div>
       </div>
     </div>
+    <div v-else class="error">
+      <UpToDate class="icon"></UpToDate><br />
+      <span class="text">You are up-to-date!</span>
+    </div>
   </DashboardPage>
 </template>
 
 <script>
 import axios from 'axios'
 import DashboardPage from '@/components/DashboardPage'
+import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
     DashboardPage,
+    UpToDate,
   },
   async asyncData(data) {
     const notifications = (
@@ -127,4 +135,26 @@ export default {
     margin: 0;
   }
 }
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+
+  .text {
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+}
 </style>

pages/dashboard/projects.vue

@@ -6,32 +6,42 @@
         Create a mod
       </nuxt-link>
     </div>
-    <ModCard
-      v-for="mod in mods"
-      :id="mod.slug ? mod.slug : 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"
-    >
-      <nuxt-link
-        class="button column edit-button"
-        :to="'/mod/' + mod.id + '/settings'"
+    <div v-if="mods.length !== 0">
+      <ModCard
+        v-for="mod in mods"
+        :id="mod.slug ? mod.slug : 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"
       >
-        Settings
-      </nuxt-link>
-    </ModCard>
+        <nuxt-link
+          class="button column edit-button"
+          :to="'/mod/' + mod.id + '/settings'"
+        >
+          Settings
+        </nuxt-link>
+      </ModCard>
+    </div>
+    <div v-else class="error">
+      <UpToDate class="icon"></UpToDate><br />
+      <span class="text"
+        >You don't have any mods.<br />
+        Would you like to
+        <nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
+      >
+    </div>
   </DashboardPage>
 </template>
 
@@ -39,11 +49,13 @@
 import axios from 'axios'
 import ModCard from '@/components/ProjectCard'
 import DashboardPage from '@/components/DashboardPage'
+import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
     DashboardPage,
     ModCard,
+    UpToDate,
   },
   async asyncData(data) {
     let res = await axios.get(
@@ -72,6 +84,31 @@ export default {
   align-self: flex-end;
   margin-right: 2rem;
 }
+
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+
+  .text {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+}
+
 // .buttonse {
 //   margin-left: 4.5rem;
 //   padding: 0.5rem 2rem 0.5rem 2rem;

pages/mod/_id/settings.vue

@@ -406,6 +406,7 @@ export default {
         `https://api.modrinth.com/api/v1/mod/${this.mod.id}`,
         this.$auth.headers
       )
+      await this.$router.push('/dashboard/projects')
     },
   },
 }