Previous button for team 1, with watchers to update page data

src/views/GameView.vue

@@ -3,23 +3,36 @@
 
     <!-- Teams and Score -->
     <div class="row">
-      <div class="col-sm-2">
+      <div class="col-sm-3">
-        <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
+        <div class="row">
-          :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
+          <RouterLink v-if="adjacentGames?.team1prevGame" :to="{
-          <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+            name: 'games', params: {
-            :src="awayTeamThumbnail" />
+              seasonNumber: adjacentGames!.team1prevGame!.season,
-        </RouterLink>
+              weekNumber: adjacentGames!.team1prevGame!.week,
+              gameNumber: adjacentGames!.team1prevGame!.game_num,
+              team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev,
+              team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
+            }
+          }">
+            PREVIOUS
+          </RouterLink>
+          <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
+            :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
+            <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+              :src="awayTeamThumbnail" />
+          </RouterLink>
+        </div>
       </div>
-      <div class="col-sm">
+      <div class="col-sm-6">
         <h1 class="text-center">{{ finalScore }}</h1>
         <h2 class="text-center">
           Season {{ seasonNumber }} - Week {{ weekNumber }} - Game {{ gameNumber }}
         </h2>
       </div>
-      <div class="col-sm-2">
+      <div class="col-sm-3">
         <RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
-          <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+          <img id="thumbnail" height="90" style="float:left; vertical-align:middle; max-height:100%;"
             :src="homeTeamThumbnail" />
         </RouterLink>
       </div>
@@ -357,10 +370,10 @@ import { fetchTeam } from '@/services/teamsService'
 import { outsToInnings } from '@/services/utilities'
 
 interface AdjacentGameHelper {
-  team1prevGame: Game
+  team1prevGame: Game | undefined
-  team1nextGame: Game
+  team1nextGame: Game | undefined
-  team2prevGame: Game
+  team2prevGame: Game | undefined
-  team2nextGame: Game
+  team2nextGame: Game | undefined
 }
 
 export default {
@@ -471,6 +484,38 @@ export default {
   created() {
     this.fetchData()
   },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    weekNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    gameNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    team1Abbreviation(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    team2Abbreviation(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+  },
   methods: {
     async fetchData(): Promise<void> {
       this.isAuthenticated = await isDiscordAuthenticated()
@@ -498,15 +543,24 @@ export default {
       const nextWeekNumber = this.gameNumber === 4 ? this.weekNumber + 1 : this.weekNumber
 
       this.adjacentGames = {
-        team1nextGame: team1Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber)!,
+        team1nextGame: team1Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
-        team1prevGame: team1Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber)!,
+        team1prevGame: team1Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber),
-        team2nextGame: team2Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber)!,
+        team2nextGame: team2Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
-        team2prevGame: team2Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber)!
+        team2prevGame: team2Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber)
       }
     },
+    clearData(): void {
+      this.team1 = undefined
+      this.team2 = undefined
+      this.game = undefined
+      this.battingStats = []
+      this.pitchingStats = []
+      this.fieldingStats = []
+      this.adjacentGames = undefined
+    },
     outsToInnings(stat: PitchingStat): string {
       return outsToInnings(stat)
     },
   }
 }
-</script>
+</script>