🔨 Redirect if guild is not available

.vscode/settings.json

@@ -13,5 +13,7 @@
   "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
   "javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
   "javascript.inlayHints.parameterNames.enabled": "literals",
-  
+  "emmet.includeLanguages": {
+    "vue": "html"
+  }
 }

src/stores/mutualGuilds.ts

@@ -6,7 +6,7 @@ export const useMutualGuildsStore = defineStore({
   state: () => ({
     guilds: [] as Array<Guild>,
     loaded: false,
-    lastGuildId: "",
+    lastGuildId: undefined as string | undefined,
   }),
   getters: {},
   actions: {

src/tools/GuildTools.ts

@@ -0,0 +1,20 @@
+import type { Guild } from "@/data/Guild";
+import { useMutualGuildsStore } from "@/stores/mutualGuilds";
+import type { Router } from "vue-router";
+
+function redirectIfNoGuild(guild: Guild | undefined, router: Router) {
+  const guildStore = useMutualGuildsStore();
+  if (!guild) {
+    guildStore.lastGuildId = guildStore.guilds[0]?.id;
+    if (guildStore.lastGuildId) {
+      router.push({
+        name: "guildHome",
+        params: { guildId: guildStore.lastGuildId },
+      });
+    } else {
+      router.push({ name: "home" });
+    }
+  }
+}
+
+export { redirectIfNoGuild };

src/views/GuildHomeView.vue

@@ -1,9 +1,13 @@
 <template>
+  <div>
     <v-row>
       <v-col>
         <v-card>
           <v-card-title class="d-flex">
-          <v-avatar :color="guild?.iconUrl ? '' : 'grey-darken-3'" class="mr-3">
+            <v-avatar
+              :color="guild?.iconUrl ? '' : 'grey-darken-3'"
+              class="mr-3"
+            >
               <v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
               <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
             </v-avatar>
@@ -34,25 +38,30 @@
         </v-container>
       </v-col>
     </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useMutualGuildsStore } from "@/stores/mutualGuilds";
 import { ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
 import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
 import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
+import { redirectIfNoGuild } from "@/tools/GuildTools";
 
 const guildStore = useMutualGuildsStore();
 const route = useRoute();
+const router = useRouter();
 
 const guild = ref(guildStore.getGuild(route.params.guildId as string));
-
+redirectIfNoGuild(guild.value, router);
 watch(
   () => route.params.guildId,
   (value, oldValue) => {
     guild.value = guildStore.getGuild(value as string);
+    guildStore.lastGuildId = guild.value?.id;
+    redirectIfNoGuild(guild.value, router);
   }
 );
 </script>

src/views/HomeView.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <v-row v-if="!userStore.isLoggedIn">
       <v-col>
         <v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
@@ -6,6 +7,7 @@
         </v-btn>
       </v-col>
     </v-row>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -20,12 +22,14 @@ const router = useRouter();
 onBeforeMount(() => {
   if (userStore.isLoggedIn) {
     if (!mutualGuildStore.lastGuildId) {
-      mutualGuildStore.lastGuildId = mutualGuildStore.guilds[0].id;
+      mutualGuildStore.lastGuildId = mutualGuildStore.guilds[0]?.id;
     }
+    if (mutualGuildStore.lastGuildId) {
       router.push({
         name: "guildHome",
         params: { guildId: mutualGuildStore.lastGuildId },
       });
     }
+  }
 });
 </script>