components for join created

server/routes/league.router.js

@@ -38,22 +38,6 @@ router.get('/', rejectUnauthenticated, (req, res) => {
   ;
 });
 
-// GET info on a specific league
-router.get('/:id', rejectUnauthenticated, (req, res) => {
-  let queryText = `
-    SELECT * FROM "leagues"
-    JOIN "teams_leagues" ON "teams_leagues"."league_id" = "leagues"."id"
-    WHERE "leagues"."id" = $1;
-  `;
-  pool.query(queryText,[req.params.id])
-    .then((result) => {res.send(result.rows)})
-    .catch((error) => {
-      console.error("Error in league/:id GET", error);
-      res.sendStatus(500);
-    })
-  ;
-});
-
 // Create league
 router.post('/', rejectUnauthenticated, (req, res) => {
   let queryText = `
@@ -83,4 +67,36 @@ router.post('/', rejectUnauthenticated, (req, res) => {
     })
 });
 
+// GET a specific league
+router.get('/:id', rejectUnauthenticated, (req, res) => {
+  console.log(`Triggered GET ${req.params.id}`);
+  let queryText = `
+    SELECT
+      leagues.*,
+      COUNT(DISTINCT teams_leagues.team_id) AS teams_joined,
+      MAX(users_teams.team_id) AS user_team_id,
+      MAX(teams.team_name) AS user_team_name
+    FROM
+      leagues
+    JOIN
+      users_leagues ON leagues.id = users_leagues.league_id
+    LEFT JOIN
+      teams_leagues ON leagues.id = teams_leagues.league_id
+    LEFT JOIN
+      users_teams ON teams_leagues.team_id = users_teams.team_id AND users_leagues.user_id = users_teams.user_id
+    LEFT JOIN
+      teams ON users_teams.team_id = teams.id
+    WHERE
+      users_leagues.user_id = $1 AND leagues.id = $2
+    GROUP BY "leagues"."id";
+  `;
+  pool.query(queryText,[req.user.id, req.params.id])
+    .then((result) => {res.send(result.rows[0])})
+    .catch((error) => {
+      console.error("Error in specific league GET", error);
+      res.sendStatus(500);
+    })
+  ;
+});
+
 module.exports = router;

server/routes/team.router.js

@@ -70,7 +70,24 @@ router.get('/:id', rejectUnauthenticated, (req,res) => {
     JOIN "user" ON "user"."id" = "users_teams"."user_id"
     WHERE "teams"."id" = $1;
   `;
-  pool.query(queryText[req.params.id])
+  pool.query(queryText,[req.params.id])
+    .then((result) => {
+      res.send(result.rows)
+    })
+    .catch((error) => {
+      console.error("Error in GET teamid", error);
+      res.sendStatus(500);
+    })
+})
+
+router.get('/roster/: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)
     })

src/components/AdminPage/LeagueAdminPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './LeagueAdminPage.css';
+
+// Component showing overall league stats and top players
+function LeagueAdminPage(){
+    return(
+        <div>
+
+        </div>
+    )
+}
+
+export default LeagueAdminPage;

src/components/App/App.jsx

@@ -24,9 +24,10 @@ import RegisterPage from '../RegisterPage/RegisterPage';
 import './App.css';
 import EditUserPage from '../EditUserPage/EditUserPage.jsx';
 import CreateLeague from '../CreateLeague/CreateLeague.jsx';
-import JoinLeague from '../JoinLeague/JoinLeague.jsx';
 import TeamPage from '../TeamPage/TeamPage.jsx';
 import CreateTeam from '../CreateTeam/CreateTeam.jsx';
+import LeagueDetails from '../LeagueDetails/LeagueDetails.jsx';
+import JoinTeam from '../JoinTeam/JoinTeam.jsx';
 
 function App() {
   const dispatch = useDispatch();
@@ -93,14 +94,18 @@ function App() {
             <CreateTeam/>
           </ProtectedRoute>
 
-          <ProtectedRoute exact path="/joinLeague">
-            <JoinLeague/>
+          <ProtectedRoute exact path="/joinTeam">
+            <JoinTeam/>
           </ProtectedRoute>
 
           <ProtectedRoute exact path="/teamdetails/:leagueid/:teamid">
             <TeamPage/>
           </ProtectedRoute>
 
+          <ProtectedRoute exact path="/leaguedetails/:leagueid/">
+            <LeagueDetails/>
+          </ProtectedRoute>
+
           <Route
             exact
             path="/login"

src/components/Home/Home.css

@@ -1,3 +1,9 @@
 #create-join-btns {
     text-align: center;
+}
+
+#join-team-btn {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
 }

src/components/Home/Home.jsx

@@ -20,14 +20,17 @@ function Home(){
         history.push("/createLeague");
     }
 
-    const joinLeague = () => {
-        history.push("/joinLeague");
+    const joinTeam = () => {
+        history.push("/joinTeam");
     }
 
     if (userLeagues.length > 0){
         return(
             <div>
                 <LeagueList/>
+                <br/>
+                <br/>
+                <button id="join-team-btn" onClick={joinTeam} className="btn">Join Team</button>
             </div>
         )
     }
@@ -38,7 +41,7 @@ function Home(){
                 <br/><br/>
                 <button onClick={createLeague} className="btn">Create League</button>
                 <br/><br/>
-                <button onClick={joinLeague} className="btn">Join League</button>
+                <button onClick={joinTeam} className="btn">Join Team</button>
             </div>
         )
     }

