next matchup displayed in team details

8bitcoffee · Jan 17, 2024 · 06fcd83 · 06fcd83
1 parent 3ff7e70
commit 06fcd83
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 16 deletions.
diff --git a/example_data.sql b/example_data.sql
@@ -105,7 +105,7 @@ INSERT INTO "teams"(
 )
 VALUES 
     ('Aint Afraid of No Cue Balls' ,2,'Gbust!'),
-    ('All 4 One!',8,'A41!!!'),
+    ('All 4 One!',8,'A4114A'),
     ('Avenge This',19,'AVNGER'),
     ('Just Us League',20,'Snyder'),
     ('Quarrymen',26,'Walrus'),

diff --git a/server/routes/match.router.js b/server/routes/match.router.js
@@ -18,7 +18,20 @@ router.get('/:id', rejectUnauthenticated, (req, res) => {
 
 // Get matchups for team
 router.get('/team/:teamid', rejectUnauthenticated, (req, res) => {
-  // GET route code here
+  let queryText = `
+    SELECT * FROM "matchups"
+    LEFT JOIN "teams_matchups" ON "teams_matchups"."matchup_id" = "matchups"."id"
+    LEFT JOIN "teams" ON "teams"."id" = "teams_matchups"."team_id"
+    WHERE "teams"."id" = $1
+    ORDER BY "matchups"."date" ASC;
+  `;
+  pool.query(queryText, [req.params.teamid])
+    .then((result) => {res.send(result.rows)})
+    .catch((error) => {
+      console.error("Error on GET matchups by team", error);
+      res.sendStatus(500);
+    })
+  ;
 });
 
 // Get matchups for league

diff --git a/server/routes/team.router.js b/server/routes/team.router.js
@@ -85,13 +85,11 @@ router.post('/', rejectUnauthenticated, (req, res) => {
 router.get('/:id', rejectUnauthenticated, (req,res) => {
   let queryText = `
     SELECT * FROM "teams"
-    JOIN "users_teams" ON "users_teams"."team_id" = "teams"."id"
-    JOIN "user" ON "user"."id" = "users_teams"."user_id"
     WHERE "teams"."id" = $1;
   `;
   pool.query(queryText,[req.params.id])
     .then((result) => {
-      res.send(result.rows)
+      res.send(result.rows[0])
     })
     .catch((error) => {
       console.error("Error in GET teamid", error);

diff --git a/src/components/LeagueDetails/LeagueDetails.jsx b/src/components/LeagueDetails/LeagueDetails.jsx
@@ -45,7 +45,7 @@ function LeagueDetails(){
                 {userLeague.teamsInfo.map((team)=>{
                     return(
                         <div className='details-third-level' key={team.id}>
-                            <h5>{team.team_name}</h5>
+                            <h5 onClick={()=>history.push(`/teamdetails/${leagueId}/${team.id}`)}>{team.team_name}</h5>
                         </div>
                     )
                 })}

diff --git a/src/components/TeamPage/TeamPage.css b/src/components/TeamPage/TeamPage.css
@@ -0,0 +1,22 @@
+#team-details-div {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+#team-name {
+    text-decoration: underline;
+    text-align: center;
+}
+
+#match-details{
+    margin-top: -15px;
+}
+
+#copy-alert{
+    font-size: 8pt;
+    margin-left: 20px;
+}
+
+#copy-icon{
+    font-size: 10pt;
+}
diff --git a/src/components/TeamPage/TeamPage.jsx b/src/components/TeamPage/TeamPage.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import './TeamPage.css';
 
 // Shows team roster with some base stats.
@@ -10,23 +11,40 @@ function TeamPage(){
     const teamId = useParams().teamid;
     const userTeam = useSelector(store=>store.userTeam);
 
+    const copyCode = () => {
+        let joinCode = userTeam.teamInfo.join_code;
+        let alertField = document.getElementById("copy-alert");
+        navigator.clipboard.writeText(joinCode);
+        alertField.innerHTML = "Code copied to clipboard";
+        setTimeout(()=>{alertField.innerHTML = ""}, 3000)
+    }
+
     useEffect(() => {
+        dispatch({type: "FETCH_TEAM", payload: {id: teamId}});
         dispatch({type: 'FETCH_LEAGUES'});
         dispatch({type: "FETCH_TEAMS"});
-        dispatch({type: "FETCH_TEAM", payload: {id: teamId}})
     }, []);
-
+    
     return(
-        <div>
-            <h3>{userTeam[0].team_name}</h3>
-            <h5>Join code - {userTeam[0].join_code}</h5> // TODO: Copy to clipboard with click. Add accompanying alert
-            <h5>Roster:</h5>
+        <div id="team-details-div">
+            <h3 id="team-name">{userTeam.teamInfo.team_name}</h3>
+            <h4>Join code - {userTeam.teamInfo.join_code} <ContentCopyIcon fontSize="small" id="copy-icon" onClick={copyCode}/></h4>
+            <p id="copy-alert"></p>
+            <h4>Roster:</h4>
             <ul>
-                {userTeam.map((user)=>{
+                {userTeam.roster.map((user)=>{
                     return(
                         <li key={user.id}>{user.first_name + " " + user.last_name}</li>
                 )})}
             </ul>
+            <br></br>
+            <h4>Next Matchup:</h4>
+            {userTeam.matchups.length == 0 ?
+                (<h5 className='details-subtitle' id="match-details">No Matchups scheduled</h5>):
+                (<div>
+                    <h5>{userTeam.nextOpponentInfo.date}</h5>
+                    <h5 className='details-subtitle' id="match-details">{`${userTeam.nextOpponentInfo.away_team_name} vs. ${userTeam.nextOpponentInfo.home_team_name}`}</h5>
+                </div>)}
         </div>
     )
 }

diff --git a/src/redux/reducers/userTeam.reducer.js b/src/redux/reducers/userTeam.reducer.js
@@ -1,4 +1,17 @@
-const userTeam = (state = [], action) => {
+const userTeam = (state = {
+  teamInfo: {
+    team_name:"",
+    join_code:""
+  },
+  roster:[],
+  matchups:[],
+  nextOpponentInfo:{
+    team_name: "",
+    date: "",
+    home_team_name: "",
+    away_team_name: ""
+  }
+}, action) => {
     switch (action.type) {
         case 'SET_TEAM':
           return action.payload;

diff --git a/src/redux/sagas/getTeam.saga.js b/src/redux/sagas/getTeam.saga.js
@@ -1,10 +1,51 @@
 import axios from 'axios';
+import { DateTime } from 'luxon';
 import { put, takeLatest } from 'redux-saga/effects';
 
 function* getTeam(action){
     try {
-        const response = yield axios.get(`/api/team/${action.payload.id}`);
-        yield put({type: "SET_TEAM", payload: response.data});
+        let teamInfo = yield axios.get(`/api/team/${action.payload.id}`);
+        let roster = yield axios.get(`/api/team/roster/${action.payload.id}`);
+        let matchups = yield axios.get(`/api/match/team/${action.payload.id}`);
+
+        matchups = matchups.data;
+        teamInfo = teamInfo.data;
+        roster = roster.data;
+
+        let nextDate = DateTime.fromISO(matchups[0].date);
+        nextDate = nextDate.toISODate();
+
+        let opponentId = "";
+        let nextOpponentInfo;
+        let away_team_name;
+        let home_team_name;
+        if (matchups[0].away_team_id == action.payload.id){
+            away_team_name = teamInfo.team_name;
+            opponentId = matchups[0].home_team_id;
+        }
+        else {
+            opponentId = matchups[0].away_team_id;
+            home_team_name = teamInfo.team_name
+        }
+
+        if (opponentId == null){
+            nextOpponentInfo = {team_name: "BYE"}
+        }
+        else{
+            nextOpponentInfo = yield axios.get(`/api/team/${opponentId}`);
+            nextOpponentInfo = nextOpponentInfo.data;
+        }
+
+        if (away_team_name == teamInfo.team_name){
+            home_team_name = nextOpponentInfo.team_name;
+        }
+        else{
+            away_team_name = nextOpponentInfo.team_name;
+        }
+        nextOpponentInfo.date = nextDate;
+        nextOpponentInfo.home_team_name = home_team_name;
+        nextOpponentInfo.away_team_name = away_team_name;
+        yield put({type: "SET_TEAM", payload: {teamInfo: teamInfo, roster: roster, matchups: matchups, nextOpponentInfo, nextOpponentInfo}});
     }
     catch (error) {
         console.error("Error fetching team info", error);