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

src/components/CreateGroup.tsx

@@ -1,43 +1,76 @@
 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
-				className="container card card-body text-left "
-				style={{ backgroundColor: '#F1EAE8' }}
 			>
-				<form onSubmit={onSubmit}>
+				<CardContent>
-					<div className="form-group">
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
-						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+					<Typography variant="body2" color="textSecondary" component="p">
-							Create Group
+						<form>
-						</h1>
+							<div className="form-group">
-						<label className="" htmlFor="title">
+								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
-							Group Title:{' '}
+									Create Group
-						</label>
+								</h1>
-						<input
+								<label className="" htmlFor="title">
-							type="text"
+									Group Title:{' '}
-							id="title"
+								</label>
-							name="title"
+								<input
-							className="form-control d-flex"
+									type="text"
-							placeholder="Enter title here..."
+									id="title"
-						/>
+									name="title"
-					</div>
+									className="form-control d-flex"
-				</form>
+									placeholder="Enter title here..."
-			</div>
+									onChange={(event) => setTitle(event.target.value)}
+								/>
+							</div>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
+								Submit
+							</Button>
+						</form>
+					</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,124 +43,136 @@ 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' }}
 			>
-				<div className="form-group">
+				<CardContent>
-					<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
-						Create Pool
+					<Typography variant="body2" color="textSecondary" component="p">
-					</h1>
+						<form>
-					<label className="" htmlFor="title">
+							<div className="form-group">
-						Pool Title:{' '}
+								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
-					</label>
+									Create Pool
-					<input
+								</h1>
-						type="text"
+								<label className="" htmlFor="title">
-						id="title"
+									Pool Title:{' '}
-						name="title"
+								</label>
-						className="form-control d-flex"
+								<input
-						placeholder="Enter title here..."
+									type="text"
-						onChange={(event) => setTitle(event.target.value)}
+									id="title"
-					></input>
+									name="title"
-				</div>
+									className="form-control d-flex"
-				<div className="form-group">
+									placeholder="Enter title here..."
-					<label className="" htmlFor="capacity">
+									onChange={(event) => setTitle(event.target.value)}
-						Pool Capacity:
+								></input>
-					</label>
+							</div>
-					<input
+							<div className="form-group">
-						type="number"
+								<label className="" htmlFor="capacity">
-						id="capacity"
+									Pool Capacity:
-						name="capacity"
+								</label>
-						className="form-control d-flex"
+								<input
-						placeholder="0"
+									type="number"
-						onChange={(event) => setCapacity(parseInt(event.target.value))}
+									id="capacity"
-					></input>
+									name="capacity"
-				</div>
+									className="form-control d-flex"
-				<div className="form-group">
+									placeholder="0"
-					<label className="" htmlFor="pool_start">
+									onChange={(event) =>
-						Start Time:
+										setCapacity(parseInt(event.target.value))
-					</label>
+									}
-					<input
+								></input>
-						type="datetime-local"
+							</div>
-						id="pool_start"
+							<div className="form-group">
-						name="pool_start"
+								<label className="" htmlFor="pool_start">
-						className="form-control"
+									Start Time:
-						placeholder=""
+								</label>
-						onChange={(event) => setStart(event.target.value)}
+								<input
-					></input>
+									type="datetime-local"
-				</div>
+									id="pool_start"
-				<div className="form-group">
+									name="pool_start"
-					<label className="" htmlFor="pool_end">
+									className="form-control"
-						End Time:
+									placeholder=""
-					</label>
+									onChange={(event) => setStart(event.target.value)}
-					<input
+								></input>
-						type="datetime-local"
+							</div>
-						id="pool_end"
+							<div className="form-group">
-						name="pool_end"
+								<label className="" htmlFor="pool_end">
-						className="form-control"
+									End Time:
-						placeholder="Enter text here..."
+								</label>
-						onChange={(event) => setEnd(event.target.value)}
+								<input
-					></input>
+									type="datetime-local"
-				</div>
+									id="pool_end"
-				<div className="form-group">
+									name="pool_end"
-					<label className="" htmlFor="pool_direction">
+									className="form-control"
-						Direction:
+									placeholder="Enter text here..."
-					</label>
+									onChange={(event) => setEnd(event.target.value)}
-					<select
+								></input>
-						id="direction"
+							</div>
-						name="direction"
+							<div className="form-group">
-						onChange={(event) => setDirection(event.target.value)}
+								<label className="" htmlFor="pool_direction">
-					>
+									Direction:
-						<option value="pickup">Picking Up</option>
+								</label>
-						<option value="dropoff">Dropping Off</option>
+								<select
-					</select>
+									id="direction"
-				</div>
+									name="direction"
-				<div className="form-group">
+									onChange={(event) => setDirection(event.target.value)}
-					<label className="" htmlFor="pool_type">
+								>
-						Type:
+									<option value="pickup">Picking Up</option>
-					</label>
+									<option value="dropoff">Dropping Off</option>
-					<select
+								</select>
-						id="type"
+							</div>
-						name="type"
+							<div className="form-group">
-						onChange={(event) => setType(event.target.value)}
+								<label className="" htmlFor="pool_type">
-					>
+									Type:
-						<option value="offer">Offering carpool</option>
+								</label>
-						<option value="request">Requesting carpooll</option>
+								<select
-					</select>
+									id="type"
-				</div>
+									name="type"
-				<div className="form-group">
+									onChange={(event) => setType(event.target.value)}
-					<label className="" htmlFor="title">
+								>
-						Pool Description:
+									<option value="offer">Offering carpool</option>
-					</label>
+									<option value="request">Requesting carpooll</option>
-					<textarea
+								</select>
-						onChange={(event) => setDescription(event.target.value)}
+							</div>
-						id="Pool-text"
+							<div className="form-group">
-						name="Pool-text"
+								<label className="" htmlFor="title">
-						style={{ height: '200px' }}
+									Pool Description:
-						className="form-control"
+								</label>
-						placeholder="Enter text here..."
+								<textarea
-					/>
+									onChange={(event) => setDescription(event.target.value)}
-				</div>
+									id="Pool-text"
-				<div className="form-group">
+									name="Pool-text"
-					<label className="" htmlFor="pool_start">
+									style={{ height: '200px' }}
-						Group:
+									className="form-control"
-					</label>
+									placeholder="Enter text here..."
-					<input
+								/>
-						type="text"
+							</div>
-						className="form-control"
+							<div className="form-group">
-						placeholder=""
+								<label className="" htmlFor="pool_start">
-						onChange={(event) => setGroup(event.target.value)}
+									Group:
-					></input>
+								</label>
-				</div>
+								<input
-				<button className="btn btn-success text-left" onClick={onClick}>
+									type="text"
-					Submit
+									className="form-control"
-				</button>
+									placeholder=""
-				<br />
+									onChange={(event) => setGroup(event.target.value)}
-			</div>
+								></input>
+							</div>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
+								Submit
+							</Button>
+							<br />
+						</form>
+					</Typography>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };