From 267089123f58ba51ec154986de0666d176201668 Mon Sep 17 00:00:00 2001
From: Stephen Swanson <swanson.stephen.h@gmail.com>
Date: Fri, 20 Sep 2024 18:38:16 +0300
Subject: [PATCH] Adds and utilizes translations on homepage

---
 components/Carousel.tsx |  8 ++--
 hooks/translations.json | 87 +++++++++++++++++++++++++++++++++++++++++
 lib/LanguageContext.tsx |  2 +-
 pages/index.tsx         | 68 ++++++++++++--------------------
 4 files changed, 118 insertions(+), 47 deletions(-)

diff --git a/components/Carousel.tsx b/components/Carousel.tsx
index bdd981d..1b7d8bb 100644
--- a/components/Carousel.tsx
+++ b/components/Carousel.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from "react";
-import Link from "next/link";
+import useTranslate from "@/hooks/useTranslate";
 import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
+import Link from "next/link";
+import React, { useEffect } from "react";
 import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows";
 
 type PropType = {
@@ -36,6 +37,7 @@ const setOpacity = (emblaApi: EmblaCarouselType) => {
 
 const Carousel: React.FC<PropType> = ({ slides, options }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const t = useTranslate();
 
   const {
     prevBtnDisabled,
@@ -77,7 +79,7 @@ const Carousel: React.FC<PropType> = ({ slides, options }) => {
         <div className="embla__buttons">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- Placeholder href */}
           <Link href="" className="embla__link">
-            Katso Lisää
+            {t("general:seeMore")}
           </Link>
         </div>
       </div>
diff --git a/hooks/translations.json b/hooks/translations.json
index 59c2256..ba4cf14 100644
--- a/hooks/translations.json
+++ b/hooks/translations.json
@@ -42,6 +42,93 @@
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
+  "general:seeMore": { "fi": "Katso lisää", "en": "See more", "sv": "Se mer" },
+  "homepage:calendarLabelEvents": {
+    "fi": "Tapahtumat",
+    "en": "Events",
+    "sv": "Evenemang"
+  },
+  "homepage:calendarLabelMeeting": {
+    "fi": "Kokoukset",
+    "en": "Meetings",
+    "sv": "Möten"
+  },
+  "homepage:calendarLabelSports": {
+    "fi": "Urheilut",
+    "en": "Sports",
+    "sv": "Sport"
+  },
+  "homepage:contactBoardDescription": {
+    "fi": "Voit ottaa yhteyttä osakunnan hallitukseen sähköpostitse osoitteella hallitus@satakuntatalo.fi tai alla olevalla lomakkeella. Halutessasi tavoittaa tietyn virkailijan, virkailijoiden yhteystiedot löytyvät \"Ota yhteyttä\" sivulta.\t ",
+    "en": "You can contact the board by sending an email to hallitus@satakuntatalo.fi or by filling out the form. If you need to get in touch with a specific official you can find their contact info on the \"Contact us\" page.\t \t \t \t",
+    "sv": "Du kan kontakta styrelsen via e-post på addressen hallitus@satakuntatalo.fi eller via formuläret. Du kan även kontakta specifika funktionärer, vars kontaktuppgifter hittas på \"Ta kontakt\" sidan.\t \t \t \t"
+  },
+  "homepage:contactBoardHeader": {
+    "fi": "Postia hallitukselle",
+    "en": "Contact the board",
+    "sv": "Kontakta styrelsen"
+  },
+  "homepage:contactFormButton": {
+    "fi": "Siiry Lomakkeelle",
+    "en": "Fill out the form",
+    "sv": "Fyll i formuläret"
+  },
+  "homepage:eventsCard": {
+    "fi": "Tapahtumat",
+    "en": "Events",
+    "sv": "Evengemang"
+  },
+  "homepage:harassmentFormDescription": {
+    "fi": "Tällä lomakkeella voit kertoa osakunnalla kokemastasi häirinnästä tai epätasa-arvoisesta kohtelusta. Tiedot käsittelee luottamuksellisesti osakunnan yhdenvertaisuusvastaavana toimiva kuraattori.\t \t \t \t \t",
+    "en": "With this form, you can report any harassment or unequal treatment you have experienced within the student nation. The curator, who serves as the equality officer, will handle the information confidentially.\t \t \t \t \t",
+    "sv": "Med detta formulär kan du anmäla trakasserier eller ojämlik behandling du upplevt inom nationen. Kuratorn, som fungerar som nationens jämställdhetsanvarig, behandlar uppgifterna konfidentiellt.  \t \t \t \t \t"
+  },
+  "homepage:harassmentFormHeader": {
+    "fi": "Härintälomake\t",
+    "en": "Harrassment form\t",
+    "sv": "Trakasserianmälan\t"
+  },
+  "homepage:heroSectionText": {
+    "fi": "Ystävia, tapahtumia ja koti kampissa",
+    "en": "Friends, events and a home in Kamppi",
+    "sv": "Vänner, evengemang och hem i kampen"
+  },
+  "homepage:join": {
+    "fi": "Liity Osakuntaan",
+    "en": "Join the Nation",
+    "sv": "Bli medlem"
+  },
+  "homepage:karhunkierrosHeader": {
+    "fi": "Osakuntalehti Karhunkierros\t",
+    "en": "Nation Magazine: Karhunkierros\t",
+    "sv": "Nations tidning: Karhunkierros\t"
+  },
+  "homepage:livingInfoDescription": {
+    "fi": "Satakuntatalon asuntola sijaitsee loistavalla paikalla aivan Helsingin ydinkeskustan tuntumassa. Eri korkeakoulut ovat hyvien kulkuyhteyksien päässä, ja edulliselle vuokralle saa vastinetta monien etujen muodossa.\t \t \t \t",
+    "en": "The Satakunta House dormitory is located in a great spot in the middle of Helsinki. The Universities are easily accessible with good transport connections, and rent is affordable with many great benefits included.\t \t \t \t",
+    "sv": "Satakunta husets studerandebostäder finns i Helsingfors centrum. Högskolorna är lätta att nå på grund av nära förbindelser till kollektivtrafik. Hyran är förmånlig och inkluderar många bra förmåner.\t \t \t \t"
+  },
+  "homepage:livingInfoHeader": {
+    "fi": "Asuminen Satakuntatalolla",
+    "en": "Live at the Satakunta house",
+    "sv": "Bo på Satakunta huset"
+  },
+  "homepage:memberCard": {
+    "fi": "Liity jäseneksi\t",
+    "en": "Become a member",
+    "sv": "Bli medlem"
+  },
+  "homepage:nationInfoCard": {
+    "fi": "Tietoa osakunnasta",
+    "en": "Nation Info",
+    "sv": "Nations info"
+  },
+  "homepage:newsCard": { "fi": "Uutiset", "en": "News", "sv": "Nyheter" },
+  "homepage:saatioLinkButtonText": {
+    "fi": "Satalinnan säätiö\t",
+    "en": "Satalinna foundation\t",
+    "sv": "Satalinna Stiftelse\t"
+  },
   "nav:archive": { "fi": "Arkisto", "en": "Archive", "sv": "Arkiv" },
   "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
   "nav:contacts": {
diff --git a/lib/LanguageContext.tsx b/lib/LanguageContext.tsx
index 8f386c2..a4ee28c 100644
--- a/lib/LanguageContext.tsx
+++ b/lib/LanguageContext.tsx
@@ -21,7 +21,7 @@ export const LanguageContext = createContext<LanguageContextType | null>(null);
 export const LanguageProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [language, setLanguage] = useState<Language>("en");
+  const [language, setLanguage] = useState<Language>("fi");
   const value = useMemo(
     () => ({ language, setLanguage }),
     [language, setLanguage],
diff --git a/pages/index.tsx b/pages/index.tsx
index 3324f9a..856d935 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,7 @@ import Carousel from "@/components/Carousel";
 import Navbar, { NavbarProps } from "@/components/Navbar";
 import VerticalCard from "@/components/VerticalCard";
 import WeekCalendar from "@/components/WeekCalendar";
+import useTranslate from "@/hooks/useTranslate";
 import createClient from "@/lib/cmsClient";
 import { useLanguage } from "@/lib/LanguageContext";
 import styles from "@/styles/Home.module.css";
@@ -37,21 +38,22 @@ type HomePageProps = {
 };
 
 export default function Home({ navBar }: HomePageProps) {
+  const t = useTranslate();
   const { language } = useLanguage();
   return (
     <>
       <Head>
-        <title>Satakuntalainen Osakunta</title>
+        <title>{t("general:nation")}</title>
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <Navbar links={navBar.links} />
       {/* Hero */}
       <header className={styles.hero}>
-        <h2 className={styles.h2}>Ystäviä, tapahtumia ja koti Kampissa</h2>
+        <h2 className={styles.h2}>{t("homepage:heroSectionText")}</h2>
         <Link href="/nation-info" locale={language} passHref>
           <Button variant="contained" className="button darkBlue">
-            Liity osakuntaan
+            {t("homepage:join")}
           </Button>
         </Link>
       </header>
@@ -61,28 +63,28 @@ export default function Home({ navBar }: HomePageProps) {
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Tietoa osakunnasta"
+            title={t("homepage:nationInfoCard")}
             altText="Placeholder image"
-            href=""
+            href="/nation-info"
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Liity jäseneksi"
+            title={t("homepage:memberCard")}
             altText="Placeholder image"
             href=""
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Tapahtumat"
+            title={t("homepage:eventsCard")}
             altText="Placeholder image"
             href=""
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Uutiset"
+            title={t("homepage:newsCard")}
             altText="Placeholder image"
             href=""
           />
@@ -97,21 +99,11 @@ export default function Home({ navBar }: HomePageProps) {
 
           <article className={styles.livingArticle}>
             <h2 className={styles.livingTitle}>
-              Asuminen
-              <br />
-              satakuntatalolla
+              {t("homepage:livingInfoHeader")}
             </h2>
             <br />
 
-            <p>
-              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet
-              natus dignissimos nobis, soluta repellendus ipsam ducimus omnis
-              quis numquam accusantium, tempora veniam earum provident aut iure
-              assumenda obcaecati nam quas. Lorem ipsum dolor sit amet
-              consectetur adipisicing elit. Error distinctio repudiandae harum
-              est recusandae id nam, debitis minus quod totam? Nostrum suscipit
-              dolor accusamus minima eius libero similique voluptate natus?
-            </p>
+            <p>{t("homepage:livingInfoDescription")}</p>
             <br />
             <br />
             <Link
@@ -122,7 +114,7 @@ export default function Home({ navBar }: HomePageProps) {
               passHref
             >
               <Button variant="contained" className="button lightBlue">
-                Satalinnan säätiö{" "}
+                {t("homepage:saatioLinkButtonText")}
               </Button>
             </Link>
           </article>
@@ -131,26 +123,26 @@ export default function Home({ navBar }: HomePageProps) {
         {/* Calendar */}
         <section className={styles.calendarSection}>
           <span className={styles.sectionContainer}>
-            <h2>Kalenteri</h2>
+            <h2>{t("nav:calendar")}</h2>
             <WeekCalendar />
             <div className={styles.calendarFooter}>
               <ul className={styles.calendarLegend}>
                 <li className={styles.legendItem}>
                   <div className={styles.legendGreen} />
-                  <p>Meetings</p>
+                  <p>{t("homepage:calendarLabelMeeting")}</p>
                 </li>
                 <li className={styles.legendItem}>
                   <div className={styles.legendBlue} />
-                  <p>Events</p>
+                  <p>{t("homepage:calendarLabelEvents")}</p>
                 </li>
                 <li className={styles.legendItem}>
                   <div className={styles.legendOrange} />
-                  <p>Sports</p>
+                  <p>{t("homepage:calendarLabelSports")}</p>
                 </li>
               </ul>
               <Link href="/calendar" locale={language} passHref>
                 <Button variant="contained" className="button darkBlue">
-                  Katso lisää
+                  {t("general:seeMore")}
                 </Button>
               </Link>
             </div>
@@ -159,7 +151,7 @@ export default function Home({ navBar }: HomePageProps) {
         {/* Carousel */}
         <section className={styles.karhunkierros}>
           <span className={styles.carouselContainer}>
-            <h2>Osakuntalehti Karhunkierros</h2>
+            <h2>{t("homepage:karhunkierrosHeader")}</h2>
             <Carousel slides={SLIDES} options={OPTIONS} />
           </span>
         </section>
@@ -167,28 +159,18 @@ export default function Home({ navBar }: HomePageProps) {
         <section className={styles.contact}>
           <div className={styles.contactSectionContainer}>
             <div className={styles.contactInfo}>
-              <h2> Postia hallitukselle</h2>
-              <p>
-                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                Asperiores facere at minus officiis nesciunt? Quos labore
-                dolorem et mollitia quia. Recusandae dolores modi quaerat
-                magnam! Autem distinctio ipsa a alias.
-              </p>
+              <h2>{t("homepage:contactBoardHeader")}</h2>
+              <p>{t("homepage:contactBoardDescription")}</p>
               <Button variant="contained" className="button darkBlue">
-                Siiry lomakkeelle
+                {t("homepage:contactFormButton")}
               </Button>
               <br />
               <br />
-              <h2>Häirintälomake</h2>
-              <p>
-                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                Asperiores facere at minus officiis nesciunt? Quos labore
-                dolorem et mollitia quia. Recusandae dolores modi quaerat
-                magnam! Autem distinctio ipsa a alias.
-              </p>
+              <h2>{t("homepage:harassmentFormHeader")}</h2>
+              <p>{t("homepage:harassmentFormDescription")}</p>
               <Link href="/harassment-form" locale={language} passHref>
                 <Button variant="contained" className="button darkBlue">
-                  Ota yhteyttä
+                  {t("homepage:contactFormButton")}
                 </Button>
               </Link>
             </div>