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

src/App.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Nav from './components/Nav';
-import Pools from './components/Pools';
+
+import Group from './components/Group';
 import Pool from './components/Pool';
 import Profile from './components/Profile';
 import CreatePool from './components/CreatePool';
+import CreateGroup from './components/CreateGroup';
+import Groups from './components/Groups';
+import MyGroups from './components/MyGroups';
+
 import UpdatePool from './components/UpdatePool';
 import Home from './components/Home';
 import Main from './components/Main';
@@ -20,9 +25,12 @@ function App() {
 				<Switch>
 					<Route component={Main} path="/about" />
 					<Route component={CreatePool} path="/create_pool" />
+					<Route component={CreateGroup} path="/create_group" />
+					<Route component={Groups} path="/groups" />
+					<Route component={MyGroups} path="/mygroups" />
 					<Route component={UpdatePool} path="/update_pool" />
-					<Route component={Pools} path="/pools" />
+					<Route component={Group} path="/group/:id" />
-					<Route component={Pool} path="/pool/:id" />
+					<Route component={Pool} path="/group/:id/pool/:poolid" />
 					<Route component={Profile} path="/profile" />
 					<Route component={Home} path="/" />
 				</Switch>

src/api.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 const dev = process.env.NODE_ENV === 'development';
 export const API_ENDPOINT = 'http://localhost/api';
 export const ION_AUTHORIZATION_ENDPOINT =

src/components/CreateGroup.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+
+const CreateGroup = () => {
+	const onSubmit = useCallback<React.FormEventHandler<HTMLFormElement>>((e) => {
+		e.preventDefault();
+
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(data);
+			});
+	}, []);
+
+	return (
+		<div
+			className="bg-dark"
+			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
+		>
+			<div
+				className="container card card-body text-left "
+				style={{ backgroundColor: '#F1EAE8' }}
+			>
+				<form onSubmit={onSubmit}>
+					<div className="form-group">
+						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+							Create Group
+						</h1>
+						<label className="" htmlFor="title">
+							Group Title:{' '}
+						</label>
+						<input
+							type="text"
+							id="title"
+							name="title"
+							className="form-control d-flex"
+							placeholder="Enter title here..."
+						/>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default CreateGroup;

src/components/Group.tsx

@@ -0,0 +1,121 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { API_ENDPOINT } from '../api';
+
+const maybePluralize = (count: number, noun: string, suffix = 's') =>
+	`${count} ${noun}${count !== 1 ? suffix : ''}`;
+
+const Group = () => {
+	// eslint-disable-next-line
+	const { id } = useParams<{ id: string }>();
+	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);
+				}
+			});
+	}, []);
+
+	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 Group;

src/components/Groups.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+
+const Groups = (props) => {
+	const [state, setState] = useState({
+		Groups: [
+			{
+				id: 1,
+				group_title: 'TJ',
+			},
+		],
+	});
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+
+	useEffect(() => {
+		callAPI();
+	}, []);
+	return (
+		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+			<h1
+				className="d-flex justify-content-center p-4"
+				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+			>
+				Groups
+			</h1>
+			<a
+				className="btn btn-large btn-success"
+				href="/create_group"
+				style={{ fontFamily: 'Courier New' }}
+			>
+				Create Group
+			</a>
+			<div className="container" style={{ fontFamily: 'Courier New' }}>
+				<br></br>
+				{state.Groups.map((group, index) => {
+					return (
+						<div
+							className="card card-body text-left"
+							style={{
+								backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
+							}}
+						>
+							<form action={'/requestgroup/' + group.id} method="POST">
+								<p className="card-title">{group.group_title}</p>
+								<input
+									type="submit"
+									value="Request to Join"
+									className="btn btn-success d-flex"
+								/>
+							</form>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default Groups;

src/components/MyGroups.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+
+const MyGroups = (props) => {
+	const [state, setState] = useState({
+		MyGroups: [
+			{
+				id: 1,
+				group_title: 'TJ',
+			},
+		],
+	});
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+
+	useEffect(() => {
+		callAPI();
+	}, []);
+	return (
+		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+			<h1
+				className="d-flex justify-content-center p-4"
+				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+			>
+				My Groups
+			</h1>
+			<a
+				className="btn btn-large btn-success"
+				href="/create_group"
+				style={{ fontFamily: 'Courier New' }}
+			>
+				Create Group
+			</a>
+			<div className="container" style={{ fontFamily: 'Courier New' }}>
+				<br></br>
+				{state.MyGroups.map((group, 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={'/group/' + group.id} className="card-title">
+								{group.group_title}
+							</a>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default MyGroups;

src/components/Nav.tsx

@@ -25,8 +25,13 @@ const Nav = () => {
 						</a>
 					</li>
 					<li className="nav-item">
-						<a className="nav-link text-white" href="/pools">
+						<a className="nav-link text-white" href="/groups">
-							Pools
+							Groups
+						</a>
+					</li>
+					<li className="nav-item">
+						<a className="nav-link text-white" href="/mygroups">
+							MyGroups
 						</a>
 					</li>
 				</ul>

src/components/Pool.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, FormEventHandler } from 'react';
+import { useState, useEffect, FormEventHandler, useCallback } from 'react';
 import { useParams } from 'react-router';
 
 const Pool = () => {
@@ -14,16 +14,7 @@ const Pool = () => {
 		comments: ['What is the covid vaccination status of all the participants?'],
 	});
 
-	const callAPI = () => {
+	const onComment = useCallback<FormEventHandler<HTMLFormElement>>((e) => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setState(data);
-				}
-			});
-	};
-	const onComment: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
 
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`)
@@ -31,10 +22,18 @@ const Pool = () => {
 			.then((data) => {
 				console.log(data);
 			});
-	};
-	useEffect(() => {
-		callAPI();
 	}, []);
+
+	useEffect(() => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	}, [id]);
+
 	return (
 		<div className="bg-dark" style={{ minHeight: '100vh' }}>
 			<h1

src/components/UpdatePool.tsx

@@ -32,7 +32,7 @@ const UpdatePool = () => {
 	}, [id]);
 	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/create_pool`)
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`)
 			.then((response) => response.json())
 			.then((data) => {
 				console.log(data);