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

src/components/CreateGroup.tsx

@@ -1,26 +1,47 @@
 import { useCallback } from 'react';
+import { makeAPIPostCall } from '../api/utils';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { useState, useEffect } from 'react';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+	},
+}));
 const CreateGroup = () => {
-	const onSubmit = useCallback<React.FormEventHandler<HTMLFormElement>>((e) => {
+	const [title, setTitle] = useState('No Title');
-		e.preventDefault();
+	const classes = useStyles();
-
+	useEffect(() => {}, []);
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
+	const onClick = () => {
-			.then((response) => response.json())
+		console.log({
-			.then((data) => {
+			title: title,
-				console.log(data);
 		});
-	}, []);
+		makeAPIPostCall('/group', {
+			title,
+		});
+	};
 
 	return (
-		<div
+		<div className="container">
-			className="bg-dark"
+			<Card
-			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
+				className={classes.root + 'd-inline-flex'}
+				style={{ margin: '0.5rem', background: '#F3F5F4' }}
 			>
-			<div
+				<CardContent>
-				className="container card card-body text-left "
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
-				style={{ backgroundColor: '#F1EAE8' }}
+					<Typography variant="body2" color="textSecondary" component="p">
-			>
+						<form>
-				<form onSubmit={onSubmit}>
 							<div className="form-group">
 								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
 									Create Group
@@ -34,10 +55,22 @@ const CreateGroup = () => {
 									name="title"
 									className="form-control d-flex"
 									placeholder="Enter title here..."
+									onChange={(event) => setTitle(event.target.value)}
 								/>
 							</div>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
+								Submit
+							</Button>
 						</form>
-			</div>
+					</Typography>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };

src/components/CreatePool.tsx

@@ -1,5 +1,22 @@
 import { makeAPIPostCall } from '../api/utils';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { useState, useEffect } from 'react';
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+	},
+}));
 
 const CreatePool = () => {
 	const [title, setTitle] = useState('No Title');
@@ -9,6 +26,7 @@ const CreatePool = () => {
 	const [direction, setDirection] = useState('pickup');
 	const [type, setType] = useState('offer');
 	const [description, setDescription] = useState('');
+	const classes = useStyles();
 	const [group, setGroup] = useState('');
 
 	const onClick = () => {
@@ -25,14 +43,15 @@ const CreatePool = () => {
 	};
 	useEffect(() => {}, []);
 	return (
-		<div
+		<div className="container">
-			className="bg-dark"
+			<Card
-			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
+				className={classes.root + 'd-inline-flex'}
-		>
+				style={{ margin: '0.5rem', background: '#F3F5F4' }}
-			<div
-				className="container card card-body text-left "
-				style={{ backgroundColor: '#F1EAE8' }}
 			>
+				<CardContent>
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
+					<Typography variant="body2" color="textSecondary" component="p">
+						<form>
 							<div className="form-group">
 								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
 									Create Pool
@@ -59,7 +78,9 @@ const CreatePool = () => {
 									name="capacity"
 									className="form-control d-flex"
 									placeholder="0"
-						onChange={(event) => setCapacity(parseInt(event.target.value))}
+									onChange={(event) =>
+										setCapacity(parseInt(event.target.value))
+									}
 								></input>
 							</div>
 							<div className="form-group">
@@ -138,11 +159,20 @@ const CreatePool = () => {
 									onChange={(event) => setGroup(event.target.value)}
 								></input>
 							</div>
-				<button className="btn btn-success text-left" onClick={onClick}>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
 								Submit
-				</button>
+							</Button>
 							<br />
-			</div>
+						</form>
+					</Typography>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };