From 9bec3f1e0a9ba83a208dca2b3ac8938f66d1e3ba Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Thu, 1 Apr 2021 18:05:57 +0300
Subject: [PATCH] translate calendars

---
 public/locales/en/common.json                 |  3 ++
 src/components/Card.tsx                       | 44 ++++++-------------
 src/views/ActualPage/ActualPageView.tsx       | 10 +++--
 src/views/ActualPage/EventCalendar.tsx        | 36 ++++++++++++---
 src/views/ActualPage/News.tsx                 | 33 +++++++++++---
 src/views/FrontPage/FrontPageView.tsx         | 14 +++++-
 src/views/InEnglishPage/InEnglishPageView.tsx | 14 +++++-
 7 files changed, 105 insertions(+), 49 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 9b88322..911b94a 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -4,6 +4,9 @@
   "Paikka": "Location",
   "Alkaa": "Starts at",
   "Päättyy": "Ends at",
+  "Lataa lisää": "Load more",
+  "Tapahtumat": "Events",
+  "Uutiset": "News",
 
   "Hakemaasi sivua":
   "Page",
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 0187a5e..3b2c6ad 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -4,11 +4,10 @@ import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
 import breakpoints from "@theme/breakpoints";
-import { useTranslation } from "../i18n";
 
 interface WrappedCardProps {
   title: string;
-  start_time: string;
+  startTime: string;
   text: string;
   link: string;
   image?: {
@@ -16,6 +15,7 @@ interface WrappedCardProps {
     alt: string;
   };
   buttonOnClick?: () => void;
+  buttonText?: string;
 }
 
 const StyledCard = styled.article`
@@ -70,37 +70,21 @@ const StyledCard = styled.article`
 `;
 
 const WrappedCard: React.FC<WrappedCardProps> = ({
-  title, text, link, image, start_time, buttonOnClick, ...props
-}) => {
-  const { t } = useTranslation();
-  const options: Intl.DateTimeFormatOptions = {
-    day: "numeric",
-    month: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-  };
-  const datetime = new Date(start_time).toLocaleString("fi-FI", options);
-
-  const button = (
+  title, text, link, image, startTime, buttonOnClick, buttonText, ...props
+}) => (
+  <StyledCard {...props}>
+    {image && (
+    <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
+    )}
+    <p>{startTime}</p>
+    <h3>{title}</h3>
+    <p>{text}</p>
     <Link to={link}>
       <button type="button" onClick={buttonOnClick}>
-        {t("Lue lisää")}&nbsp;›
+        {buttonText}
       </button>
     </Link>
-  );
-
-  return (
-    <StyledCard {...props}>
-      {image && (
-        <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
-      )}
-      <p>{datetime}</p>
-      <h3>{title}</h3>
-      <p>{text}</p>
-      {button}
-    </StyledCard>
-  );
-};
+  </StyledCard>
+);
 
 export default WrappedCard;
diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx
index b689c61..ca99f99 100644
--- a/src/views/ActualPage/ActualPageView.tsx
+++ b/src/views/ActualPage/ActualPageView.tsx
@@ -5,7 +5,7 @@ import Event from "@models/Event";
 import Post from "@models/Feed";
 
 import {
-  Divider, CTASection, TextSection, Link, CrossFadeImages,
+  Divider, CTASection, TextSection, Link, CrossFadeImages, ChangeLanguageButton,
 } from "@components/index";
 import ActualPageHero from "./ActualPageHero";
 import EventCalendar from "./EventCalendar";
@@ -32,14 +32,18 @@ const Gallery = styled.div`
   }
 `;
 
+const LngButton = styled(ChangeLanguageButton)`
+  align-self: flex-end;
+  margin-right: 1rem;
+`;
+
 const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
   <>
     <ActualPageHero />
 
+    <LngButton />
     <EventCalendar events={events} />
-
     <Divider />
-
     <News feed={feed} />
 
     <CTASection
diff --git a/src/views/ActualPage/EventCalendar.tsx b/src/views/ActualPage/EventCalendar.tsx
index 8c0b7d7..de1fd87 100644
--- a/src/views/ActualPage/EventCalendar.tsx
+++ b/src/views/ActualPage/EventCalendar.tsx
@@ -5,6 +5,7 @@ import Button from "@components/Button";
 import { CardSection, Card, FullWidthSection } from "@components/index";
 import noop from "@utils/noop";
 import FilterContainer from "./FilterContainer";
+import i18nNext, { useTranslation } from "../../i18n";
 
 interface EventCalendarProps {
   events: Event[];
@@ -13,11 +14,33 @@ interface EventCalendarProps {
 const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
   // const [filterSelected, setFilter] = useState(0);
   const [numberShown, setNumberShown] = useState(8);
-  const filteredEvents = events.slice(0, numberShown);
+
+  const { t } = useTranslation();
+  const { language } = i18nNext.i18n;
+  const isFi = language === "fi";
+
+  const options: Intl.DateTimeFormatOptions = {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  };
+
+  const filteredEvents = events.slice(0, numberShown).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(isFi ? "fi-FI" : "en-GB", options),
+    endDate: new Date(e.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
+  }));
+
   return (
     <FullWidthSection>
       <h1 id="tapahtumat">
-        Tapahtumat
+        {t("Tapahtumat")}
         {/* <FilterContainer>
           <Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
             Näytä kaikki
@@ -35,18 +58,19 @@ const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
         {filteredEvents.map((e) => (
           <Card
             key={e.id}
-            title={e.title_fi}
-            start_time={e.start_time}
-            text={e.description_fi}
+            title={e.title}
+            startTime={e.startDate}
+            text={e.description}
             link={`/events/${e.id}`}
             buttonOnClick={noop}
+            buttonText={`${t("Lue lisää")} ›`}
           />
         ))}
       </CardSection>
       { numberShown < events.length && (
         <FilterContainer>
           <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
-            Lataa lisää
+            {t("Lataa lisää")}
           </Button>
         </FilterContainer>
       )}
diff --git a/src/views/ActualPage/News.tsx b/src/views/ActualPage/News.tsx
index ea7f6f6..628bd77 100644
--- a/src/views/ActualPage/News.tsx
+++ b/src/views/ActualPage/News.tsx
@@ -5,6 +5,7 @@ import Button from "@components/Button";
 import { CardSection, Card, FullWidthSection } from "@components/index";
 import noop from "@utils/noop";
 import FilterContainer from "./FilterContainer";
+import i18nNext, { useTranslation } from "../../i18n";
 
 interface NewsProps {
   feed: Post[];
@@ -13,11 +14,30 @@ interface NewsProps {
 const News: React.FC<NewsProps> = ({ feed }) => {
   // const [filterSelected, setFilter] = useState(0);
   const [numberShown, setNumberShown] = useState(8);
-  const filteredFeed = feed.slice(0, numberShown);
+
+  const { t } = useTranslation();
+  const { language } = i18nNext.i18n;
+  const isFi = language === "fi";
+
+  const options: Intl.DateTimeFormatOptions = {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  };
+
+  const filteredFeed = feed.slice(0, numberShown).map((p) => ({
+    ...p,
+    title: isFi ? p.title_fi : p.title_en,
+    description: isFi ? p.description_fi : p.description_en,
+    content: isFi ? p.content_fi : p.content_en,
+    publishTime: new Date(p.publish_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
+  }));
   return (
     <FullWidthSection>
       <h1 id="uutiset">
-        Uutiset
+        {t("Uutiset")}
         {/* <FilterContainer>
           <Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
             Näytä kaikki
@@ -34,18 +54,19 @@ const News: React.FC<NewsProps> = ({ feed }) => {
         {filteredFeed.map((post) => (
           <Card
             key={post.id}
-            title={post.title_fi}
-            start_time={post.publish_time}
-            text={post.description_fi}
+            title={post.title}
+            startTime={post.publishTime}
+            text={post.description}
             link={`/feed/${post.id}`}
             buttonOnClick={noop}
+            buttonText={t("Lue lisää ›")}
           />
         ))}
       </CardSection>
       { numberShown < feed.length && (
         <FilterContainer>
           <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
-            Lataa lisää
+            {t("Lataa lisää")}
           </Button>
         </FilterContainer>
       )}
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index 400e968..f3a893b 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -32,6 +32,14 @@ interface FrontPageViewProps {
   feed: Post[];
 }
 
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
 const SponsorReel = styled.div`
   text-align: center;
   & > div {
@@ -72,7 +80,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
           <Card
             key={event.id}
             title={event.title_fi}
-            start_time={event.start_time}
+            startTime={new Date(event.start_time).toLocaleString("fi-FI", cardTimeOpts)}
             text={event.description_fi}
             link={`/events/${event.id}`}
             image={{
@@ -80,6 +88,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
               alt: event.title_fi,
             }}
             buttonOnClick={noop}
+            buttonText="Lue lisää&nbsp;›"
             data-e2e="event-card"
           />
         ))}
