Frontend team page

frontend/src/api.js

@@ -161,6 +161,8 @@ class Api {
 
   //----TEAM STATS---
 
+  // clean these calls, fix in #368
+
   // data from scrimmaging
   static getOwnTeamMuHistory(callback) {
     return Api.getTeamMuHistory(Cookies.get("team_id"), callback);
@@ -259,6 +261,17 @@ class Api {
 
   //---TEAM INFO---
 
+  static getTeamProfile(episode, teamId, callback) {
+    return $.get(`${URL}/api/team/${episode}/t/${teamId}/`)
+      .done((data, status) => {
+        callback(data);
+      })
+      .fail((xhr, status, error) => {
+        console.log("Error in getting user's team profile", xhr, status, error);
+        callback(null);
+      });
+  }
+
   static getUserTeamProfile(episode, callback) {
     return $.get(`${URL}/api/team/${episode}/t/me/`)
       .done((data, status) => {

frontend/src/components/rankingTeamList.js

@@ -7,7 +7,7 @@ import Spinner from "./spinner";
 
 class RankingTeamList extends TeamList {
   redirectToTeamPage = (team_id) => {
-    // this.props.history.push(`/rankings/${team_id}`);
+    this.props.history.push(`/${this.props.episode}/rankings/${team_id}`);
   };
 
   render() {

frontend/src/components/scrimmageRequestor.js

@@ -94,6 +94,9 @@ class ScrimmageRequestor extends Component {
           </div>
         </div>
         <div className="col-md-12">
+          {/* Tracked in #245:
+          once we support Scrimmages, this RankingTeamList being consturcted should be updated
+          and include new props */}
           <RankingTeamList
             teams={state.teams}
             page={state.teamPage}

frontend/src/index.js

@@ -215,11 +215,11 @@ class App extends Component {
         )}
         key="resources"
       />,
-      // <Route
-      //    path={`/:episode/rankings/:team_id`}
-      //    component={TeamInfo}
-      //    key="rankings-team"
-      // />,
+      <Route
+        path={`/:episode/rankings/:team_id`}
+        component={TeamInfo}
+        key="rankings-team"
+      />,
       <Route
         path={`/:episode/rankings`}
         component={(props) => (

frontend/src/views/rankings.js

@@ -76,6 +76,7 @@ class Rankings extends Component {
               onPageClick={this.getTeamPage}
               loading={this.state.loading}
               history={this.props.history}
+              episode={this.props.episode}
               episode_info={this.props.episode_info}
             />
           </div>

frontend/src/views/teamInfo.js

@@ -72,25 +72,39 @@ class WinsCard extends Component {
   }
 }
 
+// This is the component in question being rendered
 class TeamInfo extends Component {
-  state = {
-    team: null,
-    wins: 0,
-    losses: 0,
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Note that this prop comes from route-matching.
+      // (The route to make this is /:episode/rankings/:team_id
+      // and the :team_id part makes props.match.params.team_id
+      // whatever that id is)
+      id: this.props.match.params.team_id,
+      team: null,
+      wins: 0,
+      losses: 0,
+    };
+  }
 
   componentDidMount() {
-    const teamId = this.props.match.params.team_id;
     //get team info by id
-    Api.getTeamById(teamId, this.setTeam);
+    const teamId = this.props.match.params.team_id;
+    const episode = this.props.match.params.episode;
+
+    Api.getTeamProfile(episode, teamId, this.setTeam);
 
-    Api.getOtherTeamWinStats(teamId, (data) => {
-      this.setState({ wins: data[0], losses: data[1] });
-    });
+    // Commented out since we don't have scrimmages, records, etc.
+    // Work on this once we are ready to.
+    // Track in #368.
+    // Api.getOtherTeamWinStats(teamId, (data) => {
+    //   this.setState({ wins: data[0], losses: data[1] });
+    // });
   }
 
-  setTeam = (team_data) => {
-    this.setState({ team: team_data });
+  setTeam = (team) => {
+    this.setState({ team });
   };
 
   render() {
@@ -102,7 +116,10 @@ class TeamInfo extends Component {
             <div className="row">
               <TeamCard team={team} />
             </div>
-            <div className="row">
+            {/* Commented out since we don't have scrimmages, records, etc.
+            Work on this once we are ready to.
+            Do in #368 */}
+            {/* <div className="row">
               <div className="col-md-3">
                 <div className="container-fluid">
                   <div className="row">
@@ -127,7 +144,7 @@ class TeamInfo extends Component {
                   </div>
                 </div>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       );