feat: didn't go to sleep

package.json

@@ -10,6 +10,7 @@
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
 		"@types/bootstrap": "^5.0.12",
+		"@types/google-map-react": "^2.1.0",
 		"@types/leaflet": "^1.7.0",
 		"@types/node": "^14.14.37",
 		"@types/react": "^17.0.3",
@@ -17,7 +18,9 @@
 		"axios": "^0.21.1",
 		"bootstrap": "^4.6.0",
 		"dotenv": "^8.2.0",
+		"google-map-react": "^2.1.9",
 		"jquery": "^3.6.0",
+		"leaflet": "^1.7.1",
 		"popper.js": "^1.16.1",
 		"react": "^17.0.2",
 		"react-bootstrap": "^1.5.2",

src/components/CreateGroup.tsx

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { useState } from 'react';
 import { makeAPIPostCall } from '../api/utils';
+import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -19,11 +20,24 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 const CreateGroup = () => {
+	const history = useHistory();
 	const [title, setTitle] = useState('No Title');
 	const classes = useStyles();
 
 	const onClick = () => {
-		makeAPIPostCall('/groups/', { title });
+		makeAPIPostCall('/groups/', {
+			name: title,
+		}).then((res) => {
+			handleCallback(res.data);
+		});
+	};
+
+	const handleCallback = (res: any) => {
+		if (res.status === 'error') {
+			alert('There was a problem with your form!');
+		} else {
+			history.push('/profile');
+		}
 	};
 
 	return (

src/components/CreatePool.tsx

@@ -5,7 +5,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { useEffect, useState } from 'react';
 import { searchForPlaces } from '../api/google';
-import { makeAPIPostCall } from '../api/utils';
+import { makeAPIPostCall, makeAPIGetCall } from '../api/utils';
+import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -20,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const CreatePool = () => {
+	const history = useHistory();
 	const [title, setTitle] = useState('No Title');
 	const [capacity, setCapacity] = useState(0);
 	const [start, setStart] = useState('');
@@ -29,6 +31,7 @@ const CreatePool = () => {
 	const [description, setDescription] = useState('');
 	const classes = useStyles();
 	const [group, setGroup] = useState('');
+	const [groups, setGroups] = useState<Carpool.Group[]>([]);
 
 	const onClick = () => {
 		makeAPIPostCall('/pools/', {
@@ -40,9 +43,25 @@ const CreatePool = () => {
 			direction,
 			type,
 			group_id: group,
+		}).then((res) => {
+			handleCallback(res.data);
 		});
 	};
-	useEffect(() => {}, []);
+
+	const handleCallback = (res: any) => {
+		if (res.status === 'error') {
+			alert('There was a problem with your form!');
+		} else {
+			history.push('/profile');
+		}
+	};
+
+	useEffect(() => {
+		makeAPIGetCall('/users/@me/groups').then((res) => {
+			if (res.data.data) setGroups(res.data.data);
+		});
+	}, []);
+
 	return (
 		<div className="container">
 			<Card
@@ -143,15 +162,21 @@ const CreatePool = () => {
 						/>
 					</div>
 					<div className="form-group">
-						<label className="" htmlFor="pool_start">
+						<label className="" htmlFor="group-select">
 							Group:
 						</label>
-						<input
+						<select
-							type="text"
+							name="group-select"
-							className="form-control"
+							id="group-select"
-							placeholder=""
 							onChange={(event) => setGroup(event.target.value)}
-						></input>
+						>
+							<option value="">Select a group</option>
+							{groups.map((group) => (
+								<option key={group._id} value={group._id}>
+									{group.name}
+								</option>
+							))}
+						</select>
 					</div>
 					<div className="form-group">
 						<label className="" htmlFor="location">

src/components/Groups.tsx

@@ -8,7 +8,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import Box from '@material-ui/core/Box';
-import { makeAPIGetCall } from '../api/utils';
+import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
+import { useHistory } from 'react-router-dom';
+
+import GoogleMapReact from 'google-map-react';
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -27,6 +30,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 const Groups = () => {
+	const history = useHistory();
 	const classes = useStyles();
 	const [state, setState] = useState({
 		MyGroups: [
@@ -46,6 +50,7 @@ const Groups = () => {
 				}
 			});
 	};
+
 	const [groups, setGroups] = useState<Carpool.Group[]>([
 		{
 			_id: '1234',
@@ -93,7 +98,7 @@ const Groups = () => {
 							className={classes.root + 'd-inline-flex'}
 							style={{ margin: '0.5rem' }}
 						>
-							<CardActionArea href={'/group/' + group._id}>
+							<CardActionArea href={'/groups/' + group._id}>
 								<CardContent>
 									<Typography gutterBottom variant="h5" component="h2">
 										{group.name}
@@ -112,26 +117,35 @@ const Groups = () => {
 									color="primary"
 									onClick={() => {
 										alert('Copied to Clipboard');
-										let link: string = 'localhost:3000/group/' + group._id;
+										let link: string = 'localhost:3000/groups/' + group._id;
 										navigator.clipboard.writeText(link);
 									}}
 								>
 									Share
 								</Button>
 								<Button
-									href={'/group/' + group._id}
+									href={'/groups/' + group._id}
 									size="small"
 									color="primary"
 								>
 									Learn More
 								</Button>
-								<form action={'/requestgroup/' + group._id} method="POST">
+								<button
-									<input
 									type="submit"
+									onClick={() => {
+										makeAPIPostCall(`/groups/${group._id}/join`).then((res) => {
+											if (res.data.status === 'error') {
+												alert('There was a problem joining the group!');
+											} else {
+												history.push(`/groups/${group._id}`);
+											}
+										});
+									}}
 									value="Request to Join"
 									className="btn btn-success d-flex"
-									/>
+								>
-								</form>
+									Join Group
+								</button>
 							</CardActions>
 						</Card>
 					);

src/components/MyGroups.tsx

@@ -28,35 +28,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 const MyGroups = () => {
 	const classes = useStyles();
-	const [state, setState] = useState({
-		MyGroups: [
-			{
-				id: 1,
-				group_title: 'TJ',
-			},
-		],
-	});
 
-	const callAPI = () => {
+	const [groups, setGroups] = useState<Carpool.Group[]>();
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setState(data);
-				}
-			});
-	};
-	const [groups, setGroups] = useState<Carpool.Group[]>([
-		{
-			_id: '1234',
-			name: 'TJ',
-			creator_id: '12345Q',
-			member_ids: [],
-		},
-	]);
 
 	useEffect(() => {
-		makeAPIGetCall('/browse/groups').then((res) => {
+		makeAPIGetCall('/users/@me/groups').then((res) => {
 			if (res.data.data) {
 				setGroups(res.data.data);
 			}
@@ -86,19 +62,19 @@ const MyGroups = () => {
 			</Box>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
-				{groups.map((group, index) => {
+				{groups?.map((group, index) => {
-					let background;
+					// let background;
-					if (index % 2 === 0) {
+					// if (index % 2 === 0) {
-						background = '#F1EAE8';
+					// 	background = '#F1EAE8';
-					} else {
+					// } else {
-						background = '#FFFFFF';
+					// 	background = '#FFFFFF';
-					}
+					// }
 					return (
 						<Card
 							className={classes.root + 'd-inline-flex'}
 							style={{ margin: '0.5rem' }}
 						>
-							<CardActionArea href={'/group/' + group._id}>
+							<CardActionArea href={'/groups/' + group._id}>
 								<CardContent>
 									<Typography gutterBottom variant="h5" component="h2">
 										{group.name}
@@ -117,14 +93,14 @@ const MyGroups = () => {
 									color="primary"
 									onClick={() => {
 										alert('Copied to Clipboard');
-										let link: string = 'localhost:3000/group/' + group._id;
+										let link: string = 'localhost:3000/groups/' + group._id;
 										navigator.clipboard.writeText(link);
 									}}
 								>
 									Share
 								</Button>
 								<Button
-									href={'/group/' + group._id}
+									href={'/groups/' + group._id}
 									size="small"
 									color="primary"
 								>

src/components/Nav.tsx

@@ -22,9 +22,8 @@ const useStyles = makeStyles({
 });
 const navLinks = [
 	{ title: `Profile`, path: `/profile` },
-	{ title: `Create Pool`, path: `/create_pool` },
+	{ title: `Groups`, path: `/groups` },
-	// { title: `Groups`, path: `/groups` },
+	{ title: `My Groups`, path: `/mygroups` },
-	// { title: `MyGroups`, path: `/mygroups` },
 ];
 const Nav = () => {
 	const classes = useStyles();

src/components/PoolMap.tsx

@@ -1,27 +1,17 @@
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import GoogleMapReact from 'google-map-react';
 
-const center = {
+const position = { lat: 39.043758, lng: -77.487442 };
-	lat: 0,
-	lng: -180,
-};
-
-const position = {
-	lat: 37.772,
-	lng: -122.214,
-};
 
 export default function PoolMap() {
 	return (
-		<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
+		<div style={{ height: '50vh', width: '100%' }}>
-			<TileLayer
+			<GoogleMapReact
-				attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+				bootstrapURLKeys={{
-				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+					key: 'AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI',
-			/>
+				}}
-			<Marker position={position}>
+				defaultCenter={position}
-				<Popup>
+				defaultZoom={11}
-					A pretty CSS3 popup. <br /> Easily customizable.
+			></GoogleMapReact>
-				</Popup>
+		</div>
-			</Marker>
-		</MapContainer>
 	);
 }

yarn.lock

@@ -1161,6 +1161,13 @@
   dependencies:
     fast-deep-equal "^3.1.3"
 
+"@googlemaps/js-api-loader@^1.7.0":
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.11.3.tgz#de2db86c5c64ed62f2f16dc59eb59821257dc583"
+  integrity sha512-MUX04/b5dBIqi2jl2/89FS48gWPm5cgUwO4dDffIoylKv/e7HP9gJvpKqk1/JMIYPX2y/qO2TqFteRAWmNU1BA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
@@ -1380,6 +1387,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@mapbox/point-geometry@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
+
 "@material-ui/core@^4.11.3":
   version "4.11.3"
   resolved "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz"
@@ -1823,6 +1835,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/google-map-react@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/google-map-react/-/google-map-react-2.1.0.tgz#0acee58ae23f471d3dbbe345c273728458945ab6"
+  integrity sha512-HQF008Q8UKBBZu2T2++P5vx71IE52R2bHgmaKV8n6V5gyZIcrjsAe1OjIbgIN68aqjeo99N0/f10rYRyf2gTAA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -4865,7 +4884,7 @@ etag@~1.8.1:
   resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -5489,6 +5508,16 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+google-map-react@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/google-map-react/-/google-map-react-2.1.9.tgz#6e539ce8bf28e7b8cda6058402e7581d1d1cec3d"
+  integrity sha512-//Pa0o6sdspU2H0ehVztSDQSnYYeV6TY4Z6ftty34yiCJYLliOzeq17dA9uFkyUFdL+XwbTU6e9mfs+bjBMIzw==
+  dependencies:
+    "@googlemaps/js-api-loader" "^1.7.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    eventemitter3 "^4.0.4"
+    prop-types "^15.7.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.6"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
@@ -7112,6 +7141,11 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
+leaflet@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
+  integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"