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

package-lock.json

@@ -19,6 +19,7 @@
 				"@types/react-router-dom": "^5.1.7",
 				"axios": "^0.21.1",
 				"bootstrap": "^4.6.0",
+				"dotenv": "^8.2.0",
 				"jquery": "^3.6.0",
 				"popper.js": "^1.16.1",
 				"react": "^17.0.2",

package.json

@@ -14,6 +14,7 @@
 		"@types/react-router-dom": "^5.1.7",
 		"axios": "^0.21.1",
 		"bootstrap": "^4.6.0",
+		"dotenv": "^8.2.0",
 		"jquery": "^3.6.0",
 		"popper.js": "^1.16.1",
 		"react": "^17.0.2",

src/components/CreatePool.tsx

@@ -1,6 +1,16 @@
 import { FormEventHandler } from 'react';
+import { makeAPIPostCall } from '../api/utils';
+import React, { useState, useEffect } from 'react';
 
 const CreatePool = () => {
+	const [title, setTitle] = useState('No Title');
+	const [capacity, setCapacity] = useState(0);
+	const [start, setStart] = useState('');
+	const [end, setEnd] = useState('');
+	const [direction, setDirection] = useState('pickup');
+	const [type, setType] = useState('offer');
+	const [description, setDescription] = useState('');
+
 	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
 
@@ -10,6 +20,27 @@ const CreatePool = () => {
 				console.log(data);
 			});
 	};
+	const onClick = () => {
+		console.log({
+			title: title,
+			description: description,
+			start_time: start,
+			end_time: end,
+			capacity,
+			direction,
+			type,
+		});
+		makeAPIPostCall('/pool', {
+			title: title,
+			description: description,
+			start_time: start,
+			end_time: end,
+			capacity,
+			direction,
+			type,
+		});
+	};
+	useEffect(() => {}, []);
 	return (
 		<div
 			className="bg-dark"
@@ -33,6 +64,7 @@ const CreatePool = () => {
 							name="title"
 							className="form-control d-flex"
 							placeholder="Enter title here..."
+							onChange={(event) => setTitle(event.target.value)}
 						></input>
 					</div>
 					<div className="form-group">
@@ -44,7 +76,8 @@ const CreatePool = () => {
 							id="capacity"
 							name="capacity"
 							className="form-control d-flex"
-							placeholder="5"
+							placeholder="0"
+							onChange={(event) => setCapacity(parseInt(event.target.value))}
 						></input>
 					</div>
 					<div className="form-group">
@@ -57,6 +90,7 @@ const CreatePool = () => {
 							name="pool_start"
 							className="form-control"
 							placeholder=""
+							onChange={(event) => setStart(event.target.value)}
 						></input>
 					</div>
 					<div className="form-group">
@@ -69,13 +103,41 @@ const CreatePool = () => {
 							name="pool_end"
 							className="form-control"
 							placeholder="Enter text here..."
+							onChange={(event) => setEnd(event.target.value)}
 						></input>
 					</div>
+					<div className="form-group">
+						<label className="" htmlFor="pool_direction">
+							Direction:
+						</label>
+						<select
+							id="direction"
+							name="direction"
+							onChange={(event) => setDirection(event.target.value)}
+						>
+							<option value="pickup">Picking Up</option>
+							<option value="dropoff">Dropping Off</option>
+						</select>
+					</div>
+					<div className="form-group">
+						<label className="" htmlFor="pool_type">
+							Type:
+						</label>
+						<select
+							id="type"
+							name="type"
+							onChange={(event) => setType(event.target.value)}
+						>
+							<option value="offer">Offering carpool</option>
+							<option value="request">Requesting carpooll</option>
+						</select>
+					</div>
 					<div className="form-group">
 						<label className="" htmlFor="title">
 							Pool Description:
 						</label>
 						<textarea
+							onChange={(event) => setDescription(event.target.value)}
 							id="Pool-text"
 							name="Pool-text"
 							style={{ height: '200px' }}
@@ -84,11 +146,9 @@ const CreatePool = () => {
 						/>
 					</div>
 
-					<input
+					<button className="btn btn-success text-left" onClick={onClick}>
-						className="btn btn-success text-left"
+						Submit
-						type="submit"
+					</button>
-						value="Submit"
-					/>
 					<br />
 				</form>
 			</div>

src/components/Home.tsx

@@ -60,7 +60,7 @@ export default function Home() {
 							<u>About Us</u>
 						</h1>
 						<p className="d-flex justify-content-center m-2 p-2">
-							NAME is an app aimed to help communities find safe ways to
+							Wheelshare is an app aimed to help communities find safe ways to
 							carpool. The app has groups where people must be approved before
 							joining. Upon joining, users can create their own car pool inside
 							that communitiy or join others.

yarn.lock

@@ -4436,7 +4436,7 @@
   "resolved" "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz"
   "version" "5.1.0"
 
-"dotenv@8.2.0":
+"dotenv@^8.2.0", "dotenv@8.2.0":
   "integrity" "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
   "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
   "version" "8.2.0"