From 60621855f8a3282cd7e7154f56856cddb4cf2c9c Mon Sep 17 00:00:00 2001
From: Androz2091 <androz2091@gmail.com>
Date: Thu, 18 Feb 2021 11:30:18 +0100
Subject: [PATCH] :sparkles: Add application info on home page

---
 src/App.vue        |  6 ++++--
 src/store/index.js |  6 +++++-
 src/views/Home.vue | 19 ++++++++++++++++---
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fc901d5..77dfe9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { fetchCommands } from './api';
+import { fetchApplication, fetchCommands } from './api';
 import NavigationBar from './components/NavigationBar.vue';
 import LoadingAnimation from './components/LoadingAnimation.vue';
 
@@ -98,7 +98,9 @@ export default {
                 this.$router.push('/settings');
             } else {
                 const startAt = Date.now();
-                fetchCommands(this.$store.state.clientID, this.$store.state.token.value, this.$store.state.proxyURL, this.$store.state.selectedGuildID).then((commands) => {
+                fetchCommands(this.$store.state.clientID, this.$store.state.token.value, this.$store.state.proxyURL, this.$store.state.selectedGuildID).then(async (commands) => {
+                    const app = await fetchApplication(this.$store.state.clientID).catch(() => {});
+                    if (app) this.$store.commit('SET_APPLICATION_NAME', app.username);
                     setTimeout(() => {
                         this.$store.commit('SET_COMMANDS', commands);
                         this.loading = false;
diff --git a/src/store/index.js b/src/store/index.js
index fa08217..bd78542 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -21,7 +21,8 @@ export default createStore({
             },
 
             // data loaded on each reload
-            commands: null
+            commands: null,
+            applicationName: null
         };
     },
     getters: {
@@ -99,6 +100,9 @@ export default createStore({
         },
         UPDATE_TOKEN (state, token) {
             state.token = token;
+        },
+        SET_APPLICATION_NAME (state, name) {
+            state.applicationName = name;
         }
     }
 });
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 400ab5b..2ea1ca0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,20 @@
 <template>
-    <h1 class="text-center text-3xl p-10">
-        Slash Commands
-    </h1>
+    <div class="text-center p-10">
+        <h1 class="text-3xl mb-4">
+            {{ $store.state.selectedGuildID ? `Slash Commands` : 'Global Slash Commands' }}
+        </h1>
+        You are currently managing the {{ !$store.state.selectedGuildID ? 'Global' : '' }} Slash Commands of <p class="link inline">
+            {{ $store.state.applicationName }}
+        </p>
+        <div
+            v-if="$store.state.selectedGuildID"
+            class="inline"
+        >
+            on the guild <p class="link inline">
+                {{ $store.state.selectedGuildID }}
+            </p>
+        </div>
+    </div>
     <div class="container md:mx-auto">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
             <CreateSlashCommand />