started groups feature

src/App.js

@@ -3,10 +3,14 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Nav from './components/Nav';
 import Signin from './components/auth/Signin';
 import Signup from './components/auth/Signup';
-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 Main from './components/Main';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -23,9 +27,12 @@ function App() {
 					<Route component={Signin} path="/login" />
 					<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" />
 				</Switch>
 			</BrowserRouter>

src/components/CreateGroup.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+
+const CreateGroup = (props) => {
+	const onSubmit = (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="" for="title">
+							Group Title:{' '}
+						</label>
+						<input
+							type="text"
+							id="title"
+							name="title"
+							className="form-control d-flex"
+							placeholder="Enter title here..."
+						></input>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default CreateGroup;

src/components/Group.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
-const Pools = (props) => {
+const Group = (props) => {
+	const id = props.match.params.id;
 	const [state, setState] = useState({
 		Pools: [
 			{
@@ -65,6 +66,7 @@ const Pools = (props) => {
 	};
 
 	useEffect(() => {
+		console.log('hello');
 		callAPI();
 	}, []);
 	const maybePluralize = (count, noun, suffix = 's') =>
@@ -117,4 +119,4 @@ const Pools = (props) => {
 	);
 };
 
-export default Pools;
+export default Group;

src/components/Groups.js

@@ -0,0 +1,71 @@
+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, el) => {
+					let background;
+					if (el % 2 == 0) {
+						background = '#F1EAE8';
+					} else {
+						background = '#FFFFFF';
+					}
+					return (
+						<div
+							className="card card-body text-left"
+							style={{ backgroundColor: background }}
+						>
+							<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, el) => {
+					let background;
+					if (el % 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.js

@@ -27,8 +27,13 @@ const Nav = (props) => {
 						</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.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 const Pool = (props) => {
+	const poolid = props.match.params.poolid;
 	const id = props.match.params.id;
 	const [state, setState] = useState({
 		pool_title: 'TJ Carpool',
@@ -40,7 +41,7 @@ const Pool = (props) => {
 				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
 				className=" d-flex justify-content-center p-4"
 			>
-				Pool {id}
+				Pool {poolid}
 			</h1>
 			<div className="container " style={{ fontFamily: 'Courier New' }}>
 				<div className="card card-body " style={{ backgroundColor: '#F1EAE8' }}>

src/components/UpdatePool.js

@@ -24,7 +24,7 @@ const UpdatePool = (props) => {
 	};
 	const onSubmit = (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);