Add matchups to schedule and schedule to navbar

src/components/NavBar.vue

@@ -8,7 +8,9 @@
     <div class="collapse navbar-collapse" id="top-navbar-collapse">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">
-          <!-- TODO -->
+          <RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
+        </li>
+        <li class="nav-item">
           <RouterLink class="nav-link" to="/standings">Standings</RouterLink>
         </li>
         <li class="nav-item">

src/services/gameService.ts

@@ -16,3 +16,19 @@ export async function fetchGamesBySeasonAndTeamId(seasonNumber: number, teamId:
 
   return gamesResponse.games
 }
+
+export async function fetchGamesBySeasonAndWeek(seasonNumber: number, weekNumber: number): Promise<Game[]> {
+  if (seasonNumber < MODERN_STAT_ERA_START) {
+    console.warn(`Cannot use games endpoint to fetch stats before season 8`)
+    return []
+  }
+
+  const response = await fetch(`${SITE_URL}/api/v3/games?season=${seasonNumber}&week=${weekNumber}`)
+
+  const gamesResponse: {
+    count: number
+    games: Game[]
+  } = await response.json()
+
+  return gamesResponse.games
+}

src/views/ScheduleView.vue

@@ -11,9 +11,38 @@
           <div class="row">
             <h2 id="week-num">Week {{ selectedWeekNumber }}</h2>
           </div>
-
+          <!-- Matchups -->
           <div class="row">
-            🚧 Coming Soon 🚧
+            <div v-for="matchup in gamesGroupedByMatchup" class="col-sm-auto">
+              <div class="table-responsive-sm" style="text-align: center">
+                <table class="table table-sm table-striped">
+                  <thead class="thead-dark">
+                    <tr>
+                      <th style="width: 3rem">Away</th>
+                      <th style="width: 5rem">Score</th>
+                      <th style="width: 3rem">Home</th>
+                    </tr>
+                  </thead>
+                  <tbody id="matchup-1">
+                    <tr v-for="game in matchup">
+                      <td>
+                        <RouterLink
+                          :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: game.away_team.abbrev } }">
+                          {{ game.away_team.abbrev }}
+                        </RouterLink>
+                      </td>
+                      <td>{{ game.away_score || game.home_score ? `${game.away_score}-${game.home_score}` : '@' }}</td>
+                      <td>
+                        <RouterLink
+                          :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: game.home_team.abbrev } }">
+                          {{ game.home_team.abbrev }}
+                        </RouterLink>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
           </div>
           <!-- Week Buttons -->
           <div class="row">
@@ -39,8 +68,10 @@
 </template>
 
 <script lang="ts">
+import type { Game } from '@/services/apiResponseTypes'
 import { type LeagueInfo, fetchCurrentLeagueInfo } from '@/services/currentService'
 import { CURRENT_SEASON } from '@/services/utilities'
+import { fetchGamesBySeasonAndWeek } from '@/services/gameService'
 
 
 export default {
@@ -48,6 +79,7 @@ export default {
   data() {
     return {
       currentWeekNumber: 0,
+      weekGames: [] as Game[]
     }
   },
   props: {
@@ -55,18 +87,49 @@ export default {
     weekNumber: { type: Number, required: false }
   },
   created() {
+    this.fetchCurrentWeekNumber()
     this.fetchData()
   },
   computed: {
     selectedWeekNumber(): number {
       if (this.weekNumber || this.weekNumber === 0) return this.weekNumber
       return this.currentWeekNumber
+    },
+    gamesGroupedByMatchup(): Game[][] {
+      if (!this.weekGames.length) return []
+
+      const groupedGames = this.weekGames.reduce((storage, game) => {
+        const key = [game.home_team.abbrev, game.away_team.abbrev].sort().join('-')
+        if (storage[key]) {
+          storage[key].push(game)
+        } else {
+          storage[key] = [game]
+        }
+        return storage
+      }, {} as { [key: string]: Game[] })
+
+      console.log(groupedGames, Object.values(groupedGames))
+
+      return Object.values(groupedGames)
+    }
+  },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue)
+        this.fetchData()
+    },
+    selectedWeekNumber(newValue, oldValue) {
+      if (newValue !== oldValue)
+        this.fetchData()
     }
   },
   methods: {
-    async fetchData(): Promise<void> {
+    async fetchCurrentWeekNumber(): Promise<void> {
       const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
       this.currentWeekNumber = leagueInfo.week
+    },
+    async fetchData(): Promise<void> {
+      this.weekGames = await fetchGamesBySeasonAndWeek(this.seasonNumber, this.selectedWeekNumber)
     }
   }
 }