From 3836f103ff40637e48c04eae9968b008e524294f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 29 Nov 2020 16:26:00 +0300
Subject: feat: add Logs to EventCard

---
 src/components/EventCard/EventCard.tsx | 49 +++++++++++++++++++++++-----------
 src/components/EventCard/Logs.tsx      | 17 ++++++++++++
 src/hooks/APIClient.ts                 |  6 ++++-
 src/types.ts                           |  5 ++++
 4 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 src/components/EventCard/Logs.tsx

(limited to 'src')

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>
   );
 };
diff --git a/src/components/EventCard/Logs.tsx b/src/components/EventCard/Logs.tsx
new file mode 100644
index 0000000..f508c16
--- /dev/null
+++ b/src/components/EventCard/Logs.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Markdown } from 'react-benzin';
+import { useEventLogs } from '../../hooks/APIClient';
+
+interface PropTypes {
+  eventId: string;
+}
+
+
+const Logs: React.FC<PropTypes> = ({ eventId }) => {
+  const { data: logs } = useEventLogs(eventId);
+  const logString = '```\n' + logs?.map(log => log.message).join('\n') + '\n```';
+
+  return <Markdown data={logString} />;
+};
+
+export default Logs;
diff --git a/src/hooks/APIClient.ts b/src/hooks/APIClient.ts
index 015191c..c81b57d 100644
--- a/src/hooks/APIClient.ts
+++ b/src/hooks/APIClient.ts
@@ -1,6 +1,6 @@
 import useSWR, { responseInterface } from 'swr';
 import { get } from '../requests';
-import { User, Event } from '../types';
+import { User, Event, Log } from '../types';
 
 type Response<T> = responseInterface<T, Error>;
 
@@ -17,3 +17,7 @@ export const useEvents = (): Response<Event[]> => {
   return useSWR(`/events`, fetcher);
 };
 
+export const useEventLogs = (eventId: string): Response<Log[]> => {
+  return useSWR(`/logs?eventId=${eventId}`, fetcher);
+};
+
diff --git a/src/types.ts b/src/types.ts
index a239702..941bbbb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,3 +24,8 @@ export interface Event extends Base {
   lastRunAt: string;
 }
 
+export interface Log extends Base {
+  message: string;
+  eventId: string;
+}
+
-- 
cgit v1.2.3