feat: join the event by button

1 files changed, 16 insertions, 3 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>