@@ -104,10 +113,11 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
           <Card
             key={inst.id}
             title={inst.title_fi}
-            start_time={inst.publish_time}
+            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>
diff --git a/src/views/InEnglishPage/InEnglishPageView.tsx b/src/views/InEnglishPage/InEnglishPageView.tsx
index fcf2e75..dcf7950 100644
--- a/src/views/InEnglishPage/InEnglishPageView.tsx
+++ b/src/views/InEnglishPage/InEnglishPageView.tsx
@@ -37,6 +37,14 @@ interface InEnglishPageViewProps {
   feed: Post[];
 }
 
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
 const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) => (
   <>
     <InEnglishPageHero />
@@ -198,7 +206,7 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
           <Card
             key={event.id}
             title={event.title_en}
-            start_time={event.start_time}
+            startTime={new Date(event.start_time).toLocaleString("en-GB", cardTimeOpts)}
             text={event.description_en}
             link={`/events/${event.id}`}
             image={{
@@ -206,6 +214,7 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
               alt: event.title_en,
             }}
             buttonOnClick={noop}
+            buttonText="Read more&nbsp;›"
             data-e2e="event-card"
           />
         ))}
@@ -227,10 +236,11 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
           <Card
             key={inst.id}
             title={inst.title_en}
-            start_time={inst.publish_time}
+            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>