Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Elmo Kankkunen
|
a4a3da7b44 | ||
|
Ojakoo
|
1287a232a9 |
@@ -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<InitialProps> = ({ initialEvents }) => {
|
||||||
|
const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/toiminta/tapahtumat`} />
|
||||||
|
</Head>
|
||||||
|
<PageWrapper>
|
||||||
|
<EventsPageView events={events} />
|
||||||
|
</PageWrapper>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getStaticProps: GetStaticProps<InitialProps> = async () => {
|
||||||
|
const initialEvents = fetcher<Event[]>(eventApi);
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
initialEvents: await initialEvents,
|
||||||
|
},
|
||||||
|
revalidate: 10,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventsPage;
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { NextPage, GetStaticProps } from "next";
|
||||||
|
import Head from "next/head";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import NewsFeedPageView from "@views/NewsFeedPage/NewsFeedPageView";
|
||||||
|
import PageWrapper from "@views/common/PageWrapper";
|
||||||
|
import { fetcher, API, APIPath } from "@api/backend";
|
||||||
|
import Post from "@models/Feed";
|
||||||
|
|
||||||
|
const feedApi: API = {
|
||||||
|
path: APIPath.FEED,
|
||||||
|
queryParams: {
|
||||||
|
limit: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
interface InitialProps {
|
||||||
|
initialPosts: Post[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const NewsFeedPage: NextPage<InitialProps> = ({ initialPosts }) => {
|
||||||
|
const { data: posts } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialPosts });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/toiminta/uutiset`} />
|
||||||
|
</Head>
|
||||||
|
<PageWrapper>
|
||||||
|
<NewsFeedPageView posts={posts} />
|
||||||
|
</PageWrapper>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getStaticProps: GetStaticProps<InitialProps> = async () => {
|
||||||
|
const initialPosts = fetcher<Post[]>(feedApi);
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
initialPosts: await initialPosts,
|
||||||
|
},
|
||||||
|
revalidate: 10,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewsFeedPage;
|
||||||
@@ -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<EventsPageViewProps> = ({ 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 (
|
||||||
|
<CardSection id="#events">
|
||||||
|
{filteredEvents.map((event) => (
|
||||||
|
<Card
|
||||||
|
key={event.id}
|
||||||
|
title={event.title}
|
||||||
|
startTime={new Date(event.start_time).toLocaleString(locale, cardTimeOpts)}
|
||||||
|
text={event.description}
|
||||||
|
link={`/events/${event.id}`}
|
||||||
|
image={{
|
||||||
|
src: event.image || event.tags[0].icon,
|
||||||
|
alt: event.title,
|
||||||
|
}}
|
||||||
|
buttonOnClick={noop}
|
||||||
|
buttonText={buttonText}
|
||||||
|
data-e2e="event-card"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CardSection>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventsPageView;
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardSection,
|
||||||
|
} from "@components/index";
|
||||||
|
|
||||||
|
import Post from "@models/Feed";
|
||||||
|
import noop from "@utils/noop";
|
||||||
|
import { getTranslateFunc } from "../../i18n";
|
||||||
|
|
||||||
|
interface NewsFeedPageViewProps {
|
||||||
|
posts: Post[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const cardTimeOpts: Intl.DateTimeFormatOptions = {
|
||||||
|
day: "numeric",
|
||||||
|
month: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
};
|
||||||
|
|
||||||
|
const NewsFeedPageView: React.FC<NewsFeedPageViewProps> = ({ posts }) => {
|
||||||
|
const isFi = true;
|
||||||
|
const t = getTranslateFunc("fi");
|
||||||
|
|
||||||
|
const buttonText = `${t("Lue lisää")}\xa0›`;
|
||||||
|
|
||||||
|
const locale = isFi ? "fi-FI" : "en-GB";
|
||||||
|
|
||||||
|
const filteredFeed = posts.map((post) => ({
|
||||||
|
...post,
|
||||||
|
title: isFi ? post.title_fi : post.title_en,
|
||||||
|
description: isFi ? post.description_fi : post.description_en,
|
||||||
|
content: isFi ? post.content_fi : post.content_en,
|
||||||
|
publish_time: new Date(post.publish_time).toLocaleString(locale, cardTimeOpts),
|
||||||
|
}));
|
||||||
|
return (
|
||||||
|
<CardSection>
|
||||||
|
{filteredFeed.map((post) => (
|
||||||
|
<Card
|
||||||
|
key={post.id}
|
||||||
|
title={post.title}
|
||||||
|
text={post.description}
|
||||||
|
startTime={post.publish_time}
|
||||||
|
link={`/feed/${post.id}`}
|
||||||
|
buttonOnClick={noop}
|
||||||
|
buttonText={buttonText}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CardSection>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewsFeedPageView;
|
||||||
Reference in New Issue
Block a user