1 files changed, 11 insertions, 6 deletions
diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index afc13ab..74d8d79 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -9,6 +9,7 @@ import {
 } from '@material-ui/core';
 import { Event } from '../../types';
 import requests from '../../requests';
+import { useAuth } from '../../hooks/useAuth';
 
 interface PropTypes {
   event: Event;
@@ -24,6 +25,7 @@ const useStyles = makeStyles(theme => ({
 
 const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
   const classes = useStyles();
+  const { user } = useAuth();
   const {
     data: {
       name,
@@ -34,12 +36,15 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
     }
   } = event;
 
+  const joined = participants.findIndex(x => x === user?.username) >= 0;
+
   const handleJoin = () => {
-    // TODO: add your username to participants list
-    const update = { data: { participants: [...participants, Math.random()] }}
-    return requests
-      .patch(`/events/${event._id}`, update)
-      .then(() => mutate());
+    if (user) {
+      const update = { data: { participants: [...participants, user.username] }};
+      return requests
+        .patch(`/events/${event._id}`, update)
+        .then(() => mutate());
+    }
   };
 
   const handleRemove = () => {
@@ -71,7 +76,7 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
         >
           Remove
         </Button>
-        {(participants?.length || 0) < 3 && (
+        {!joined && (participants?.length || 0) < 3 && (
           <Button
             onClick={handleJoin}
             variant="contained"