Replaced Player List Item with Leaderboard List Item

app/(dashboard)/repo-settings/[repositoryId]/players/page.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import UserProfileSummary from "@/components/ui/userProfileSummary";
 import { getUsersForRepository } from "@/lib/repository/service";
 
 export const metadata = {
@@ -9,27 +9,35 @@ export const metadata = {
 export default async function RepoSettings({ params }) {
   const players = await getUsersForRepository(params.repositoryId);
 
+  const arrayOfPlayersWithTheirTotalPoints = players.map((player) => {
+    const totalPointsForThisSinglePlayer = player.pointTransactions.reduce((acc, pt) => acc + pt.points, 0);
+    return {
+      ...player,
+      totalPointsForThisSinglePlayer: totalPointsForThisSinglePlayer,
+    };
+  });
+
+  // Sort users by total points in descending order
+  const arrayOfUsersInRepoInDescendingOrder = arrayOfPlayersWithTheirTotalPoints.sort(
+    (a, b) => b.totalPointsForThisSinglePlayer - a.totalPointsForThisSinglePlayer
+  );
+
   return (
     <div>
       {players.length === 0 ? (
         <p>No players enrolled in this repository.</p>
       ) : (
-        // Replace with Leaderboard component
         <div>
-          {players.map((player) => (
-            <div
-              className="flex w-full items-center justify-between border-b border-gray-200 py-4"
-              key={player.id}>
-              <div className="flex items-center gap-3">
-                <Avatar>
-                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-                  <AvatarFallback>CN</AvatarFallback>
-                </Avatar>
-                <p>{player.name}</p>
-              </div>
-              <div className="flex items-center gap-3"></div>
-            </div>
-          ))}{" "}
+          {arrayOfUsersInRepoInDescendingOrder.map((player, idx) => (
+            <UserProfileSummary
+              key={player.id}
+              name={player.name || player.login}
+              points={player.totalPointsForThisSinglePlayer}
+              avatarUrl={player.avatarUrl || ""}
+              userGitHubId={player.login}
+              index={idx + 1}
+            />
+          ))}
         </div>
       )}
     </div>

lib/repository/service.ts

@@ -154,6 +154,7 @@ export const getUsersForRepository = async (repositoryId: string) => {
           },
         },
       },
+      include: { pointTransactions: true },
     });
 
     return users;