✨ Add application info on home page

Androz2091 · Feb 18, 2021 · 6062185 · 6062185
1 parent 54f40da
commit 6062185
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 />