switch to useFetch and fixed ts bugs in view characters and view camp…

…aigns (#27)
Turizak · Oct 23, 2024 · 9740deb · 9740deb
1 parent 009a8ea
commit 9740deb
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 20 deletions.
diff --git a/components/View-Campaign.vue b/components/View-Campaign.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import type { Campaign, Props } from "~/types/types";
+import type { Campaign } from "~/types/types";
 
-const { data } = defineProps<Props<{ data: Campaign }>>();
-const campaign = data.data;
+type Props<T> = {
+  campaign: T;
+};
+
+const { campaign } = defineProps<Props<Campaign>>();
 </script>
 
 <template>

diff --git a/components/View-Character.vue b/components/View-Character.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import type { Character, Props } from "~/types/types";
+import type { Character } from "~/types/types";
 
-const { data } = defineProps<Props<{ data: Character }>>();
-const character = data.data;
+type Props<T> = {
+  character: T;
+};
+
+const { character } = defineProps<Props<Character>>();
 </script>
 
 <template>

diff --git a/stores/authStore.ts b/stores/authStore.ts
@@ -63,23 +63,63 @@ export const useAuthStore = defineStore("auth", () => {
   };
 
   // Function to refresh the token
+  // const refreshAuthToken = async () => {
+  //   if (!refreshToken.value) return;
+  //   try {
+  //     const response = await $fetch<AuthResponse>(config.public.baseURL + "/account/token/refresh", {
+  //       method: "POST",
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //       body: JSON.stringify({
+  //         refreshToken: refreshToken.value,
+  //       }),
+  //     });
+  //     const newToken = response.data.tokens.accessToken;
+  //     const newRefreshToken = response.data.tokens.refreshToken;
+  //     setToken(newToken);
+  //     setRefreshToken(newRefreshToken);
+  //     console.log("Token refreshed successfully");
+  //   } catch (error) {
+  //     console.error("Failed to refresh token:", error);
+  //     clearTokens();
+  //     await navigateTo("/login");
+  //   }
+  // };
+
   const refreshAuthToken = async () => {
     if (!refreshToken.value) return;
+
     try {
-      const response = await $fetch<AuthResponse>(config.public.baseURL + "/account/token/refresh", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          refreshToken: refreshToken.value,
-        }),
-      });
-      const newToken = response.data.tokens.accessToken;
-      const newRefreshToken = response.data.tokens.refreshToken;
-      setToken(newToken);
-      setRefreshToken(newRefreshToken);
-      console.log("Token refreshed successfully");
+      const { data, error } = await useFetch<AuthResponse>(
+        config.public.baseURL + "/account/token/refresh", 
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            refreshToken: refreshToken.value,
+          }),
+        }
+      );
+
+      if (error.value) {
+        console.error("Failed to refresh token:", error.value);
+        clearTokens();
+        await navigateTo("/login");
+        return;
+      }
+
+      // Use data.value since useFetch returns a Ref
+      const newToken = data.value?.data.tokens.accessToken;
+      const newRefreshToken = data.value?.data.tokens.refreshToken;
+
+      if (newToken && newRefreshToken) {
+        setToken(newToken);
+        setRefreshToken(newRefreshToken);
+        console.log("Token refreshed successfully");
+      }
     } catch (error) {
       console.error("Failed to refresh token:", error);
       clearTokens();