Ojakoo
119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import Image from "next/legacy/image";
|
|
import styled from "styled-components";
|
|
import rehypeRaw from "rehype-raw";
|
|
import rehypeSanitize from "rehype-sanitize";
|
|
import colors from "@theme/colors";
|
|
import Event from "@models/Event";
|
|
import {
|
|
Button, Link, TextSection, ChangeLanguageButton,
|
|
} from "@components/index";
|
|
import noop from "@utils/noop";
|
|
import MarkdownStyles from "@views/common/MarkdownStyles";
|
|
import LoadingView from "@views/common/LoadingView";
|
|
import { useTranslation } from "../../i18n";
|
|
|
|
interface EventPageViewProps {
|
|
event?: Event;
|
|
}
|
|
|
|
const StyledTextSection = styled(TextSection)`
|
|
align-items: center;
|
|
|
|
& > h1 {
|
|
color: ${colors.darkBlue};
|
|
|
|
p {
|
|
color: ${colors.orange1};
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
margin: auto;
|
|
|
|
& > p {
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
line-height: 0.4rem;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const SignupButtons = styled.div`
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const Content = styled(MarkdownStyles)`
|
|
margin-top: 1.5rem;
|
|
`;
|
|
|
|
const LngButton = styled(ChangeLanguageButton)`
|
|
align-self: flex-end;
|
|
margin-right: 1rem;
|
|
`;
|
|
|
|
const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
|
|
const { i18n, t } = useTranslation();
|
|
if (!event) return <LoadingView />;
|
|
const isFi = i18n.language === "fi";
|
|
const {
|
|
title, description, content, location, startDate, endDate,
|
|
} = {
|
|
title: isFi ? event.title_fi : event.title_en,
|
|
description: isFi ? event.description_fi : event.description_en,
|
|
content: isFi ? event.content_fi : event.content_en,
|
|
location: isFi ? event.location_fi : event.location_en,
|
|
startDate: new Date(event.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
|
|
endDate: new Date(event.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<LngButton />
|
|
<StyledTextSection>
|
|
<h1>
|
|
{title}
|
|
<p>
|
|
{description}
|
|
</p>
|
|
<Image
|
|
src={event.image || event.tags[0].icon}
|
|
alt={title}
|
|
objectFit="scale-down"
|
|
layout="responsive"
|
|
width={16}
|
|
height={9}
|
|
/>
|
|
</h1>
|
|
<div>
|
|
<Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
|
|
<p>
|
|
{`${t("Paikka")}: ${location}`}
|
|
</p>
|
|
<p>
|
|
<time>{`${t("Alkaa")}: ${startDate}`}</time>
|
|
</p>
|
|
<p>
|
|
<time>{`${t("Päättyy")}: ${endDate}`}</time>
|
|
</p>
|
|
{/* We may have multiple signup forms. Generate own Button for each one */}
|
|
<SignupButtons>
|
|
{event.signupForm
|
|
.sort((a, b) => (isFi ? a.title_fi.localeCompare(b.title_fi) : a.title_en.localeCompare(b.title_en)))
|
|
.map((sf) => (
|
|
<Link key={sf.id} to={`/signup/${sf.id}`}>
|
|
<Button data-e2e="signup-button" buttonStyle="filled" onClick={noop}>
|
|
{isFi ? sf.title_fi : sf.title_en}
|
|
</Button>
|
|
</Link>
|
|
))}
|
|
</SignupButtons>
|
|
</div>
|
|
</StyledTextSection>
|
|
</>
|
|
);
|
|
};
|
|
export default EventPageView;
|