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 registration code to front end

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 20:25:42 -04:00
parent e61d5c8570
commit e475219769
3 changed files with 138 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Group.tsx
View File

@ -1,77 +1,51 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { API_ENDPOINT } from '../api/api'; import Typography from '@material-ui/core/Typography';
import { makeAPIGetCall } from '../api/utils';
const maybePluralize = (count: number, noun: string, suffix = 's') => const maybePluralize = (count: number, noun: string, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`; `${count} ${noun}${count !== 1 ? suffix : ''}`;
const Group = () => { const SAMPLE_POOLS: Carpool.Pool[] = [
{
id: '1234',
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM',
capacity: 2,
participant_ids: [],
comments: [
{
author_id: 'joshua_hsueh',
body: 'What is the covid vaccination status of all the participants?',
id: 'comment_0',
},
],
driver_id: 'michael',
create_time: '0',
update_time: '0',
group_id: 'test_group',
status: 'pending',
direction: 'dropoff',
author_id: 'michael',
type: 'offer',
},
];
export default function Group() {
// eslint-disable-next-line // eslint-disable-next-line
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const [pools, setPools] = useState([ const [group, setGroup] = useState<Carpool.Group>();
{ const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
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(() => { useEffect(() => {
console.log(process.env); makeAPIGetCall('/group', { id }).then((res) => setGroup(res.data.data));
fetch(`${API_ENDPOINT}/my_pools`) }, [id]);
.then((response) => response.json())
.then((json) => {
if (json) {
setPools(json.data);
}
});
}, []);
return ( return (
<div className="bg-dark" style={{ minHeight: '100vh' }}> <div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
<Typography variant="h1">Group</Typography>
<h1 <h1
className="d-flex justify-content-center p-4" className="d-flex justify-content-center p-4"
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }} style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
@ -100,10 +74,10 @@ const Group = () => {
style={{ backgroundColor: background }} style={{ backgroundColor: background }}
> >
<a href={'/Pool/' + pool.id} className="card-title"> <a href={'/Pool/' + pool.id} className="card-title">
{pool.pool_title} {pool.title}
</a> </a>
<p className="text-left"> <p className="text-left">
Capacity: {pool.participants.length} / {pool.capacity} Capacity: {pool.participant_ids.length} / {pool.capacity}
</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>
@ -116,6 +90,4 @@ const Group = () => {
</div> </div>
</div> </div>
); );
}; }
export default Group;

1
src/components/Nav.tsx
View File

@ -22,6 +22,7 @@ const useStyles = makeStyles({
}); });
const navLinks = [ const navLinks = [
{ title: `Profile`, path: `/profile` }, { title: `Profile`, path: `/profile` },
{ title: `Create Pool`, path: `/create_pool` },
// { title: `Groups`, path: `/groups` }, // { title: `Groups`, path: `/groups` },
// { title: `MyGroups`, path: `/mygroups` }, // { title: `MyGroups`, path: `/mygroups` },
]; ];

168
src/components/Pool.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, useRef } from 'react'; import { useState, useEffect, useCallback, useRef, useContext } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
@ -6,33 +6,38 @@ import Textarea from '@material-ui/core/TextareaAutosize';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Comment from './Comment'; import Comment from './Comment';
import { makeAPIPostCall } from '../api/utils'; import { makeAPIPostCall } from '../api/utils';
import AuthenticationContext from './AuthenticationContext';
export default function Pool({ registered = false }: { registered?: boolean }) { // eslint-disable-next-line
const SAMPLE_POOL = {
id: '123',
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM',
capacity: 2,
participant_ids: [],
comments: [
{
author_id: 'myfatemi04',
id: '1234',
body: "what's the vaccination status of everyone?",
},
],
driver_id: 'None',
create_time: '1234',
update_time: '1234',
group_id: 'tj',
status: 'pending',
direction: 'dropoff',
author_id: 'michael',
type: 'offer',
};
export default function Pool() {
const id = useParams<{ id: string }>().id; const id = useParams<{ id: string }>().id;
const [pool, setPool] = useState<Carpool.Pool>({ const [pool, setPool] = useState<Carpool.Pool>();
id: '123', const { user } = useContext(AuthenticationContext);
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
end_time: '4/10/2021 4:00 PM',
capacity: 2,
participant_ids: [],
comments: [
{
author_id: 'myfatemi04',
id: '1234',
body: "what's the vaccination status of everyone?",
},
],
driver_id: 'None',
create_time: '1234',
update_time: '1234',
group_id: 'tj',
status: 'pending',
direction: 'dropoff',
author_id: 'michael',
type: 'offer',
});
const commentTextareaRef = useRef<HTMLTextAreaElement>(null); const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
const [commentStatus, setCommentStatus] = useState< const [commentStatus, setCommentStatus] = useState<
@ -69,6 +74,20 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
[] []
); );
const onRegister = useCallback(() => {
if (user) {
let userID = user.id;
makeAPIPostCall('/join_pool', { id }).then(() => {
if (pool) {
setPool({
...pool,
participant_ids: [...pool.participant_ids, userID],
});
}
});
}
}, [user]);
useEffect(() => { useEffect(() => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
.then((response) => response.json()) .then((response) => response.json())
@ -81,50 +100,59 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
return ( return (
<Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}> <Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}>
<Typography variant="h2" align="center"> {pool && (
{pool.title} <>
</Typography> <Typography variant="h2" align="center">
<Typography variant="subtitle1"> {pool.title}
<b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity} </Typography>
</Typography> <Typography variant="subtitle1">
<Typography variant="subtitle1"> <b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity}
<b>Start Time</b>: {pool.start_time} </Typography>
</Typography> <Typography variant="subtitle1">
<Typography variant="subtitle1"> <b>Start Time</b>: {pool.start_time}
<b>End Time</b>: {pool.end_time} </Typography>
</Typography> <Typography variant="subtitle1">
<Typography variant="body1">{pool.description}</Typography> <b>End Time</b>: {pool.end_time}
<Button </Typography>
variant="contained" <Typography variant="body1">{pool.description}</Typography>
color="primary" {user && (
style={{ marginTop: '0.5rem' }} <Button
> variant="contained"
{registered ? 'Unregister' : 'Register'} color="primary"
</Button> style={{ marginTop: '0.5rem' }}
<hr /> onClick={onRegister}
<Textarea >
cols={80} {pool.participant_ids.includes(user.id)
ref={commentTextareaRef} ? 'Unregister'
placeholder="Post a comment..." : 'Register'}
disabled={commentStatus === 'pending'} </Button>
style={{ margin: '0.5rem 0rem' }} )}
/> <hr />
<Button <Textarea
variant="contained" cols={80}
onClick={onComment} ref={commentTextareaRef}
style={{ margin: '0.5rem 0rem' }} placeholder="Post a comment..."
disabled={commentStatus === 'pending'} disabled={commentStatus === 'pending'}
> style={{ margin: '0.5rem 0rem' }}
Post Comment />
</Button> <Button
<Typography variant="subtitle1"> variant="contained"
{commentStatus === 'errored' && 'Error posting comment'} onClick={onComment}
</Typography> style={{ margin: '0.5rem 0rem' }}
<div style={{ display: 'flex', flexDirection: 'column' }}> disabled={commentStatus === 'pending'}
{pool.comments.map((comment) => ( >
<Comment comment={comment} key={comment.id} /> Post Comment
))} </Button>
</div> <Typography variant="subtitle1">
{commentStatus === 'errored' && 'Error posting comment'}
</Typography>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{pool.comments.map((comment) => (
<Comment comment={comment} key={comment.id} />
))}
</div>
</>
)}
</Card> </Card>
); );
} }