feat: add EventCard

3 files changed, 77 insertions, 2 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
new file mode 100644
index 0000000..88984ff
--- /dev/null
+++ b/src/components/EventCard/EventCard.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { 
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button
+} from '@material-ui/core';
+import { Event } from '../../types';
+
+interface PropTypes {
+  event: Event;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: theme.spacing(1),
+    maxWidth: theme.spacing(60)
+  }
+}));
+
+const EventCard: React.FC<PropTypes> = ({ event }) => {
+  const classes = useStyles();
+  const { data: { 
+    name,
+    date,
+    participants,
+    conferenceId,
+    attendanceId
+  }} = event;
+
+  return (
+    <Card variant="outlined" className={classes.root}>
+      <CardHeader title={name || 'Event'} subheader={date}  />
+      <CardContent>
+        {conferenceId && <div> ConferenceID: {conferenceId} </div>}
+        {attendanceId && <div> AttendanceID: {attendanceId} </div>}
+        <div>
+          Participants ({participants?.length || 0} / 3)
+          <ul>
+            {participants?.map(username => (
+              <li> {username} </li>
+            ))}
+          </ul>
+        </div>
+      </CardContent>
+      {(participants?.length || 0) < 3 && (
+        <CardActions>
+          <Button variant="contained" color="primary" size="large">
+            Join
+          </Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+};
+
+export default EventCard;
diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index 119b2ae..90632d7 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import { ContentSection } from 'react-benzin';
 import { Link } from '@material-ui/core';
+import EventCard from '../../components/EventCard/EventCard';
+import { useEvents } from '../../hooks/APIClient';
 
 const BsuFantomSection: React.FC = () => {
+  const { data: events } = useEvents();
 
   return (
     <ContentSection sectionName="bsu-fantom" level={1}>
-      Schedule your offline <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> conference attendance
+      <p>
+        Schedule your offline <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> conference attendance
+      </p>
+      <ContentSection sectionName="Upcoming events" level={2}>
+        {events?.map(event => <EventCard event={event} />)}
+      </ContentSection>
     </ContentSection>
   );
 };
diff --git a/src/types.ts b/src/types.ts
index dc429a4..d385d2a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,5 +8,13 @@ export interface User extends Base {
   username: string;
 }
 
-export interface Event extends Base {}
+export interface Event extends Base {
+  data: {
+    name: string;
+    participants: string[];
+    date: string;
+    conferenceId: string;
+    attendanceId: string;
+  }
+}