From 1287a232a98eb1a66554b66e3f96668e1af54ac0 Mon Sep 17 00:00:00 2001 From: Ojakoo Date: Mon, 10 Oct 2022 19:52:29 +0300 Subject: [PATCH] #49 Events page skeleton --- src/pages/toiminta/tapahtumat.tsx | 46 ++++++++++++++++++ src/views/EventsPage/EventsPageView.tsx | 63 +++++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 src/pages/toiminta/tapahtumat.tsx create mode 100644 src/views/EventsPage/EventsPageView.tsx diff --git a/src/pages/toiminta/tapahtumat.tsx b/src/pages/toiminta/tapahtumat.tsx new file mode 100644 index 0000000..0267474 --- /dev/null +++ b/src/pages/toiminta/tapahtumat.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { NextPage, GetStaticProps } from "next"; +import Head from "next/head"; +import useSWR from "swr"; +import EventsPageView from "@views/EventsPage/EventsPageView"; +import PageWrapper from "@views/common/PageWrapper"; +import { fetcher, API, APIPath } from "@api/backend"; +import Event from "@models/Event"; + +const eventApi: API = { + path: APIPath.EVENTS, + queryParams: { + limit: 10, + }, +}; + +interface InitialProps { + initialEvents: Event[]; +} + +const EventsPage: NextPage = ({ initialEvents }) => { + const { data: events } = useSWR(eventApi, fetcher, { fallbackData: initialEvents }); + + return ( + <> + + + + + + + + ); +}; + +export const getStaticProps: GetStaticProps = async () => { + const initialEvents = fetcher(eventApi); + return { + props: { + initialEvents: await initialEvents, + }, + revalidate: 10, + }; +}; + +export default EventsPage; diff --git a/src/views/EventsPage/EventsPageView.tsx b/src/views/EventsPage/EventsPageView.tsx new file mode 100644 index 0000000..0ede632 --- /dev/null +++ b/src/views/EventsPage/EventsPageView.tsx @@ -0,0 +1,63 @@ +import React from "react"; + +import { + Card, + CardSection, +} from "@components/index"; + +import Event from "@models/Event"; +import noop from "@utils/noop"; +import { getTranslateFunc } from "../../i18n"; + +interface EventsPageViewProps { + events: Event[]; +} + +const cardTimeOpts: Intl.DateTimeFormatOptions = { + day: "numeric", + month: "numeric", + year: "numeric", + hour: "numeric", + minute: "2-digit", +}; + +const EventsPageView: React.FC = ({ events }) => { + const isFi = true; + const t = getTranslateFunc("fi"); + + const buttonText = `${t("Lue lisää")}\xa0›`; + + const locale = isFi ? "fi-FI" : "en-GB"; + + const filteredEvents = events.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(locale, cardTimeOpts), + endDate: new Date(e.end_time).toLocaleString(locale, cardTimeOpts), + })); + return ( + + {filteredEvents.map((event) => ( + + ))} + + ); +}; + +export default EventsPageView;