feat: remove event on button click

1 files changed, 29 insertions, 5 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index bd09c45..afc13ab 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
   CardHeader,
@@ -7,14 +8,22 @@ import {
   Button
 } from '@material-ui/core';
 import { Event } from '../../types';
-import { patch } from '../../requests';
+import requests from '../../requests';
 
 interface PropTypes {
   event: Event;
   mutate: () => void;
 }
 
+const useStyles = makeStyles(theme => ({
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
+}));
+
 const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
+  const classes = useStyles();
   const {
     data: {
       name,
@@ -28,7 +37,15 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
   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 requests
+      .patch(`/events/${event._id}`, update)
+      .then(() => mutate());
+  };
+
+  const handleRemove = () => {
+    return requests
+      .delete(`/events/${event._id}`)
+      .then(() => mutate());
   };
 
   return (
@@ -46,8 +63,15 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
           </ul>
         </div>
       </CardContent>
-      {(participants?.length || 0) < 3 && (
-        <CardActions>
+      <CardActions className={classes.actions}>
+        <Button
+          onClick={handleRemove}
+          color="primary"
+          size="large"
+        >
+          Remove
+        </Button>
+        {(participants?.length || 0) < 3 && (
           <Button
             onClick={handleJoin}
             variant="contained"
@@ -56,8 +80,8 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
           >
             Join
           </Button>
+        )}
         </CardActions>
-      )}
     </Card>
   );
 };