Fetch event data based on match param

src/models/Event.ts

@@ -7,8 +7,14 @@ const url = `${process.env.API_URL}/events/`;
 export interface Event {
   id: number;
   title: string;
+  title_fi: string;
+  title_en: string;
   description: string;
+  description_fi: string;
+  description_en: string;
   content: string;
+  content_fi: string;
+  content_en: string;
   start_time: string;
   end_time: string;
   tags: Tag[];

src/pages/EventPage/EventPage.tsx

@@ -1,18 +1,51 @@
 import * as React from "react";
 import Helmet from "react-helmet";
 import "./EventPage.scss";
+import { Event, getEvent } from "../../models/Event";
+import { RouteComponentProps } from "react-router-dom";
+interface MatchParams {
+  id: string;
+}
 
-export interface EventPageProps {}
-export interface EventPageState {}
+export interface EventPageOwnProps {}
+
+export interface EventPageState {
+  event?: Event;
+}
+
+type EventPageProps = EventPageOwnProps & RouteComponentProps<MatchParams>
 
 class EventPage extends React.Component<EventPageProps, EventPageState> {
+  constructor(props: EventPageProps) {
+    super(props);
+    const { id } = this.props.match.params;
+    this.state = {
+      event: null
+    }
+    this.fetchEvent(Number(id));
+  }
+
+
+  fetchEvent(id: number) {
+    const eventPromise = getEvent(id);
+    eventPromise.then(event => {
+      this.setState({
+        event,
+      });
+    });
+    return eventPromise;
+  }
+
   render() {
+    const { event } = this.state;
+    if (!event) return <div>Loading</div>
+
     return (
       <div className="event-page">
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
         </Helmet>
-        Event Page
+        {event.title_fi}
       </div>
     );
   }