diff --git a/src/App.tsx b/src/App.tsx index 612b174..e49403c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,6 @@ 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'; @@ -30,7 +29,6 @@ function App() { - diff --git a/src/components/MyPools.tsx b/src/components/MyPools.tsx deleted file mode 100644 index 93d0d27..0000000 --- a/src/components/MyPools.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { API_ENDPOINT } from '../api/api'; -import { makeStyles } from '@material-ui/core/styles'; -import Card from '@material-ui/core/Card'; -import CardActionArea from '@material-ui/core/CardActionArea'; -import CardActions from '@material-ui/core/CardActions'; -import CardContent from '@material-ui/core/CardContent'; -import CardMedia from '@material-ui/core/CardMedia'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles({ - root: { - maxWidth: 345, - }, - media: { - height: 140, - }, -}); -const MyPools = () => { - // 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: number, noun: string, suffix = 's') => - `${count} ${noun}${count !== 1 ? suffix : ''}`; - const classes = useStyles(); - - return ( -
-

- Pools -

- - Create Pool - -
-

- {pools.map((pool, index) => { - let background; - if (index % 2 === 0) { - background = '#F1EAE8'; - } else { - background = '#FFFFFF'; - } - return ( - - - - - {pool.pool_title} - - - Lizards are a widespread group of squamate reptiles, with - over 6,000 species, ranging across all continents except - Antarctica - - - - - - - - - ); - })} -
-
- ); -}; - -export default MyPools; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index f2993f1..595a4e6 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -24,7 +24,6 @@ const navLinks = [ { title: `Profile`, path: `/profile` }, { title: `Groups`, path: `/groups` }, { title: `MyGroups`, path: `/mygroups` }, - { title: `MyPools`, path: `/mypools` }, ]; const Nav = () => { const classes = useStyles(); diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 3e7935c..5beca9e 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -22,46 +22,58 @@ const Profile = () => { user: { username: 'HyperionLegion', }, - pools: [ - { - title: 'TJ Carpool', - description: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - id: 1, - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - title: 'TJ Carpool', - description: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - id: 2, - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - title: 'TJ Carpool', - description: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - id: 3, - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - ], groups: [], }); + 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?', + ], + }, + ]); const classes = useStyles(); const callAPI = () => { @@ -75,7 +87,14 @@ const Profile = () => { }; useEffect(() => { - callAPI(); + console.log(process.env); + fetch(`${API_ENDPOINT}/my_pools`) + .then((response) => response.json()) + .then((json) => { + if (json) { + setPools(json.data); + } + }); }, []); return (
{ {state.user.username}'s Pools
- {state.pools.map((pool) => { + {pools.map((pool) => { return ( - {pool.title} + {pool.pool_title} - {pool.description} + {pool.pool_text}