From 9bcc29ac13e488cfe4034f8b1dddf5d775212ba4 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 15 Jul 2021 13:13:02 -0400
Subject: [PATCH] add group members link

---
 src/components/Group/Group.tsx                |  6 ++++-
 src/components/Group/GroupMembersLink.tsx     | 27 +++++++++++++++++++
 .../GroupSettings.tsx                         |  0
 .../GroupSettingsLink.tsx                     |  0
 src/components/types.ts                       |  4 +++
 5 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Group/GroupMembersLink.tsx
 rename src/components/{GroupSettings => Group}/GroupSettings.tsx (100%)
 rename src/components/{GroupSettings => Group}/GroupSettingsLink.tsx (100%)

diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index f0a0aea..f0ef167 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1,8 +1,9 @@
 import EventCreatorLink from '../EventCreator/EventCreatorLink';
 import EventStream from '../EventStream';
-import GroupSettingsLink from '../GroupSettings/GroupSettingsLink';
+import GroupSettingsLink from './GroupSettingsLink';
 import { IGroup } from '../types';
 import UILink from '../UI/UILink';
+import GroupMembersLink from './GroupMembersLink';
 
 export default function Group({ group }: { group: IGroup }) {
 	return (
@@ -18,10 +19,13 @@ export default function Group({ group }: { group: IGroup }) {
 			<UILink href="/">Home</UILink>
 			<br />
 			<br />
+			<GroupMembersLink group={group} />
+			<br />
 			<GroupSettingsLink group={group} />
 			<br />
 			<EventCreatorLink group={group} />
 			<br />
+
 			{group.events.length > 0 ? (
 				<EventStream events={group.events} />
 			) : (
diff --git a/src/components/Group/GroupMembersLink.tsx b/src/components/Group/GroupMembersLink.tsx
new file mode 100644
index 0000000..4cd2b6e
--- /dev/null
+++ b/src/components/Group/GroupMembersLink.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { IGroup } from '../types';
+import UIPressable from '../UI/UIPressable';
+import UISecondaryBox from '../UI/UISecondaryBox';
+
+export default function GroupMembersLink({ group }: { group: IGroup }) {
+	const [open, setOpen] = useState(false);
+
+	const handleClick = () => setOpen(!open);
+
+	return (
+		<>
+			<UIPressable onClick={handleClick}>Members</UIPressable>
+			{open && (
+				<>
+					<br />
+					<UISecondaryBox>
+						<h1>Members</h1>
+						{group.users.map(({ name }) => (
+							<span key={name}>{name}</span>
+						))}
+					</UISecondaryBox>
+				</>
+			)}
+		</>
+	);
+}
diff --git a/src/components/GroupSettings/GroupSettings.tsx b/src/components/Group/GroupSettings.tsx
similarity index 100%
rename from src/components/GroupSettings/GroupSettings.tsx
rename to src/components/Group/GroupSettings.tsx
diff --git a/src/components/GroupSettings/GroupSettingsLink.tsx b/src/components/Group/GroupSettingsLink.tsx
similarity index 100%
rename from src/components/GroupSettings/GroupSettingsLink.tsx
rename to src/components/Group/GroupSettingsLink.tsx
diff --git a/src/components/types.ts b/src/components/types.ts
index 3bb24cf..afa9c89 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -50,6 +50,10 @@ export type IGroup = {
 	id: number;
 	name: string;
 	events: IEvent[];
+	users: {
+		id: number;
+		name: string;
+	}[];
 };
 
 /**