added cards to profile

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() {
 					<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="/pool/:id" />

src/components/MyPools.tsx

@@ -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 (
-		<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 (
-						<Card className={classes.root + 'd-inline-flex'}>
-							<CardActionArea>
-								<CardContent>
-									<Typography gutterBottom variant="h5" component="h2">
-										{pool.pool_title}
-									</Typography>
-									<Typography
-										variant="body2"
-										color="textSecondary"
-										component="p"
-									>
-										Lizards are a widespread group of squamate reptiles, with
-										over 6,000 species, ranging across all continents except
-										Antarctica
-									</Typography>
-								</CardContent>
-							</CardActionArea>
-							<CardActions>
-								<Button size="small" color="primary">
-									Share
-								</Button>
-								<Button size="small" color="primary">
-									Learn More
-								</Button>
-							</CardActions>
-						</Card>
-					);
-				})}
-			</div>
-		</div>
-	);
-};
-
-export default MyPools;

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();

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 (
 		<div
@@ -93,20 +112,20 @@ const Profile = () => {
 					<u>{state.user.username}'s Pools</u>
 				</h2>
 				<div className="">
-					{state.pools.map((pool) => {
+					{pools.map((pool) => {
 						return (
 							<Card className={classes.root + 'd-inline-flex'}>
 								<CardActionArea href={'/pool/' + pool.id}>
 									<CardContent>
 										<Typography gutterBottom variant="h5" component="h2">
-											{pool.title}
+											{pool.pool_title}
 										</Typography>
 										<Typography
 											variant="body2"
 											color="textSecondary"
 											component="p"
 										>
-											{pool.description}
+											{pool.pool_text}
 										</Typography>
 									</CardContent>
 								</CardActionArea>