Merge pull request #55 from BeatBuzzer/feat/total-games

Feat/total games

Author: synan798

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

@@ -118,7 +118,6 @@ export default function useSpotify(playlistId: string) {
         }
     }
 
-
     async function getTrackCover(trackId: string): Promise<string> {
         try {
             const res = await fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {

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
     }
 }