diff --git a/src/App.js b/src/App.js index e586d61..7aa58b9 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ import CreatePool from './components/CreatePool'; import CreateGroup from './components/CreateGroup'; import Groups from './components/Groups'; import MyGroups from './components/MyGroups'; - +import MyPools from './components/MyPools'; import UpdatePool from './components/UpdatePool'; import Home from './components/Home'; import Main from './components/Main'; @@ -28,9 +28,10 @@ function App() { <Route component={CreateGroup} path="/create_group" /> <Route component={Groups} path="/groups" /> <Route component={MyGroups} path="/mygroups" /> + <Route component={MyPools} path="/mypools" /> <Route component={UpdatePool} path="/update_pool" /> <Route component={Group} path="/group/:id" /> - <Route component={Pool} path="/group/:id/pool/:poolid" /> + <Route component={Pool} path="/pool/:id" /> <Route component={Profile} path="/profile" /> <Route component={Home} path="/" /> </Switch> diff --git a/src/components/MyPools.js b/src/components/MyPools.js new file mode 100644 index 0000000..b12d2c8 --- /dev/null +++ b/src/components/MyPools.js @@ -0,0 +1,118 @@ +import React, { useState, useEffect } from 'react'; +import { API_ENDPOINT } from '../api'; + +const MyPools = (props) => { + const id = props.match.params.id; + const [pools, setPools] = useState([ + { + id: 1, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 2, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 3, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 4, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + ]); + + useEffect(() => { + console.log(process.env); + fetch(`${API_ENDPOINT}/my_pools`) + .then((response) => response.json()) + .then((json) => { + if (json) { + setPools(json.data); + } + }); + }, []); + + const maybePluralize = (count, noun, suffix = 's') => + `${count} ${noun}${count !== 1 ? suffix : ''}`; + return ( + <div className="bg-dark" style={{ minHeight: '100vh' }}> + <h1 + className="d-flex justify-content-center p-4" + style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }} + > + Pools + </h1> + <a + className="btn btn-large btn-success" + href="/create_pool" + style={{ fontFamily: 'Courier New' }} + > + Create Pool + </a> + <div className="container" style={{ fontFamily: 'Courier New' }}> + <br></br> + {pools.map((pool, index) => { + let background; + if (index % 2 === 0) { + background = '#F1EAE8'; + } else { + background = '#FFFFFF'; + } + return ( + <div + className="card card-body text-left" + style={{ backgroundColor: background }} + > + <a href={'/Pool/' + pool.id} className="card-title"> + {pool.pool_title} + </a> + <p className="text-left"> + Capacity: {pool.participants.length} / {pool.capacity} + </p> + <p className="text-left">Start Time: {pool.start_time}</p> + <p className="text-left">End Time: {pool.end_time}</p> + <p className="text-warning"> + {maybePluralize(pool.comments.length, 'comment')} + </p> + </div> + ); + })} + </div> + </div> + ); +}; + +export default MyPools; diff --git a/src/components/Nav.js b/src/components/Nav.js index 119e7f9..2198209 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -36,6 +36,11 @@ const Nav = (props) => { MyGroups </a> </li> + <li className="nav-item"> + <a className="nav-link text-white" href="/mypools"> + MyPools + </a> + </li> </ul> </div> </nav> diff --git a/src/components/Pool.js b/src/components/Pool.js index 0650725..7d11162 100644 --- a/src/components/Pool.js +++ b/src/components/Pool.js @@ -1,8 +1,7 @@ import React, { useState, useEffect } from 'react'; const Pool = (props) => { - const poolid = props.match.params.poolid; - const id = props.match.params.id; + const poolid = props.match.params.id; const [state, setState] = useState({ pool_title: 'TJ Carpool', id: 1, @@ -15,7 +14,7 @@ const Pool = (props) => { }); const callAPI = () => { - fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) + fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${poolid}`) .then((response) => response.json()) .then((data) => { if (data !== undefined) {