web2.0-frontend/src/views/EventPage/EventPageView.tsx

import React from "react";
import styled from "styled-components";
import ReactMarkdown from "react-markdown";
import { colors } from "@theme/colors";
import { Event } from "@models/Event";
import Button from "@components/Button";
import Anchor from "@components/Anchor";
import noop from "@utils/noop";

interface EventPageViewProps {
  event?: Event;
}

const StyledSection = styled.section`
  margin: auto;
  max-width: 1000px;
  align-items: center;

  & > h1 {
    color: ${colors.darkBlue};
  }

  & > div > img {
    height: auto;
    width: 100%;
  }

  & > p {
    color: ${colors.orange1};
  }
`;

const SignupButtons = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
`;

const Content = styled.div`
  margin-top: 24px;

  p {
    color: ${colors.black};
  }

  h1, h3 {
    color: ${colors.orange2};
  }

  a {
    color: ${colors.blue1};

    &:hover {
      color: ${colors.lightBlue};
    }
  }

  table {
    tr {
      vertical-align: top;

      td {
        word-break: break-word;
        padding: 8px;
      }

      td:first-of-type {
        word-break: unset;
        padding-left: 0;
      }
    }
  }
`;

const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
  if (!event) return <div>Loading</div>
  return (
    <StyledSection>
      <h1>
        {event.title_fi}
      </h1>
      <p>
        {event.description_fi}
      </p>
      <div>
        <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
      </div>
      <Content>
        <ReactMarkdown source={event.content_fi} escapeHtml={false} />
      </Content>
      {/* We may have multiple signup forms. Generate own Button for each one */}
      <SignupButtons>
        {event.signupForm.map(sf => (
          <Anchor key={sf.id} to={`/signup/${sf.id}`}>
            <Button type="filled" onClick={noop}>
              {sf.title_fi}
            </Button>
          </Anchor>
        )
        )}
      </SignupButtons>
    </StyledSection>
  );
}
export default EventPageView;