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

member list

Browse Source
This commit is contained in:
Joshua Hsueh 2021-07-12 22:20:45 -04:00
parent 0fb3e5ce98
commit 4aa034ebfb
2 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Carpool/Carpool.tsx
View File

@ -2,19 +2,32 @@ import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getCarpool } from '../api';
import { ICarpool } from '../types';
import { IUser } from '../types';
import UISecondaryBox from '../UI/UISecondaryBox';
import MemberList from './MemberList';
function MemberList({ members }: { members: ICarpool['members'] }) {
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
{members.length > 0
? members.map((member) => {
return <div key={member.id}>{member.name}</div>;
})
: 'This carpool has no members.'}
</div>
);
}
const dummyMemberData: IUser[] = [
{
id: 0,
email: 'joshua12696@gmail.com',
name: 'Joshua Hsueh',
},
{
id: 1,
email: 'myfatemi04@gmail.com',
name: 'Michael Fatemi',
},
{
id: 2,
email: 'thegoat@gmail.com',
name: 'Tom Brady',
},
{
id: 3,
email: 'bobbyshmurda@gmail.com',
name: 'Bob the Builder',
},
];
export default function Carpool() {
const id = +useParams<{ id: string }>().id;
@ -26,14 +39,13 @@ export default function Carpool() {
return (
<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
{carpool && (
<MemberList members={dummyMemberData} />
{/* {carpool && (
<>
<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
{carpool.description}
<h3>Members</h3>
<MemberList members={carpool.members} />
</>
)}
)} */}
</UISecondaryBox>
);
}

37
src/components/Carpool/MemberList.tsx Normal file
View File

@ -0,0 +1,37 @@
import { IUser } from '../types';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
export default function MemberList({ members }: { members: IUser[] }) {
return (
<div className="MemberList">
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBlockEnd: '0' }}>Members</h3>
{members.length > 0 ? (
<div>
{members.map((member, index) => {
return index < 2 ? (
<div
className="member"
style={{ display: 'flex', justifyContent: 'space-around' }}
>
{}
<AccountCircleIcon />
<div key={member.id}>{member.name}</div>
</div>
) : (
''
);
})}
{members.length > 2
? members.length - 2 == 1
? members.length - 2 + ' other...'
: members.length - 2 + ' others...'
: ''}{' '}
</div>
) : (
'This carpool has no members.'
)}
</div>
</div>
);
}