1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
Card,
CardHeader,
CardContent,
CardActions,
Collapse,
IconButton,
Button,
} from '@material-ui/core';
import {
FiberManualRecord as RunningIcon,
Close as FailedIcon,
Done as CompleteIcon,
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';
interface PropTypes {
event: Event;
mutate: () => void;
}
const useStyles = makeStyles(theme => ({
actions: {
display: 'flex',
justifyContent: 'space-between'
},
title: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
'& svg': {
marginLeft: theme.spacing(1)
}
},
running: {
color: theme.palette.warning.main
},
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 {
schedule,
status,
nextRunAt,
lastRunAt,
context: {
name,
participants,
conferenceId,
attendanceId
}
} = event;
const joined = participants.findIndex(x => x === user?.username) >= 0;
const handleJoin = () => {
if (user) {
const { context } = event;
context.participants.push(user.username);
return requests
.patch(`/events/${event._id}`, { context })
.then(() => mutate());
}
};
const handleRemove = () => {
return requests
.delete(`/events/${event._id}`)
.then(() => mutate());
};
const toggleExpand = () => setExpanded(v => !v);
const title = (
<div className={classes.title}>
{name}
{status === 'running' && <RunningIcon className={classes.running}/>}
{status === 'complete' && <CompleteIcon className={classes.complete} />}
{status === 'failed' && <FailedIcon color="error" />}
{status === 'notStarted' && <NotStartedIcon color="disabled" />}
</div>
);
return (
<Card variant="outlined">
<CardHeader title={title} subheader={schedule} />
<CardContent>
{nextRunAt && <div> Next run at: {new Date(nextRunAt).toLocaleTimeString()} </div>}
{lastRunAt && <div> Last run at: {new Date(lastRunAt).toLocaleTimeString()} </div>}
{conferenceId && <div> ConferenceID: {conferenceId} </div>}
{attendanceId && <div> AttendanceID: {attendanceId} </div>}
<div>
Participants ({participants?.length || 0} / 3)
<ul>
{participants?.map(username => (
<li> {username} {username === user?.username && <b>(you)</b>} </li>
))}
</ul>
</div>
</CardContent>
<CardActions className={classes.actions}>
<div>
<Button
onClick={handleRemove}
color="primary"
size="large"
>
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>
);
};
export default EventCard;
|
