Feat/total games

components/profile/ProfileInformation.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 
 const session = useSupabaseSession()
-const { user, loading, error, fetchUser } = useUser()
+const { user, loading, error, fetchUser, fetchTotalGames } = useUser()
+const { fetchGames } = useGame()
+
+const totalGames = useState<string | null>('userTotalGames', () => null)
 
 onMounted(async () => {
   if (session.value) {
-    await fetchUser()
+    await fetchUser();
+    await fetchGames();
+    await fetchTotalGames();
   }
 })
 
@@ -33,7 +38,8 @@ const formatDate = (dateString: string) => {
 
       <div class="grid grid-cols-2 gap-2">
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
-          Games played
+          <Icon name="mdi:controller" class="text-2xl mr-2 text-red-600" />
+          {{ totalGames }} Games
         </div>
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
           <Icon name="mdi:fire" class="text-2xl mr-2 text-red-600" />

composables/useSpotify.ts

@@ -95,7 +95,8 @@ export default function useSpotify(playlistId: string) {
             const data = await res.json();
 
             for (const item of data.items) {
-                const itemCount = await getPlaylistItems(item.id);
+                const itemCount = item.tracks.total
+                console.log(itemCount)
                 if (itemCount >= 8) {
                     const exists = userPlaylists.value.some(playlist => playlist.id === item.id);
                     if (!exists) {
@@ -117,29 +118,6 @@ export default function useSpotify(playlistId: string) {
         }
     }
 
-    async function getPlaylistItems(playlistId: string): Promise<number> {
-        try {
-            const res = await fetch(`https://api.spotify.com/v1/playlists/${ playlistId }/tracks`, {
-                method: 'GET',
-                headers: {
-                    'Authorization': `Bearer ${token.value}`,
-                },
-            });
-
-            if (!res.ok) {
-                console.error(`Error: ${res.status} - ${res.statusText}`);
-                return 0;
-            }
-
-            const data = await res.json();
-
-            return data.items.length;
-        } catch (error) {
-            console.error('Failed to get playlists:', error);
-            return 0;
-        }
-    }
-
     async function getTrackCover(trackId: string): Promise<string> {
         try {
             const res = await fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {
@@ -169,7 +147,6 @@ export default function useSpotify(playlistId: string) {
         followPlaylist,
         unfollowPlaylist,
         getUserPlaylists,
-        getPlaylistItems,
         getTrackCover
     };
 }

composables/useUser.ts

@@ -2,6 +2,8 @@ import type {GetUserResponse} from "@/types/api/users";
 
 export const useUser = () => {
     const user = useState<GetUserResponse | null>('user', () => null)
+    const totalGames = useState<number>('userTotalGames', () => 0)
+    const games = useState<string | null>('games', () => null)
     const loading = useState<boolean>('userLoading', () => false)
     const error = useState<string | null>('userError', () => null)
 
@@ -21,11 +23,27 @@ export const useUser = () => {
         }
     }
 
+    const fetchTotalGames = async () => {
+        try {
+            totalGames.value = 0;
+            games.value.past.forEach(item => {
+                if (item.players[0].id === user.value?.id || item.players[1].id === user.value?.id) {
+                    totalGames.value++;
+                }
+            });
+        } catch (err) {
+            error.value = 'An error occurred';
+            console.error('Error fetching user', err)
+        }
+    }
+
     return {
         user,
+        totalGames,
         loading,
         error,
-        fetchUser
+        fetchUser,
+        fetchTotalGames
     }
 }