News feed page

2022-10-12 22:47:54 +03:00
parent 1287a232a9
commit a4a3da7b44
2 changed files with 102 additions and 0 deletions
@@ -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,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;