From 37236f903a27032aeca59acf0178025682e82d40 Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Sat, 10 Apr 2021 13:31:06 -0400
Subject: [PATCH] started groups feature
---
src/App.js | 13 +++--
src/components/CreateGroup.js | 44 +++++++++++++++++
src/components/{Pools.js => Group.js} | 6 ++-
src/components/Groups.js | 71 +++++++++++++++++++++++++++
src/components/MyGroups.js | 66 +++++++++++++++++++++++++
src/components/Nav.js | 9 +++-
src/components/Pool.js | 3 +-
src/components/UpdatePool.js | 2 +-
8 files changed, 205 insertions(+), 9 deletions(-)
create mode 100644 src/components/CreateGroup.js
rename src/components/{Pools.js => Group.js} (96%)
create mode 100644 src/components/Groups.js
create mode 100644 src/components/MyGroups.js
diff --git a/src/App.js b/src/App.js
index 3094f03..86a7a20 100644
--- a/src/App.js
+++ b/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={Pool} path="/pool/:id" />
+ <Route component={Group} path="/group/:id" />
+ <Route component={Pool} path="/group/:id/pool/:poolid" />
<Route component={Profile} path="/profile" />
</Switch>
</BrowserRouter>
diff --git a/src/components/CreateGroup.js b/src/components/CreateGroup.js
new file mode 100644
index 0000000..e7f91e3
--- /dev/null
+++ b/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;
diff --git a/src/components/Pools.js b/src/components/Group.js
similarity index 96%
rename from src/components/Pools.js
rename to src/components/Group.js
index 924496b..db52e61 100644
--- a/src/components/Pools.js
+++ b/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;
diff --git a/src/components/Groups.js b/src/components/Groups.js
new file mode 100644
index 0000000..0966bd7
--- /dev/null
+++ b/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;
diff --git a/src/components/MyGroups.js b/src/components/MyGroups.js
new file mode 100644
index 0000000..f6b4ee5
--- /dev/null
+++ b/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;
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 1fc371e..119e7f9 100644
--- a/src/components/Nav.js
+++ b/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">
- Pools
+ <a className="nav-link text-white" href="/groups">
+ Groups
+ </a>
+ </li>
+ <li className="nav-item">
+ <a className="nav-link text-white" href="/mygroups">
+ MyGroups
</a>
</li>
</ul>
diff --git a/src/components/Pool.js b/src/components/Pool.js
index 9f0bdee..0650725 100644
--- a/src/components/Pool.js
+++ b/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' }}>
diff --git a/src/components/UpdatePool.js b/src/components/UpdatePool.js
index 0346d64..65e5e7b 100644
--- a/src/components/UpdatePool.js
+++ b/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);