translate event page contents

public/locales/en/common.json

@@ -1,6 +1,11 @@
 {
   "Lue lisää": "Read more",
-  "lngButton": "Suomeksi",  "Hakemaasi sivua":
+  "lngButton": "Suomeksi",
+  "Paikka": "Location",
+  "Alkaa": "Starts at",
+  "Päättyy": "Ends at",
+
+  "Hakemaasi sivua":
   "Page",
 
   "ei löydy":

src/components/ChangeLanguageButton.tsx

@@ -1,14 +1,20 @@
 import React from "react";
-import i18nNext, { useTranslation } from "../i18n";
-
-const ChangeLanguageButton: React.FC = () => {
-  const { t } = useTranslation();
-
-  const { i18n } = i18nNext;
+import styled from "styled-components";
+import i18nNext from "../i18n";
+import Icon, { IconType } from "./Icon";
 
+const ChangeLanguageButton: React.FC = (props) => {
+  const { language, changeLanguage } = i18nNext.i18n;
   return (
-    <button type="button" onClick={() => i18n.changeLanguage(i18n.language === "fi" ? "en" : "fi")}>{t("lngButton")}</button>
+    <button {...props} type="button" onClick={() => changeLanguage(language === "fi" ? "en" : "fi")}>
+      <Icon name={language === "fi" ? IconType.GBFlag : IconType.FinlandFlag} />
+    </button>
   );
 };
 
-export default ChangeLanguageButton;
+export default styled(ChangeLanguageButton)`
+  font-size: 4rem;
+  background: none;
+  border: none;
+  width: fit-content;
+`;

src/components/Icon.tsx

@@ -69,10 +69,18 @@ const nameToIcon = (name: IconType): JSX.Element | string => {
     );
   }
   if (name === IconType.FinlandFlag) {
-    return "🇫🇮";
+    return (
+      <span role="img">
+        🇫🇮
+      </span>
+    );
   }
   if (name === IconType.GBFlag) {
-    return "🇬🇧";
+    return (
+      <span role="img">
+        🇬🇧
+      </span>
+    );
   }
   return null;
 };

src/components/index.tsx

@@ -10,3 +10,4 @@ export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion/Accordion";
 export { default as Link } from "./Link";
 export { default as CrossFadeImages } from "./CrossFadeImages";
+export { default as ChangeLanguageButton } from "./ChangeLanguageButton";

src/views/EventPage/EventPageView.tsx

@@ -4,12 +4,11 @@ import styled from "styled-components";
 import colors from "@theme/colors";
 import Event from "@models/Event";
 import Button from "@components/Button";
-import { Link, TextSection } from "@components/index";
+import { Link, TextSection, ChangeLanguageButton } from "@components/index";
 import noop from "@utils/noop";
-
 import MarkdownStyles from "@views/common/MarkdownStyles";
 import LoadingView from "@views/common/LoadingView";
-// import ChangeLanguageButton from "@components/ChangeLanguageButton";
+import i18nNext, { useTranslation } from "../../i18n";
 
 interface EventPageViewProps {
   event?: Event;
@@ -34,7 +33,6 @@ const StyledTextSection = styled(TextSection)`
       line-height: 0.4rem;
     }
   }
-
 `;
 
 const SignupButtons = styled.div`
@@ -47,49 +45,69 @@ const Content = styled(MarkdownStyles)`
   margin-top: 1.5rem;
 `;
 
+const LngButton = styled(ChangeLanguageButton)`
+  align-self: flex-end;
+  margin-right: 1rem;
+`;
+
 const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
+  const { t } = useTranslation();
   if (!event) return <LoadingView />;
-  const date_start = new Date(event.start_time).toLocaleString("fi-FI");
-  const date_end = new Date(event.end_time).toLocaleString("fi-FI");
+  const { language } = i18nNext.i18n;
+  const isFi = language === "fi";
+  const {
+    title, description, content, location, startDate, endDate,
+  } = {
+    title: isFi ? event.title_fi : event.title_en,
+    description: isFi ? event.description_fi : event.description_en,
+    content: isFi ? event.content_fi : event.content_en,
+    location: isFi ? event.location_fi : event.location_en,
+    startDate: new Date(event.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
+    endDate: new Date(event.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
+  };
+
   return (
-    <StyledTextSection>
-      <h1>
-        {event.title_fi}
-        <p>
-          {event.description_fi}
-        </p>
-        <Image
-          src={event.image || event.tags[0].icon}
-          alt={event.title_fi}
-          objectFit="scale-down"
-          layout="responsive"
-          width={16}
-          height={9}
-        />
-      </h1>
-      <div>
-        <Content source={event.content_fi} escapeHtml={false} />
-        <p>
-          Paikka: {event.location_fi}
-        </p>
-        <p>
-          <time>Alkaa: {date_start}</time>
-        </p>
-        <p>
-          <time>Päättyy: {date_end}</time>
-        </p>
-        {/* We may have multiple signup forms. Generate own Button for each one */}
-        <SignupButtons>
-          {event.signupForm.map((sf) => (
-            <Link key={sf.id} to={`/signup/${sf.id}`}>
-              <Button buttonStyle="filled" onClick={noop}>
-                {sf.title_fi}
-              </Button>
-            </Link>
-          ))}
-        </SignupButtons>
-      </div>
-    </StyledTextSection>
+    <>
+      <LngButton />
+      <StyledTextSection>
+        <h1>
+          {title}
+          <p>
+            {description}
+          </p>
+          <Image
+            src={event.image || event.tags[0].icon}
+            alt={title}
+            objectFit="scale-down"
+            layout="responsive"
+            width={16}
+            height={9}
+          />
+        </h1>
+        <div>
+          <Content source={content} escapeHtml={false} />
+          <p>
+            {`${t("Paikka")}: ${location}`}
+          </p>
+          <p>
+            <time>{`${t("Alkaa")}: ${startDate}`}</time>
+          </p>
+          <p>
+            <time>{`${t("Päättyy")}: ${endDate}`}</time>
+          </p>
+          {/* We may have multiple signup forms. Generate own Button for each one */}
+          <SignupButtons>
+            {event.signupForm.map((sf) => (
+              <Link key={sf.id} to={`/signup/${sf.id}`}>
+                <Button buttonStyle="filled" onClick={noop}>
+                  {isFi ? sf.title_fi : sf.title_en}
+                </Button>
+              </Link>
+            ))}
+          </SignupButtons>
+        </div>
+      </StyledTextSection>
+    </>
   );
 };
 export default EventPageView;