News feed page

#49 Events page skeleton
2022-10-12 22:47:54 +03:00 · 2022-10-10 19:52:29 +03:00
4 changed files with 211 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 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;
Author	SHA1	Message	Date
Elmo Kankkunen	a4a3da7b44	News feed page	2022-10-12 22:47:54 +03:00
Ojakoo	1287a232a9	#49 Events page skeleton	2022-10-10 19:52:29 +03:00