diff --git a/src/pages/toiminta/uutiset.tsx b/src/pages/toiminta/uutiset.tsx new file mode 100644 index 0000000..3cc61c0 --- /dev/null +++ b/src/pages/toiminta/uutiset.tsx @@ -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 = ({ initialPosts }) => { + const { data: posts } = useSWR(feedApi, fetcher, { fallbackData: initialPosts }); + + return ( + <> + + + + + + + + ); +}; + +export const getStaticProps: GetStaticProps = async () => { + const initialPosts = fetcher(feedApi); + return { + props: { + initialPosts: await initialPosts, + }, + revalidate: 10, + }; +}; + +export default NewsFeedPage; diff --git a/src/views/NewsFeedPage/NewsFeedPageView.tsx b/src/views/NewsFeedPage/NewsFeedPageView.tsx new file mode 100644 index 0000000..ff02e62 --- /dev/null +++ b/src/views/NewsFeedPage/NewsFeedPageView.tsx @@ -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 = ({ 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 ( + + {filteredFeed.map((post) => ( + + ))} + + ); +}; + +export default NewsFeedPageView;