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

make carpool names clickable

Browse Source
This commit is contained in:
Michael Fatemi 2021-07-12 22:35:24 -04:00
parent fb644c727e
commit cad955a122
1 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Event/EventCarpools.tsx
View File

@ -1,21 +1,12 @@
import CallMergeIcon from '@material-ui/icons/CallMerge'; // import CallMergeIcon from '@material-ui/icons/CallMerge';
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople'; import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
import ScheduleIcon from '@material-ui/icons/Schedule'; // import ScheduleIcon from '@material-ui/icons/Schedule';
import { useState } from 'react'; import { useState } from 'react';
import { lightgrey } from '../colors'; import { lightgrey } from '../colors';
import { ICarpool } from '../types';
import UIButton from '../UI/UIButton'; import UIButton from '../UI/UIButton';
import { IEvent } from './Event'; import { IEvent } from './Event';
export type ICarpool = {
driver: {
id: number;
name: string;
};
startTime: string;
endTime: string;
extraDistance: number;
};
function CarpoolRow({ carpool }: { carpool: ICarpool }) { function CarpoolRow({ carpool }: { carpool: ICarpool }) {
const PADDING = '1rem'; const PADDING = '1rem';
return ( return (
@ -32,20 +23,22 @@ function CarpoolRow({ carpool }: { carpool: ICarpool }) {
marginBottom: '0.5rem', marginBottom: '0.5rem',
}} }}
> >
<div> {/* <div> */}
<span style={{ fontWeight: 600 }}>{carpool.driver.name}</span> <span
style={{ fontWeight: 600, cursor: 'pointer' }}
onClick={() => {
window.location.href = '/carpools/' + carpool.id;
}}
>
{carpool.name}
</span>
<br /> <br />
<br /> <br />
<div style={{ display: 'flex', alignItems: 'center' }}> {/* <div style={{ display: 'flex', alignItems: 'center' }}>
<ScheduleIcon style={{ marginRight: '1rem' }} />
{carpool.startTime} - {carpool.endTime}
</div>
<br />
<div style={{ display: 'flex', alignItems: 'center' }}>
<CallMergeIcon style={{ marginRight: '1rem' }} />{' '} <CallMergeIcon style={{ marginRight: '1rem' }} />{' '}
<b>{carpool.extraDistance} miles</b> <b>{carpool.extraDistance} miles</b>
</div> </div> */}
</div> {/* </div> */}
<EmojiPeopleIcon style={{ fontSize: '2em' }} /> <EmojiPeopleIcon style={{ fontSize: '2em' }} />
</div> </div>
); );
@ -53,22 +46,19 @@ function CarpoolRow({ carpool }: { carpool: ICarpool }) {
const dummyCarpoolData: ICarpool[] = [ const dummyCarpoolData: ICarpool[] = [
{ {
driver: {
id: 0, id: 0,
name: 'Michael Fatemi', name: 'carpoollo2398',
eventId: 0,
event: {
id: 0,
name: 'test event',
latitude: 0,
longitude: 0,
formattedAddress: 'your house',
placeId: 'secret',
}, },
startTime: '10:00', members: [],
endTime: '10:10', invitations: [],
extraDistance: 6.9,
},
{
driver: {
id: 1,
name: 'Joshua Hsueh',
},
startTime: '10:05',
endTime: '10:10',
extraDistance: 420,
}, },
]; ];
@ -85,7 +75,7 @@ export default function Carpools({ event }: { event: IEvent }) {
I'm not available I'm not available
</UIButton> </UIButton>
{carpools.map((carpool) => ( {carpools.map((carpool) => (
<CarpoolRow carpool={carpool} key={carpool.driver.id} /> <CarpoolRow carpool={carpool} key={carpool.id} />
))} ))}
</div> </div>
); );