Merge pull request #566 from battlecode/ag-matches

Show list of tournament matches
battlecode · Jan 18, 2023 · b92dee7 · b92dee7
2 parents e6a29d5 + 02238a9
commit b92dee7
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 40 deletions.
diff --git a/frontend/src/api.js b/frontend/src/api.js
@@ -484,15 +484,6 @@ class Api {
       });
   }
 
-  static getAllTeamScrimmages(callback) {
-    $.get(`${URL}/api/${LEAGUE}/scrimmage/`, (data, success) => {
-      callback(data);
-    });
-  }
-
-  /* for some reason the data format from getAllTeamScrimmages and getTeamScrimmages
-   are different; has to do with pagination but not sure how to make the same
-  */
   static getTeamScrimmages(team_id, episode, callback, page) {
     const query_data = {
       team_id,
@@ -514,11 +505,36 @@ class Api {
       });
   }
 
-  static getAllMatches(episode, callback, page) {
+  static getTeamTournamentMatches(team_id, episode, callback, page) {
+    const query_data = {
+      team_id,
+      page,
+    };
+    return $.get(`${URL}/api/compete/${episode}/match/tournament/`, query_data)
+      .done((data, status) => {
+        const pageLimit = Math.ceil(data.count / PAGE_SIZE);
+        callback(data.results, pageLimit);
+      })
+      .fail((xhr, status, error) => {
+        console.log(
+          "Error in getting team's tournament matches",
+          xhr,
+          status,
+          error
+        );
+        callback(null);
+      });
+  }
+
+  static getAllMatches(episode, tournament_id, callback, page) {
     const query_data = {
       page,
+      tournament_id,
     };
-    return $.get(`${URL}/api/compete/${episode}/match/`, query_data)
+    const endpoint =
+      `${URL}/api/compete/${episode}/match/` +
+      (tournament_id !== null ? "tournament/" : "");
+    return $.get(endpoint, query_data)
       .done((data, status) => {
         const pageLimit = Math.ceil(data.count / PAGE_SIZE);
         callback(data.results, pageLimit);

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -187,6 +187,13 @@ class App extends Component {
         )}
         key="tournaments"
       />,
+      <Route
+        path={`/:episode/tournament_matches/:tournament_id`}
+        component={(props) => (
+          <QueueHistory {...props} episode={this.state.episode} />
+        )}
+        key="tournaments"
+      />,
       <Route
         path={`/:episode/getting-started`}
         component={(props) => (
@@ -251,7 +258,11 @@ class App extends Component {
       <Route
         path={`/:episode/queue`}
         component={(props) => (
-          <QueueHistory {...props} episode={this.state.episode} />
+          <QueueHistory
+            {...props}
+            episode={this.state.episode}
+            tournament_id={null}
+          />
         )}
         key="rankings"
       />,

diff --git a/frontend/src/views/queue.js b/frontend/src/views/queue.js
@@ -24,6 +24,7 @@ class QueueHistory extends Component {
     pageLimit: 0,
     matches: [],
     loading: true,
+    tournament_id: this.props.match.params.tournament_id ?? null,
   };
 
   static formatRatingDelta(participation) {
@@ -55,6 +56,7 @@ class QueueHistory extends Component {
     this.setState({ loading: true, matches: [], matchPage: page });
     Api.getAllMatches(
       this.props.episode,
+      this.state.tournament_id,
       function (matches, pageLimit) {
         // This check handles the case where a new page is requested while a
         // previous page was loading.
@@ -98,15 +100,21 @@ class QueueHistory extends Component {
                 <div className="card">
                   <div className="header">
                     <h4 className="title">
-                      Recent Queue{" "}
-                      <button
-                        onClick={this.refresh}
-                        style={{ marginLeft: "10px" }}
-                        type="button"
-                        className="btn btn-primary btn-sm"
-                      >
-                        Refresh
-                      </button>
+                      {this.state.tournament_id === null ? (
+                        <span>
+                          Recent Queue{" "}
+                          <button
+                            onClick={this.refresh}
+                            style={{ marginLeft: "10px" }}
+                            type="button"
+                            className="btn btn-primary btn-sm"
+                          >
+                            Refresh
+                          </button>
+                        </span>
+                      ) : (
+                        <span>Tournament Matches</span>
+                      )}
                     </h4>
                   </div>
                   <div className="content table-responsive table-full-width">

diff --git a/frontend/src/views/scrimmaging.js b/frontend/src/views/scrimmaging.js
@@ -135,7 +135,7 @@ class ScrimmageRequests extends Component {
   }
 }
 
-class ScrimmageHistory extends Component {
+class MatchHistory extends Component {
   state = {
     scrimPage: 1,
     pageLimit: 0,
@@ -167,7 +167,10 @@ class ScrimmageHistory extends Component {
 
   loadPage = (page) => {
     this.setState({ loading: true, scrimmages: [], scrimPage: page });
-    Api.getTeamScrimmages(
+    const apiFunc = this.props.show_tournament_matches
+      ? Api.getTeamTournamentMatches
+      : Api.getTeamScrimmages;
+    apiFunc(
       this.props.team.id,
       this.props.episode,
       function (scrimmages, pageLimit) {
@@ -219,7 +222,10 @@ class ScrimmageHistory extends Component {
         <div className="card">
           <div className="header">
             <h4 className="title">
-              Scrimmage History{" "}
+              {this.props.show_tournament_matches
+                ? "Tournament Match"
+                : "Scrimmage"}{" "}
+              History{" "}
               <button
                 onClick={this.refresh}
                 style={{ marginLeft: "10px" }}
@@ -235,9 +241,9 @@ class ScrimmageHistory extends Component {
               <thead>
                 <tr>
                   <th>Score</th>
-                  <th>Δ</th>
-                  <th>Opponent (Δ)</th>
-                  <th>Ranked</th>
+                  {!this.props.show_tournament_matches && <th>Δ</th>}
+                  <th>Opponent {!this.props.show_tournament_matches && "Δ"}</th>
+                  {!this.props.show_tournament_matches && <th>Ranked</th>}
                   <th>Status</th>
                   <th>Replay</th>
                   <th>Creation time</th>
@@ -297,22 +303,25 @@ class ScrimmageHistory extends Component {
                   return (
                     <tr key={s.id}>
                       {score_entry}
-                      <td>
-                        {ScrimmageHistory.formatRatingDelta(participation)}
-                      </td>
+                      {!this.props.show_tournament_matches && (
+                        <td>{MatchHistory.formatRatingDelta(participation)}</td>
+                      )}
                       <td>
                         <NavLink
                           to={`/${this.props.episode}/rankings/${opponent_participation.team}`}
                         >
                           {opponent_participation.teamname}
                         </NavLink>{" "}
                         (
-                        {ScrimmageHistory.formatRatingDelta(
-                          opponent_participation
-                        )}
+                        {!this.props.show_tournament_matches &&
+                          MatchHistory.formatRatingDelta(
+                            opponent_participation
+                          )}
                         )
                       </td>
-                      <td>{s.is_ranked ? "Ranked" : "Unranked"}</td>
+                      {!this.props.show_tournament_matches && (
+                        <td>{s.is_ranked ? "Ranked" : "Unranked"}</td>
+                      )}
                       {stat_entry}
                       {s.status == "OK!" ? (
                         <td>
@@ -334,12 +343,12 @@ class ScrimmageHistory extends Component {
             </table>
             {this.state.loading && <Spinner />}
           </div>
+          <PaginationControl
+            page={this.state.scrimPage}
+            pageLimit={this.state.pageLimit}
+            onPageClick={this.getScrimPage}
+          />
         </div>
-        <PaginationControl
-          page={this.state.scrimPage}
-          pageLimit={this.state.pageLimit}
-          onPageClick={this.getScrimPage}
-        />
       </div>
     );
   }
@@ -372,14 +381,25 @@ class Scrimmaging extends Component {
                 history={this.props.history}
                 team={this.props.team}
               />
-              <ScrimmageHistory
+              <MatchHistory
+                ref={(history) => {
+                  this.history = history;
+                }}
+                refresh={this.refresh}
+                episode={this.props.episode}
+                episode_info={this.props.episode_info}
+                team={this.props.team}
+                show_tournament_matches={false}
+              />
+              <MatchHistory
                 ref={(history) => {
                   this.history = history;
                 }}
                 refresh={this.refresh}
                 episode={this.props.episode}
                 episode_info={this.props.episode_info}
                 team={this.props.team}
+                show_tournament_matches={true}
               />
             </div>
           </div>

diff --git a/frontend/src/views/tournaments.js b/frontend/src/views/tournaments.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
 import Api from "../api";
 class Tournaments extends Component {
   componentDidMount() {}
@@ -20,6 +21,13 @@ class Tournaments extends Component {
           ) : (
             ""
           )}
+          <td>
+            <NavLink
+              to={`/${this.props.episode}/tournament_matches/${tournament.name_short}`}
+            >
+              View
+            </NavLink>
+          </td>
           <td>{tournament.blurb}</td>
         </tr>
       );
@@ -52,6 +60,7 @@ class Tournaments extends Component {
                           <th>Tournament</th>
                           <th>Date</th>
                           {this.props.team !== null ? <th>Eligibility</th> : ""}
+                          <th>Results</th>
                           <th>About</th>
                         </tr>
                       </thead>