rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 19:29:51 -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 17:51:13 -04:00
commit b6ccd4a6b3
1 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/MyPools.tsx Normal file
View File

@ -0,0 +1,125 @@
import React, { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api/api';
const MyPools = () => {
// const id = props.match.params.id;
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);
}
});
}, []);
const maybePluralize = (count: number, noun: string, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`;
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>
<a
className="btn btn-large btn-success"
href="/create_pool"
style={{ fontFamily: 'Courier New', maxWidth: '135px' }}
>
Update Pool
</a>
</div>
);
})}
</div>
</div>
);
};
export default MyPools;