feat: join the event by button

2 files changed, 20 insertions, 6 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index 192d0b3..bd09c45 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -7,12 +7,14 @@ import {
   Button
 } from '@material-ui/core';
 import { Event } from '../../types';
+import { patch } from '../../requests';
 
 interface PropTypes {
   event: Event;
+  mutate: () => void;
 }
 
-const EventCard: React.FC<PropTypes> = ({ event }) => {
+const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
   const {
     data: {
       name,
@@ -23,9 +25,15 @@ const EventCard: React.FC<PropTypes> = ({ event }) => {
     }
   } = event;
 
+  const handleJoin = () => {
+    // TODO: add your username to participants list
+    const update = { data: { participants: [...participants, Math.random()] }}
+    return patch(`/events/${event._id}`, update).then(() => mutate());
+  };
+
   return (
     <Card variant="outlined">
-      <CardHeader title={name || 'Event'} subheader={date}  />
+      <CardHeader title={name || `Event #${event._id.slice(-4)}`} subheader={date}  />
       <CardContent>
         {conferenceId && <div> ConferenceID: {conferenceId} </div>}
         {attendanceId && <div> AttendanceID: {attendanceId} </div>}
@@ -40,7 +48,12 @@ const EventCard: React.FC<PropTypes> = ({ event }) => {
       </CardContent>
       {(participants?.length || 0) < 3 && (
         <CardActions>
-          <Button variant="contained" color="primary" size="large">
+          <Button
+            onClick={handleJoin}
+            variant="contained"
+            color="primary"
+            size="large"
+          >
             Join
           </Button>
         </CardActions>
diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index 527c41b..a05d180 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -4,8 +4,9 @@ import { Grid, Link } from '@material-ui/core';
 import EventCard from '../../components/EventCard/EventCard';
 import { useEvents } from '../../hooks/APIClient';
 
+
 const BsuFantomSection: React.FC = () => {
-  const { data: events } = useEvents();
+  const { data: events, mutate } = useEvents();
 
   return (
     <ContentSection sectionName="bsu-fantom" level={1}>
@@ -14,9 +15,9 @@ const BsuFantomSection: React.FC = () => {
       </p>
       <ContentSection sectionName="Upcoming events" level={2}>
         <Grid container spacing={2}>
-          {events?.map(event => (
+          {events?.map((event, index) => (
             <Grid item xs={4}>
-              <EventCard event={event} />
+              <EventCard event={event} mutate={mutate} />
             </Grid>
           ))}
         </Grid>