src/components/JoinTeam/JoinTeam.css

@@ -0,0 +1,4 @@
+#join-team-form {
+    display: block;
+    text-align: center;
+}

src/components/JoinTeam/JoinTeam.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import './JoinTeam.css';
+
+// Component showing details of the league
+function JoinTeam(){
+    const dispatch = useDispatch();
+    const [joinCode, setJoinCode] = useState("");
+    const user = useSelector(store=>store.user);
+    const userLeague = useSelector(store=>store.userLeague);
+
+    const handleSubmit = (e) =>{
+        e.preventDefault();
+        dispatch({type: "JOIN_TEAM", payload: {user: user, code: joinCode}});
+    };
+
+    const handleChange = (e) => {
+        setJoinCode(e.target.value);
+    };
+
+    // TODO: If join code syntax changes, the maxLength on input needs to be changed as well.
+    return(
+        <div>
+            <img id="landing-logo" src={'./img/corner-pocket_624x624.png'} alt={'logo'}/>
+            <br/>
+            <form id="join-team-form" onSubmit={handleSubmit}>
+                <label htmlFor="code-input">Enter Code (case-sensative)</label>
+                <br/><br/>
+                <input
+                    name="code-input"
+                    type="text"
+                    value={joinCode}
+                    onChange={handleChange}
+                    placeholder='Enter Code'
+                    maxLength={6}
+                ></input>
+                <br/><br/>
+                <button className='btn'>Join Team</button>
+            </form>
+        </div>
+    )
+}
+
+export default JoinTeam;

src/components/LeagueDetails/LeagueDetails.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import LeagueAdminPage from '../AdminPage/LeagueAdminPage';
+import './LeagueDetails.css';
+
+// Component showing details of the league
+function LeagueDetails(){
+    const dispatch = useDispatch();
+    const leagueId = useParams().leagueid;
+    const user = useSelector(store=>store.user);
+    const userLeague = useSelector(store=>store.userLeague);
+
+    useEffect(()=>{
+        dispatch({type: "FETCH_LEAGUE", payload: {id: leagueId}});
+    }, []);
+
+    if (user.id == userLeague.owner_id){
+        return(
+            <div>
+                <h3>{userLeague.league_name}</h3>
+                <LeagueAdminPage/>
+            </div>
+        )
+    }
+    else {
+        return(
+            <div>
+                <h3>{userLeague.league_name}</h3>
+            </div>
+        )
+    }
+}
+
+export default LeagueDetails;

src/components/LeagueList/LeagueList.jsx

@@ -17,6 +17,7 @@ function LeagueList(){
                     <div key={league.id}>
                         <h3
                             className="league-list-item"
+                            onClick={()=>history.push(`/leaguedetails/${league.id}`)}
                         >{league.league_name}
                         </h3>
                             <div className='league-list-details'>

src/components/TeamAdminPage/TeamAdminPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './TeamAdminPage.css';
+
+// Component showing overall league stats and top players
+function TeamAdminPage(){
+    return(
+        <div>
+
+        </div>
+    )
+}
+
+export default TeamAdminPage;

src/components/TeamPage/TeamPage.jsx

@@ -1,22 +1,32 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import './TeamPage.css';
 
 // Shows team roster with some base stats.
 // Clicking on player opens player detail view
 function TeamPage(){
     const dispatch = useDispatch();
-
+    const teamId = useParams().teamid;
+    const userTeam = useSelector(store=>store.userTeam);
+
     useEffect(() => {
         dispatch({type: 'FETCH_LEAGUES'});
-        dispatch({type: "FETCH_TEAMS"})
+        dispatch({type: "FETCH_TEAMS"});
+        dispatch({type: "FETCH_TEAM", payload: {id: teamId}})
     }, []);
 
     return(
         <div>
-            <div>
-
-            </div>
+            <h3>{userTeam.team_name}</h3>
+            <h5>Join code - {userTeam.join_code}</h5>
+            <h5>Roster:</h5>
+            <ul>
+                {userTeam.map((user)=>{
+                    return(
+                        <li key={user.id}>{user.first_name + " " + user.last_name}</li>
+                )})}
+            </ul>
         </div>
     )
 }

src/redux/sagas/_root.saga.js

@@ -5,6 +5,7 @@ import userSaga from './user.saga';
 import updateUserSaga from './updateUser.saga';
 import activitiesSaga from './getActivities.saga';
 import createLeagueSaga from './createLeague.saga';
+import leagueSaga from './getLeague.saga';
 import leaguesSaga from './getLeagues.saga';
 import teamsSaga from './getTeams.saga';
 import createTeamSaga from './createTeam.saga';
@@ -25,6 +26,7 @@ export default function* rootSaga() {
     updateUserSaga(),
     activitiesSaga(),
     createLeagueSaga(),
+    leagueSaga(),
     leaguesSaga(),
     teamsSaga(),
     teamSaga(),