From 4aa034ebfbd0c84cc282c9b0d8d562610084fcb4 Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Mon, 12 Jul 2021 22:20:45 -0400
Subject: [PATCH] member list

---
 src/components/Carpool/Carpool.tsx    | 42 +++++++++++++++++----------
 src/components/Carpool/MemberList.tsx | 37 +++++++++++++++++++++++
 2 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Carpool/MemberList.tsx

diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx
index 9306db6..6edd744 100644
--- a/src/components/Carpool/Carpool.tsx
+++ b/src/components/Carpool/Carpool.tsx
@@ -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>
 	);
 }
diff --git a/src/components/Carpool/MemberList.tsx b/src/components/Carpool/MemberList.tsx
new file mode 100644
index 0000000..764db4c
--- /dev/null
+++ b/src/components/Carpool/MemberList.tsx
@@ -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>
+	);
+}