🔨 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,58 +1,67 @@
 <template>
-  <v-row>
-    <v-col>
-      <v-card>
-        <v-card-title class="d-flex">
-          <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>
-          <span class="mr-auto">{{ guild?.name }}</span>
-          <v-icon
-            icon="mdi-account-wrench"
-            color="green"
-            v-if="guild?.canManage"
-          ></v-icon>
-        </v-card-title>
-      </v-card>
-    </v-col>
-  </v-row>
-  <v-row>
-    <v-col>
-      <v-container>
-        <v-row>
-          <v-col cols="6">
-            <MusicPreviewComponent></MusicPreviewComponent>
-          </v-col>
-          <v-col cols="6">
-            <StatsPreviewComponent></StatsPreviewComponent>
-          </v-col>
-          <v-col cols="6">
-            <SettingPreviewComponent />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-col>
-  </v-row>
+  <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-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
+              <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
+            </v-avatar>
+            <span class="mr-auto">{{ guild?.name }}</span>
+            <v-icon
+              icon="mdi-account-wrench"
+              color="green"
+              v-if="guild?.canManage"
+            ></v-icon>
+          </v-card-title>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-container>
+          <v-row>
+            <v-col cols="6">
+              <MusicPreviewComponent></MusicPreviewComponent>
+            </v-col>
+            <v-col cols="6">
+              <StatsPreviewComponent></StatsPreviewComponent>
+            </v-col>
+            <v-col cols="6">
+              <SettingPreviewComponent />
+            </v-col>
+          </v-row>
+        </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,11 +1,13 @@
 <template>
-  <v-row v-if="!userStore.isLoggedIn">
-    <v-col>
-      <v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
-        Login
-      </v-btn>
-    </v-col>
-  </v-row>
+  <div>
+    <v-row v-if="!userStore.isLoggedIn">
+      <v-col>
+        <v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
+          Login
+        </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 },
+      });
     }
-    router.push({
-      name: "guildHome",
-      params: { guildId: mutualGuildStore.lastGuildId },
-    });
   }
 });
 </script>