From 920c6275ce7f3b0e450d9b09b9b1f07c31280f24 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Sat, 22 Feb 2020 17:38:14 +0200
Subject: [PATCH] Fetch event data based on match param

---
 src/models/Event.ts               |  6 +++++
 src/pages/EventPage/EventPage.tsx | 39 ++++++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/models/Event.ts b/src/models/Event.ts
index 29f8b8f..1d3f276 100644
--- a/src/models/Event.ts
+++ b/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[];
diff --git a/src/pages/EventPage/EventPage.tsx b/src/pages/EventPage/EventPage.tsx
index 6bbbf3b..cc602f5 100644
--- a/src/pages/EventPage/EventPage.tsx
+++ b/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>
     );
   }