From 43f8b2d218030644a33f4b88a12c9ed33dc11593 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Sat, 22 Feb 2020 18:53:25 +0200
Subject: [PATCH] Add Signup buttons on Event page

---
 .eslintrc.json                          |  1 +
 src/components/Card/Card.tsx            |  3 +--
 src/models/Event.ts                     |  3 +++
 src/models/SignupForm.ts                |  1 -
 src/pages/ContactsPage/ContactsPage.tsx |  2 +-
 src/pages/EventPage/EventPage.tsx       | 23 ++++++++++++++++++++++-
 6 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 30d2014..5e257a7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -70,6 +70,7 @@
         "import/no-extraneous-dependencies": "off",
         "import/newline-after-import": "off",
         "import/prefer-default-export": "off",
+        "indent": ["error", 2],
         "jsx-a11y/anchor-is-valid": "off",
         "jsx-a11y/alt-text": "off",
         "jsx-a11y/click-events-have-key-events": "off",
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index d64f578..fa33154 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import Button, { ButtonType } from "../Button/Button";
 import "./Card.scss";
 import Anchor from "../Anchor";
 
@@ -25,7 +24,7 @@ class Card extends React.Component<CardProps, CardState> {
     };
     const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
 
-    const imageElem = !!image ? (
+    const imageElem = image ? (
       <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
     ) : null;
     if (link) {
diff --git a/src/models/Event.ts b/src/models/Event.ts
index 638ef80..30244f8 100644
--- a/src/models/Event.ts
+++ b/src/models/Event.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 import { getAuthHeader } from "../auth";
 import { Tag } from "./Tag";
 import * as qs from "query-string";
+import { SignupForm } from "./SignupForm";
 const url = `${process.env.API_URL}/events/`;
 
 export interface Event {
@@ -17,6 +18,8 @@ export interface Event {
   tags: Tag[];
   tag_id: number[];
   visible: boolean;
+  signup_id: number[];
+  signupForm: SignupForm[];
 }
 
 export async function getEvents(options: any = {}): Promise<Event[]> {
diff --git a/src/models/SignupForm.ts b/src/models/SignupForm.ts
index 681b7ee..7f8eb3b 100644
--- a/src/models/SignupForm.ts
+++ b/src/models/SignupForm.ts
@@ -10,7 +10,6 @@ export interface SignupForm {
   start_time: string;
   end_time: string;
   questions: string;
-  visible: boolean;
 }
 
 export async function getForms(): Promise<SignupForm[]> {
diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx
index e344645..673504e 100644
--- a/src/pages/ContactsPage/ContactsPage.tsx
+++ b/src/pages/ContactsPage/ContactsPage.tsx
@@ -96,7 +96,7 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
                 className={`${getColor(ColorEnum.Blue)} ${getHoverColor(ColorEnum.LightBlue)}`}
                 to="mailto:sik-hallitus@list.ayy.fi">
                 sik-hallitus@list.ayy.fi
-            </Anchor>
+              </Anchor>
             </p>
           </div>
         </PageSection>
diff --git a/src/pages/EventPage/EventPage.tsx b/src/pages/EventPage/EventPage.tsx
index cc602f5..4f97e32 100644
--- a/src/pages/EventPage/EventPage.tsx
+++ b/src/pages/EventPage/EventPage.tsx
@@ -3,6 +3,9 @@ import Helmet from "react-helmet";
 import "./EventPage.scss";
 import { Event, getEvent } from "../../models/Event";
 import { RouteComponentProps } from "react-router-dom";
+import Button, { ButtonType } from "../../components/Button";
+import Anchor from "../../components/Anchor";
+
 interface MatchParams {
   id: string;
 }
@@ -45,7 +48,25 @@ class EventPage extends React.Component<EventPageProps, EventPageState> {
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
         </Helmet>
-        {event.title_fi}
+        <img src={event.tags[0].icon} alt={event.title_fi} ></img>
+        <h1>{event.title_fi}</h1>
+        <p>
+          {event.description_fi}
+        </p>
+        <p>
+          {event.content_fi}
+        </p>
+        {/* We may have multiple signup forms. Generate own Button for each one */}
+        <div>
+          {event.signupForm.map(sf => (
+            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+              <Button type={ButtonType.Filled} onClick={() => {}}>
+                {sf.title}
+              </Button>
+            </Anchor>
+          )
+          )}
+        </div>
       </div>
     );
   }