From 41167efe8c7a4a0a15d1e5783bcc73528a0a2ecc Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Fri, 20 May 2022 00:37:19 +0300
Subject: [PATCH] add Posts component

---
 src/components/Feed/Events.tsx                |  2 +-
 src/components/Feed/Posts.tsx                 | 73 +++++++++++++++++++
 src/i18n/locales/en/common.json               |  6 ++
 src/views/FrontPage/FrontPageView.tsx         | 30 +-------
 src/views/InEnglishPage/InEnglishPageView.tsx | 30 +-------
 5 files changed, 85 insertions(+), 56 deletions(-)
 create mode 100644 src/components/Feed/Posts.tsx

diff --git a/src/components/Feed/Events.tsx b/src/components/Feed/Events.tsx
index 757db9b..4875430 100644
--- a/src/components/Feed/Events.tsx
+++ b/src/components/Feed/Events.tsx
@@ -5,7 +5,7 @@ import {
 } from "@components/index";
 import Event from "@models/Event";
 import noop from "@utils/noop";
-import { Lang, getTranslateFunc } from "src/i18n";
+import { Lang, getTranslateFunc } from "../../i18n";
 
 const cardTimeOpts: Intl.DateTimeFormatOptions = {
   day: "numeric",
diff --git a/src/components/Feed/Posts.tsx b/src/components/Feed/Posts.tsx
new file mode 100644
index 0000000..3a063d0
--- /dev/null
+++ b/src/components/Feed/Posts.tsx
@@ -0,0 +1,73 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Post from "@models/Feed";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "../../i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type PostsProps = {
+  feed: Post[];
+  lang: Lang
+};
+
+const Posts: React.FC<PostsProps> = ({ feed: posts, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  const allNewsText = t("Lue tuoreimmat uutiset");
+  const allNewsDesc = `${t("uutiset")}\xa0›`;
+  const meetingNotesText = t("Hallituksen pöytäkirjat");
+  const meetingNotesDesc = `${t("ja hallitukset kuulumiset")}\xa0›`;
+  const galleryText = t("Kuvia tapahtumista");
+  const galleryDesc = `${t("kuvagalleriassa")}\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}
+        />
+      ))}
+      <aside>
+        <PageLink to="/kilta/toiminta#uutiset" desc={allNewsDesc}>
+          {allNewsText}
+        </PageLink>
+        <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc={meetingNotesDesc}>
+          {meetingNotesText}
+        </PageLink>
+        <PageLink to="https://sik.kuvat.fi" desc={galleryDesc}>
+          {galleryText}
+        </PageLink>
+      </aside>
+    </CardSection>
+  );
+};
+
+export default Posts;
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index a0a9dbc..e263453 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -9,6 +9,12 @@
   "Kaikki tapahtumat": "All events",
   "löydät tapahtumakalenterista": "you can find all events from the event calendar",
   "Uutiset": "News",
+  "uutiset": "news",
+  "Lue tuoreimmat uutiset": "Read news",
+  "Hallituksen pöytäkirjat": "Board meeting records",
+  "ja hallitukset kuulumiset": "and what the board has been up to",
+  "Kuvia tapahtumista": "Photos from events",
+  "kuvagalleriassa": "in the photo gallery",
 
   "Hakemaasi sivua":
   "Page",
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index 40c6d63..1778a65 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -2,20 +2,17 @@ import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
 import {
-  Card,
-  PageLink,
   Divider,
-  CardSection,
   CTASection,
   Link,
 } from "@components/index";
 import Events from "@components/Feed/Events";
+import Posts from "@components/Feed/Posts";
 import Event from "@models/Event";
 import Post from "@models/Feed";
 import colors from "@theme/colors";
 
 import FullWidthSection from "@components/Sections/FullWidthSection";
-import noop from "@utils/noop";
 import FrontPageHero from "./FrontPageHero";
 
 // Corporate logos import
@@ -93,30 +90,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         Sössöä vuodesta 1969.
       </CTASection>
 
-      <CardSection>
-        {feed.map((inst) => (
-          <Card
-            key={inst.id}
-            title={inst.title_fi}
-            startTime={new Date(inst.publish_time).toLocaleString("fi-FI", cardTimeOpts)}
-            text={inst.description_fi}
-            link={`/feed/${inst.id}`}
-            buttonOnClick={noop}
-            buttonText="Lue lisää&nbsp;›"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#uutiset" desc="uutiset&nbsp;›">
-            Lue tuoreimmat uutiset
-          </PageLink>
-          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="ja hallitukset kuulumiset&nbsp;">
-            Hallituksen pöytäkirjat
-          </PageLink>
-          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-            Kuvia tapahtumista
-          </PageLink>
-        </aside>
-      </CardSection>
+      <Posts feed={feed} lang="fi" />
 
       <Divider />
 
diff --git a/src/views/InEnglishPage/InEnglishPageView.tsx b/src/views/InEnglishPage/InEnglishPageView.tsx
index 716c53a..713c064 100644
--- a/src/views/InEnglishPage/InEnglishPageView.tsx
+++ b/src/views/InEnglishPage/InEnglishPageView.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import breakpoints from "@theme/breakpoints";
 import styled from "styled-components";
 import {
-  Card,
-  CardSection,
   CrossFadeImages,
   CTASection,
   Divider,
@@ -12,9 +10,9 @@ import {
   TextSection,
 } from "@components/index";
 import Events from "@components/Feed/Events";
+import Posts from "@components/Feed/Posts";
 import Event from "@models/Event";
 import Post from "@models/Feed";
-import noop from "@utils/noop";
 import InEnglishPageHero from "./InEnglishPageHero";
 
 const Gallery = styled.div`
@@ -212,30 +210,8 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
       >
         Sössö since 1969.
       </CTASection>
-      <CardSection>
-        {feed.map((inst) => (
-          <Card
-            key={inst.id}
-            title={inst.title_en}
-            startTime={new Date(inst.publish_time).toLocaleString("en-GB", cardTimeOpts)}
-            text={inst.description_en}
-            link={`/feed/${inst.id}`}
-            buttonOnClick={noop}
-            buttonText="Read more&nbsp;›"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#uutiset" desc="news&nbsp;›">
-            Read news
-          </PageLink>
-          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="and what the board has been up to&nbsp;">
-            Board meeting records
-          </PageLink>
-          <PageLink to="https://sik.kuvat.fi" desc="in the photo gallery&nbsp;›">
-            Photos from events
-          </PageLink>
-        </aside>
-      </CardSection>
+
+      <Posts feed={feed} lang="en" />
     </main>
   </>
 );