feat: add Logs to EventCard

1 files changed, 34 insertions, 15 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index e131b8c..67a89e7 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -1,18 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
   CardHeader,
   CardContent,
   CardActions,
-  Button
+  Collapse,
+  IconButton,
+  Button,
 } from '@material-ui/core';
 import {
   FiberManualRecord as RunningIcon,
   Close as FailedIcon,
   Done as CompleteIcon,
-  Timer as NotStartedIcon
+  Timer as NotStartedIcon,
+  ExpandMore as ExpandIcon
 } from '@material-ui/icons';
+import Logs from './Logs';
 import { Event } from '../../types';
 import requests from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
@@ -41,10 +45,15 @@ const useStyles = makeStyles(theme => ({
   complete: {
     color: theme.palette.success.main
   },
+  logs: {
+    maxHeight: theme.spacing(40),
+    overflowY: 'scroll'
+  }
 }));
 
 
 const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
   const classes = useStyles();
   const { user } = useAuth();
   const {
@@ -79,6 +88,8 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
       .then(() => mutate());
   };
 
+  const toggleExpand = () => setExpanded(v => !v);
+
   const title = (
     <div className={classes.title}>
       {name}
@@ -107,24 +118,32 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
         </div>
       </CardContent>
       <CardActions className={classes.actions}>
-        <Button
-          onClick={handleRemove}
-          color="primary"
-          size="large"
-        >
-          Remove
-        </Button>
-        {!joined && (participants?.length || 0) < 3 && (
+        <div>
           <Button
-            onClick={handleJoin}
-            variant="contained"
+            onClick={handleRemove}
             color="primary"
             size="large"
           >
-            Join
+            Remove
           </Button>
-        )}
+          {!joined && (participants?.length || 0) < 3 && (
+            <Button
+              onClick={handleJoin}
+              variant="contained"
+              color="primary"
+              size="large"
+            >
+              Join
+            </Button>
+          )}
+        </div>
+        <IconButton onClick={toggleExpand}>
+          <ExpandIcon />
+        </IconButton>
         </CardActions>
+        <Collapse in={expanded} className={classes.logs}>
+          <Logs eventId={event._id} />
+        </Collapse>
     </Card>
   );
 };