Top scorer data imported into league page

ProjectSourceCode/src/index.js

@@ -90,19 +90,20 @@ app.use(fetchMatchesData);
 const convert_time = require('./resources/middleware/navigation-bar/convert-time');
 app.use(convert_time);
 
-// Middleware function to fetch leagues data
 const fetchLeaguesData = require('./resources/middleware/league-page/get-current-league-information');
+const fetchLeagueScorerData = require('./resources/middleware/league-page/get-current-league-top-scorers');
 
-// Define the route for fetching league data
-app.get('/league/:leagueID', fetchLeaguesData, (req, res) => {
-  // Render the Handlebars view with league data
-  res.render('pages/league-page', {
-      leagueID: req.params.leagueID,
-      leagues: res.locals.leagues
-  });
+app.get('/league/:leagueID', [fetchLeaguesData, fetchLeagueScorerData], (req, res) => {
+    // Render the Handlebars view with league data
+    res.render('pages/league-page', {
+        leagueID: req.params.leagueID,
+        leagues: res.locals.leagues,
+        scorers: res.locals.topScorers // Assuming fetchLeagueScorerData sets the data in res.locals.scorers
+    });
 });
 
 
+
 // *****************************************************
 // <!-- Section 5 : API Routes -->
 // *****************************************************

ProjectSourceCode/src/resources/middleware/league-page/get-current-league-top-scorers.js

@@ -17,7 +17,7 @@ const fetchLeagueScorerData = async (req, res, next) => {
         const scorerData = response.data;
 
         // Attach the data to res.locals
-        res.locals.scorers = {
+        res.locals.topScorers = {
             scorers: scorerData.scorers.map(player => ({
                 player: {
                     player_id: player.player.id,
@@ -36,7 +36,7 @@ const fetchLeagueScorerData = async (req, res, next) => {
         next();
     } catch (error) {
         console.error('Error fetching leagues data:', error);
-        res.locals.scorers = null; // Set to null if there's an error
+        res.locals.topScorers = null; // Set to null if there's an error
         next(); // Call next middleware or route handler
     }
 };

ProjectSourceCode/src/views/pages/league-page.hbs

@@ -49,7 +49,27 @@
 
         <!-- Container to display top scorers for league <- Split 50% -->
         <div class="container" id="top-scorers-container">
-        
+            <h1>Top Scorers</h1>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Player Name</th>
+                        <th>Team Name</th>
+                        <th>Games Played</th>
+                        <th>Goals</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each topScorers.scorers}}
+                    <tr>
+                        <td>{{player.player_name}}</td>
+                        <td>{{team.team_name}}</td>
+                        <td>{{games_played}}</td>
+                        <td>{{goals}}</td>
+                    </tr>
+                    {{/each}}
+                </tbody>
+            </table>
         </div>
 
     </div>