From 4bc7a973658682103313e7e103b330c7dfbfdc40 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Tue, 13 Jul 2021 17:54:45 -0400
Subject: [PATCH] make event group name clickable

---
 src/components/Event/Event.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Event/Event.tsx b/src/components/Event/Event.tsx
index 56c3926..499781f 100644
--- a/src/components/Event/Event.tsx
+++ b/src/components/Event/Event.tsx
@@ -8,6 +8,7 @@ import { green, lightgrey } from '../colors';
 import { useMe } from '../hooks';
 import { IEvent, IEventSignup } from '../types';
 import UIButton from '../UI/UIButton';
+import UILink from '../UI/UILink';
 import UIPlacesAutocomplete from '../UI/UIPlacesAutocomplete';
 import UISecondaryBox from '../UI/UISecondaryBox';
 import UISecondaryHeader from '../UI/UISecondaryHeader';
@@ -16,8 +17,8 @@ import EventCarpools from './EventCarpools';
 import EventDetails from './EventDetails';
 import EventSignups from './EventSignups';
 
-function GroupName({ name }: { name: string }) {
-	return <span style={{ color: '#303030', textAlign: 'center' }}>{name}</span>;
+function GroupName({ group }: { group: IEvent['group'] }) {
+	return <UILink href={`/groups/${group.id}`}>{group.name}</UILink>;
 }
 
 export default function Event({ event }: { event: IEvent }) {
@@ -96,8 +97,10 @@ export default function Event({ event }: { event: IEvent }) {
 
 	return (
 		<UISecondaryBox>
-			<UISecondaryHeader>{name}</UISecondaryHeader>
-			<GroupName name={group.name} />
+			<div style={{ textAlign: 'center' }}>
+				<UISecondaryHeader>{name}</UISecondaryHeader>
+				<GroupName group={group} />
+			</div>
 			<EventDetails {...{ startTime, endTime, formattedAddress }} />
 			<UIButton
 				onClick={toggleInterestedThrottled}