From 664753577b8fe930e9feb921bf2ed6e6b8ac2e59 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 22:01:50 -0400
Subject: [PATCH] add groups to profile

---
 src/App.tsx                |  2 +-
 src/components/Profile.tsx | 28 +++++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 30bccd2..1308770 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,11 +27,11 @@ function App() {
 					<Route component={Authenticator} path="/auth/:provider/callback" />
 					<Route component={CreatePool} path="/create_pool" />
 					<Route component={CreateGroup} path="/create_group" />
-					<Route component={Groups} path="/groups" />
 					<Route component={MyGroups} path="/mygroups" />
 					<Route component={UpdatePool} path="/update_pool" />
 					<Route component={Group} path="/groups/:id" />
 					<Route component={Pool} path="/pools/:id" />
+					<Route component={Groups} path="/groups" />
 					<Route component={Profile} path="/profile" />
 					<Route component={Home} path="/" />
 				</Switch>
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 54ad93f..b9c7dee 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
 
 const Profile = () => {
 	const { user } = useContext(AuthenticationContext);
-	// const [groups, setGroups] = useState<Carpool.Group[]>([]);
+	const [groups, setGroups] = useState<Carpool.Group[]>([]);
 	const [pools, setPools] = useState<Carpool.Pool[]>([]);
 	const classes = useStyles();
 
@@ -28,6 +28,10 @@ const Profile = () => {
 		makeAPIGetCall('/users/@me/pools').then((res) => {
 			if (res.data.data) setPools(res.data.data);
 		});
+
+		makeAPIGetCall('/users/@me/groups').then((res) => {
+			if (res.data.data) setGroups(res.data.data);
+		});
 	}, []);
 
 	if (!user) {
@@ -47,9 +51,9 @@ const Profile = () => {
 			</h1>
 			<div className="container">
 				<h2>
-					<u>{user.username}'s Pools</u>
+					<u>My Pools (private)</u>
 				</h2>
-				<div className="">
+				<div>
 					{pools.map((pool) => {
 						return (
 							<Card
@@ -93,6 +97,24 @@ const Profile = () => {
 						);
 					})}
 				</div>
+
+				<h2>
+					<u>My Groups (private)</u>
+					<div>
+						{groups.map((group) => {
+							return (
+								<Card
+									key={group._id}
+									style={{ padding: '0.5rem', margin: '0.5rem' }}
+								>
+									<h1>
+										<a href={'/groups/' + group._id}>{group.name}</a>
+									</h1>
+								</Card>
+							);
+						})}
+					</div>
+				</h2>
 			</div>
 		</div>
 	);