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

improve Group landing page

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 20:51:11 -04:00
parent ef0e4ce745
commit fd3389c004
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Group.tsx
View File

@ -1,5 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { makeAPIGetCall } from '../api/utils'; import { makeAPIGetCall } from '../api/utils';
@ -40,7 +42,13 @@ export default function Group() {
const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS); const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
useEffect(() => { useEffect(() => {
makeAPIGetCall('/group', { id }).then((res) => setGroup(res.data.data)); makeAPIGetCall('/group', { groupID: id }).then((res) => {
setGroup(res.data.data);
});
makeAPIGetCall('/group_pools', { groupID: id }).then((res) => {
setPools(res.data.data);
});
}, [id]); }, [id]);
if (!group) { if (!group) {
@ -63,23 +71,16 @@ export default function Group() {
<Typography variant="h3" align="center"> <Typography variant="h3" align="center">
Pools Pools
</Typography> </Typography>
<a className="btn btn-large btn-success" href="/create_pool"> <Button
Create Pool onClick={() => (window.location.href = '/create_pool')}
</a> variant="contained"
<div className="container">
<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 }}
> >
Create Pool
</Button>
<div className="container">
{pools.map((pool, index) => {
return (
<Card style={{ margin: '0.5em' }} key={index}>
<a href={'/Pool/' + pool.id} className="card-title"> <a href={'/Pool/' + pool.id} className="card-title">
{pool.title} {pool.title}
</a> </a>
@ -91,7 +92,7 @@ export default function Group() {
<p className="text-warning"> <p className="text-warning">
{maybePluralize(pool.comments.length, 'comment')} {maybePluralize(pool.comments.length, 'comment')}
</p> </p>
</div> </Card>
); );
})} })}
</div> </div>