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;