Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main

package-lock.json

@@ -1875,12 +1875,19 @@
 		"node_modules/@popperjs/core": {
 			"version": "2.9.2",
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
-      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+			"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
 		},
 		"node_modules/@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+			"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
+			"peerDependencies": {
+				"react": ">=16.3.2"
+			}
 		},
 		"node_modules/@restart/hooks": {
 			"version": "0.3.26",
@@ -1889,6 +1896,9 @@
 			"dependencies": {
 				"lodash": "^4.17.20",
 				"lodash-es": "^4.17.20"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
 			}
 		},
 		"node_modules/@rollup/plugin-node-resolve": {
@@ -13403,6 +13413,9 @@
 			"dependencies": {
 				"react-is": "^16.3.2",
 				"warning": "^4.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=0.14.0"
 			}
 		},
 		"node_modules/prop-types-extra/node_modules/react-is": {
@@ -13652,6 +13665,10 @@
 				"react-transition-group": "^4.4.1",
 				"uncontrollable": "^7.2.1",
 				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
 			}
 		},
 		"node_modules/react-dev-utils": {
@@ -13839,6 +13856,10 @@
 				"prop-types": "^15.7.2",
 				"uncontrollable": "^7.0.0",
 				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.3.0",
+				"react-dom": ">=16.3.0"
 			}
 		},
 		"node_modules/react-refresh": {
@@ -16964,6 +16985,9 @@
 				"@types/react": ">=16.9.11",
 				"invariant": "^2.2.4",
 				"react-lifecycles-compat": "^3.0.4"
+			},
+			"peerDependencies": {
+				"react": ">=15.0.0"
 			}
 		},
 		"node_modules/unicode-canonical-property-names-ecmascript": {
@@ -20858,7 +20882,8 @@
 		"@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+			"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
+			"requires": {}
 		},
 		"@restart/hooks": {
 			"version": "0.3.26",

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,118 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { API_ENDPOINT } from '../api/api';
-
-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 : ''}`;
-	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;

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

@@ -1,50 +1,80 @@
 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 Profile = () => {
 	const [state, setState] = useState({
 		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 = () => {
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
@@ -57,10 +87,20 @@ 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 className="" style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}>
+		<div
+			className=""
+			style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
+		>
 			<h1
 				className="d-flex justify-content-center p-4"
 				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
@@ -68,19 +108,52 @@ const Profile = () => {
 				Profile
 			</h1>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
-				<h2><u>{state.user.username}'s Pools</u></h2>
+				<h2>
+					<u>{state.user.username}'s Pools</u>
+				</h2>
 				<div className="">
-					{state.pools.map((pool) => {
+					{pools.map((pool) => {
 						return (
-							<div
+							<Card className={classes.root + 'd-inline-flex'}>
-								className="text-left m-2 p-1"
+								<CardActionArea href={'/pool/' + pool.id}>
-								style={{minHeight: 50, minWidth: '200px', maxWidth: '200px', border: '3px #000000 solid', verticalAlign: 'center', textAlign: 'center', padding: '10px 10px 5px 10px', margin: '0px 10px 0px 10px', display: 'inline'}}>
+									<CardContent>
-								<a href={'pool/' + pool.id}>{pool.title}</a>
+										<Typography gutterBottom variant="h5" component="h2">
-							</div>
+											{pool.pool_title}
+										</Typography>
+										<Typography
+											variant="body2"
+											color="textSecondary"
+											component="p"
+										>
+											{pool.pool_text}
+										</Typography>
+									</CardContent>
+								</CardActionArea>
+								<CardActions>
+									<Button
+										size="small"
+										color="primary"
+										onClick={() => {
+											let link: string = 'localhost:3000/pool/' + pool.id;
+											navigator.clipboard.writeText(link);
+										}}
+									>
+										Share
+									</Button>
+									<Button
+										href={'/pool/' + pool.id}
+										size="small"
+										color="primary"
+									>
+										Learn More
+									</Button>
+								</CardActions>
+							</Card>
 						);
 					})}
 				</div>
 			</div>
+			<script></script>
 		</div>
 	);
 };

yarn.lock

@@ -9460,7 +9460,7 @@
     "strip-ansi" "6.0.0"
     "text-table" "0.2.0"
 
-"react-dom@^17.0.2":
+"react-dom@^17.0.2", "react-dom@>=16.3.0", "react-dom@>=16.8.0":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -9628,7 +9628,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^17.0.2":
+"react@^17.0.2", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.3.0", "react@>=16.3.2", "react@>=16.8.0":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"