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

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

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 14:11:12 -04:00
commit 797dda6f36
9 changed files with 332 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.tsx
View File

@ -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={Pool} path="/pool/:id" />
<Route component={Group} path="/group/:id" />
<Route component={Pool} path="/group/:id/pool/:poolid" />
<Route component={Profile} path="/profile" />
<Route component={Home} path="/" />
</Switch>

1
src/api.ts
View File

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

45
src/components/CreateGroup.tsx Normal file
View File

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

121
src/components/Group.tsx Normal file
View File

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

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

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

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

9
src/components/Nav.tsx
View File

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

27
src/components/Pool.tsx
View File

@ -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 = () => {
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) => {
const onComment = useCallback<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

2
src/components/UpdatePool.tsx
View File

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