working version

codersforcauses · Jan 13, 2025 · 513ee1a · 513ee1a
1 parent 758a946
commit 513ee1a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 41 deletions.
diff --git a/client/src/components/LeaderboardRow.vue b/client/src/components/LeaderboardRow.vue
@@ -13,7 +13,7 @@ defineProps<{
     :class="[isHighlighted ? 'bg-primaryPink' : 'bg-creamWhite text-primaryGrey']"
     class="rounded-lg d-flex ga-3 px-5 align-center"
   >
-    <v-text class="font-weight-bold">{{ rank }}</v-text>
+    <p class="font-weight-bold">{{ rank }}</p>
     <v-img
       class="rounded-circle"
       max-height="32"
@@ -22,10 +22,10 @@ defineProps<{
       cover
       src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"
     ></v-img>
-    <v-text class="me-auto font-weight-bold truncate-name">{{ name }}</v-text>
-    <v-text :class="[isHighlighted ? 'font-weight-bold' : '']" class="text-right points"
-      >{{ points }} pts</v-text
-    >
+    <p class="me-auto font-weight-bold truncate-name">{{ name }}</p>
+    <p :class="[isHighlighted ? 'font-weight-bold' : '']" class="text-right points">
+      {{ points }} pts
+    </p>
   </v-col>
 </template>
 

diff --git a/client/src/views/LeaderboardView.vue b/client/src/views/LeaderboardView.vue
@@ -1,20 +1,22 @@
+# LeaderboardView.vue
 <script setup lang="ts">
 import LeaderboardRow from '@/components/LeaderboardRow.vue'
 import { ref, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
+import server from '@/utils/server'
 
 interface LeaderboardApiEntry {
   username: string
   total_points: number
   rank: number
+  avatar: number
 }
 
 interface LeaderboardEntry {
   rank: number
   avatarIndex: number
   name: string
   points: number
-  isHighlighted: boolean
 }
 
 const userStore = useUserStore()
@@ -25,44 +27,37 @@ const error = ref<string | null>(null)
 
 const fetchLeaderboard = async () => {
   try {
-    const response = await fetch('http://localhost:8000/api/leaderboard/')
-    if (!response.ok) {
-      throw new Error('Failed to fetch leaderboard data')
-    }
-    const apiData: LeaderboardApiEntry[] = await response.json()
-
-    if (userStore.isLoggedIn && apiData.length > 0) {
-      // Get current user data from the last entry
-      const currentUserData = apiData[apiData.length - 1]
-      currentUser.value = {
-        rank: currentUserData.rank,
-        avatarIndex: currentUserData.avatar,
-        name: currentUserData.username,
-        points: currentUserData.total_points,
-        isHighlighted: true,
-      }
-
-      // Get other users excluding the current user
-      const otherUsers = apiData.slice(0, -1)
-      leaderboardData.value = otherUsers.map((entry) => ({
-        rank: entry.rank,
-        avatarIndex: entry.avatar,
-        name: entry.username,
-        points: entry.total_points,
-        isHighlighted: false,
-      }))
+    isLoading.value = true
+    const response = await server.get('/leaderboard/', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const data: LeaderboardApiEntry[] = response.data
+
+    const transformEntry = (entry: LeaderboardApiEntry, highlight: boolean = false) => ({
+      rank: entry.rank,
+      avatarIndex: entry.avatar,
+      name: entry.username,
+      points: entry.total_points,
+      isHighlighted: highlight,
+    })
+
+    // Only set current user if user is logged in
+    if (userStore.isLoggedIn && data.length > 0) {
+      const currentUserData = data[data.length - 1]
+      currentUser.value = transformEntry(currentUserData, true)
+      leaderboardData.value = data.slice(0, -1)
     } else {
-      // If not logged in, show all users
-      leaderboardData.value = apiData.map((entry) => ({
-        rank: entry.rank,
-        avatarIndex: entry.avatar,
-        name: entry.username,
-        points: entry.total_points,
-        isHighlighted: false,
-      }))
+      leaderboardData.value = data
     }
+
+    // Transform the data
+    leaderboardData.value = leaderboardData.value.map((entry) => transformEntry(entry))
   } catch (err) {
-    error.value = err instanceof Error ? err.message : 'An error occurred'
+    error.value = err instanceof Error ? err.message : 'Failed to fetch leaderboard data'
   } finally {
     isLoading.value = false
   }