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

Add files via upload

Browse Source
This commit is contained in:
nkanchinadam 2021-04-10 19:42:21 -04:00 committed by GitHub
parent a494c728eb
commit 986872438f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pools.tsx
View File

@ -105,7 +105,7 @@ const Pools = () => {
</p> </p>
<p className="text-left">Start Time: {pool.start_time}</p> <p className="text-left">Start Time: {pool.start_time}</p>
<p className="text-left">End Time: {pool.end_time}</p> <p className="text-left">End Time: {pool.end_time}</p>
<p className="text-warning"> <p className="" style={{color: '#9E6105'}}>
{maybePluralize(pool.comments.length, 'comment')} {maybePluralize(pool.comments.length, 'comment')}
</p> </p>
</div> </div>

211
src/components/Profile.tsx
View File

@ -1,154 +1,107 @@
import Button from '@material-ui/core/Button'; import { CenterFocusStrong } from '@material-ui/icons';
import Card from '@material-ui/core/Card'; import React, { useState, useEffect } from 'react';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { useContext, useEffect, useState } from 'react';
import { API_ENDPOINT } from '../api/api';
import AuthenticationContext from './AuthenticationContext';
const useStyles = makeStyles({ const maybePluralize = (count: number, noun: string, suffix = 's') =>
root: { `${count} ${noun}${count !== 1 ? suffix : ''}`;
maxWidth: 345,
},
media: {
height: 140,
},
});
const Profile = () => { const Profile = () => {
const { user, isLoggedIn } = useContext(AuthenticationContext); const [state, setState] = useState({
const [groups, setGroups] = useState<Carpool.Group[]>([]); user: {
const [pools, setPools] = useState([ username: 'HyperionLegion',
{
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?',
],
}, },
{ pools: [
id: 2, {
pool_title: 'TJ Carpool', title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes', description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM', start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM', id: 1,
capacity: 2, end_time: '4/10/2021 4:00 PM',
participants: [], capacity: 2,
comments: [ participant_ids: [],
'What is the covid vaccination status of all the participants?', comments: [
], 'What is the covid vaccination status of all the participants?',
}, ],
{ },
id: 3, {
pool_title: 'TJ Carpool', title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes', description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM', start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM', id: 2,
capacity: 2, end_time: '4/10/2021 4:00 PM',
participants: [], capacity: 2,
comments: [ participant_ids: [],
'What is the covid vaccination status of all the participants?', comments: [
], 'What is the covid vaccination status of all the participants?',
}, ],
{ },
id: 4, {
pool_title: 'TJ Carpool', title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes', description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM', start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM', id: 3,
capacity: 2, end_time: '4/10/2021 4:00 PM',
participants: [], capacity: 2,
comments: [ participant_ids: [],
'What is the covid vaccination status of all the participants?', comments: [
], 'What is the covid vaccination status of all the participants?',
}, ],
]); },
const classes = useStyles(); ],
groups: [],
});
useEffect(() => { const callAPI = () => {
console.log(process.env); fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json()) .then((response) => response.json())
.then((json) => { .then((data) => {
if (json) { if (data !== undefined) {
setPools(json.data); setState(data);
} }
}); });
};
useEffect(() => {
callAPI();
}, []); }, []);
if (!user) {
return <h1>Please Sign In</h1>;
}
return ( return (
<div <div className="bg-dark" style={{ minHeight: '100vh' }}>
className=""
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
>
<h1 <h1
className="d-flex justify-content-center p-4" className="d-flex justify-content-center p-4"
style={{ backgroundColor: '#F1EAE8' }} style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
> >
Profile Profile
</h1> </h1>
<div className="container"> <div className="container" style={{ fontFamily: 'Courier New', alignSelf: 'center' }}>
<h2> <h2 style={{color: '#FFFFFF'}}><u>{state.user.username}'s Pools</u></h2>
<u>{user.username}'s Pools</u>
</h2>
<div className=""> <div className="">
{pools.map((pool) => { {state.pools.map((pool, index) => {
let background;
if (index % 2 === 0) {
background = '#F1EAE8';
} else {
background = '#FFFFFF';
}
return ( return (
<Card <div
className={classes.root + 'd-inline-flex'} className="card card-body text-left"
style={{ margin: '0.5rem' }} style={{ backgroundColor: background }}
> >
<CardActionArea href={'/pool/' + pool.id}> <a href={'/Pool/' + pool.id} className="card-title">
<CardContent> {pool.title}
<Typography gutterBottom variant="h5" component="h2"> </a>
{pool.pool_title} <p className="text-left">
</Typography> Capacity: {pool.participant_ids.length} / {pool.capacity}
<Typography </p>
variant="body2" <p className="text-left">Start Time: {pool.start_time}</p>
color="textSecondary" <p className="text-left">End Time: {pool.end_time}</p>
component="p" <p className="" style={{color: '#9E6105'}}>
> {maybePluralize(pool.comments.length, 'comment')}
{pool.pool_text} </p>
</Typography> </div>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
let link: string = 'localhost:3000/pool/' + pool.id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/pool/' + pool.id}
size="small"
color="primary"
>
Learn More
</Button>
</CardActions>
</Card>
); );
})} })}
</div> </div>
</div> </div>
<script></script>
</div> </div>
); );
}; };