rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

started groups feature

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-10 13:31:06 -04:00
parent 4598a26121
commit 37236f903a
8 changed files with 205 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.js
View File

@ -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>

44
src/components/CreateGroup.js Normal file
View File

@ -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;

6
src/components/Pools.js → src/components/Group.js
View File

@ -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;

71
src/components/Groups.js Normal file
View File

@ -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;

66
src/components/MyGroups.js Normal file
View File

@ -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;

9
src/components/Nav.js
View File

@ -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>

3
src/components/Pool.js
View File

@ -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' }}>

2
src/components/UpdatePool.js
View File

@ -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);