Aarni Halinen
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import React, { useState } from "react";
|
||
|
||
import Event from "@models/Event";
|
||
import {
|
||
Button, CardSection, Card, FullWidthSection,
|
||
} from "@components/index";
|
||
import noop from "@utils/noop";
|
||
import { useTranslation } from "../../i18n";
|
||
import FilterContainer from "./FilterContainer";
|
||
|
||
interface EventCalendarProps {
|
||
events: Event[];
|
||
}
|
||
|
||
const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
|
||
// const [filterSelected, setFilter] = useState(0);
|
||
const [numberShown, setNumberShown] = useState(8);
|
||
|
||
const { t, i18n } = useTranslation();
|
||
const isFi = i18n.language === "fi";
|
||
|
||
const options: Intl.DateTimeFormatOptions = {
|
||
day: "numeric",
|
||
month: "numeric",
|
||
year: "numeric",
|
||
hour: "numeric",
|
||
minute: "2-digit",
|
||
};
|
||
|
||
const filteredEvents = events.slice(0, numberShown).map((e) => ({
|
||
...e,
|
||
title: isFi ? e.title_fi : e.title_en,
|
||
description: isFi ? e.description_fi : e.description_en,
|
||
content: isFi ? e.content_fi : e.content_en,
|
||
location: isFi ? e.location_fi : e.location_en,
|
||
startDate: new Date(e.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
|
||
endDate: new Date(e.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
|
||
}));
|
||
|
||
return (
|
||
<FullWidthSection>
|
||
<h1 id="tapahtumat">
|
||
{t("Tapahtumat")}
|
||
{/* <FilterContainer>
|
||
<Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
|
||
Näytä kaikki
|
||
</Button>
|
||
<Button buttonStyle="filter" onClick={() => { setFilter(1); }} selected={filterSelected === 1}>
|
||
Järjestä aihettain ›
|
||
</Button>
|
||
<Button buttonStyle="filter" onClick={() => { setFilter(2); }} selected={filterSelected === 2}>
|
||
Valitse aika ›
|
||
</Button>
|
||
</FilterContainer> */}
|
||
</h1>
|
||
|
||
<CardSection>
|
||
{filteredEvents.map((e) => (
|
||
<Card
|
||
key={e.id}
|
||
title={e.title}
|
||
startTime={e.startDate}
|
||
text={e.description}
|
||
link={`/events/${e.id}`}
|
||
buttonOnClick={noop}
|
||
buttonText={`${t("Lue lisää")} ›`}
|
||
/>
|
||
))}
|
||
</CardSection>
|
||
{ numberShown < events.length && (
|
||
<FilterContainer>
|
||
<Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
|
||
{t("Lataa lisää")}
|
||
</Button>
|
||
</FilterContainer>
|
||
)}
|
||
</FullWidthSection>
|
||
);
|
||
};
|
||
|
||
export default EventCalendar;
|