Show events on admin event page

src/pages/AdminEventPage/AdminEventPage.scss

@@ -1,3 +1,22 @@
+@import "../../assets/scss/globals";
+
 .admin-event-page {
   margin: 0 1rem;
+  width: 100%;
+
+  table {
+    border-collapse: collapse;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid $white;
+    padding: 0.5rem;
+
+    a {
+      color: $orange1;
+      text-decoration: underline;
+    }
+  }
 }

src/pages/AdminEventPage/AdminEventPage.tsx

@@ -1,18 +1,86 @@
 import * as React from "react";
 import Helmet from "react-helmet";
-import "./AdminEventPage.scss";
+import { Link } from "react-router-dom";
+import { formatRelative } from "date-fns";
 
-export interface AdminEventPageProps {}
-export interface AdminEventPageState {}
+import "./AdminEventPage.scss";
+import { Event, getEvents } from "../../models/Event";
+import { StaticContext } from "../../server/StaticContext";
+
+
+export interface AdminEventPageProps {
+  staticContext: StaticContext;
+}
+export interface AdminEventPageState {
+  events: Event[];
+}
 
 class AdminEventPage extends React.Component<AdminEventPageProps, AdminEventPageState> {
+  constructor(props: AdminEventPageProps) {
+    super(props);
+    const { staticContext } = props;
+
+    if (staticContext) {
+      /* The static context is an object that manages promises when
+         rendering on the server. If staticContext exists, that means
+         we have to store all promises in it. Otherwise, operate
+         normally. See server/index.ts. */
+      if (staticContext.resolutions.getEvents) {
+        const events = staticContext.resolutions.getEvents as Event[];
+        this.state = {
+          events,
+        };
+      } else {
+        this.state = {
+          events: [],
+        };
+        const promiseEvents = this.fetchEvents();
+        staticContext.promises.getEvents = promiseEvents;
+      }
+    } else {
+      this.state = {
+        events: [],
+      };
+      this.fetchEvents();
+    }
+  }
+
+  fetchEvents = () => {
+    const getEventsPromise = getEvents();
+    getEventsPromise.then(events => {
+      this.setState({
+        events,
+      });
+    });
+    return getEventsPromise;
+  }
+
   render() {
+    const { events } = this.state;
+
     return (
       <div className="admin-event-page">
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/events" />
         </Helmet>
-        Admin Event Page
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Start time</th>
+              <th>End time</th>
+            </tr>
+          </thead>
+          <tbody>
+            {events.map(event => (
+              <tr>
+                <td><Link to={`/admin/events/${event.id}`}>{event.title}</Link></td>
+                <td>{formatRelative(new Date(event.start_time), new Date())}</td>
+                <td>{formatRelative(new Date(event.end_time), new Date())}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     );
   }