add Events component

src/components/Feed/Events.tsx

@@ -0,0 +1,71 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Event from "@models/Event";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "src/i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type EventsProps = {
+  events: Event[];
+  lang: Lang
+};
+
+const Events: React.FC<EventsProps> = ({ events, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  const pageLinkText = t("Kaikki tapahtumat");
+  const pageLinkDesc = `${t("löydät tapahtumakalenterista")}\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"
+        />
+      ))}
+      <aside>
+        <PageLink to="/kilta/toiminta#tapahtumat" desc={pageLinkDesc}>
+          {pageLinkText}
+        </PageLink>
+      </aside>
+
+    </CardSection>
+  );
+};
+
+export default Events;

src/i18n/locales/en/common.json

@@ -6,6 +6,8 @@
   "Päättyy": "Ends at",
   "Lataa lisää": "Load more",
   "Tapahtumat": "Events",
+  "Kaikki tapahtumat": "All events",
+  "löydät tapahtumakalenterista": "you can find all events from the event calendar",
   "Uutiset": "News",
 
   "Hakemaasi sivua":

src/pages/index.tsx

@@ -24,8 +24,8 @@ interface InitialProps {
 }
 
 const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useFetchEvents({ fallbackData: initialEvents, options: eventOptions });
-  const feedResult = useFetchFeed({ fallbackData: initialFeed, options: feedOptions });
+  const { data: events } = useFetchEvents({ fallbackData: initialEvents, options: eventOptions });
+  const { data: feed } = useFetchFeed({ fallbackData: initialFeed, options: feedOptions });
 
   return (
     <>
@@ -33,7 +33,7 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/`} />
       </Head>
       <PageWrapper>
-        <FrontPageView events={eventResult.data as Event[]} feed={feedResult.data} />
+        <FrontPageView events={events as Event[]} feed={feed as Post[]} />
       </PageWrapper>
     </>
   );

src/views/FrontPage/FrontPageView.tsx

@@ -9,6 +9,7 @@ import {
   CTASection,
   Link,
 } from "@components/index";
+import Events from "@components/Feed/Events";
 import Event from "@models/Event";
 import Post from "@models/Feed";
 import colors from "@theme/colors";
@@ -81,30 +82,8 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
       SIK100
     </CTASection>
     <main>
-      <CardSection>
-        {events.map((event) => (
-          <Card
-            key={event.id}
-            title={event.title_fi}
-            startTime={new Date(event.start_time).toLocaleString("fi-FI", cardTimeOpts)}
-            text={event.description_fi}
-            link={`/events/${event.id}`}
-            image={{
-              src: event.image || event.tags[0].icon,
-              alt: event.title_fi,
-            }}
-            buttonOnClick={noop}
-            buttonText="Lue lisää&nbsp;›"
-            data-e2e="event-card"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#tapahtumat" desc="löydät tapahtumakalenterista&nbsp;›">
-            Kaikki tapahtumat
-          </PageLink>
-        </aside>
 
-      </CardSection>
+      <Events events={events} lang="fi" />
 
       <CTASection
         bgColor="orange1"

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -11,6 +11,7 @@ import {
   PageLink,
   TextSection,
 } from "@components/index";
+import Events from "@components/Feed/Events";
 import Event from "@models/Event";
 import Post from "@models/Feed";
 import noop from "@utils/noop";
@@ -202,29 +203,8 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
 
       <Divider />
 
-      <CardSection id="events">
-        {events.map((event) => (
-          <Card
-            key={event.id}
-            title={event.title_en}
-            startTime={new Date(event.start_time).toLocaleString("en-GB", cardTimeOpts)}
-            text={event.description_en}
-            link={`/events/${event.id}`}
-            image={{
-              src: event.image || event.tags[0].icon,
-              alt: event.title_en,
-            }}
-            buttonOnClick={noop}
-            buttonText="Read more&nbsp;›"
-            data-e2e="event-card"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#tapahtumat" desc="you can find all events from the event calendar&nbsp;›">
-            All events
-          </PageLink>
-        </aside>
-      </CardSection>
+      <Events events={events} lang="en" />
+
       <CTASection
         bgColor="orange1"
         link="https://sosso.fi"