Use new NavigationLink collection for navbar, allow language override…

components/Navbar.tsx

@@ -4,12 +4,13 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import sato_logo_nav from "../public/sato_logo_nav.png";
 import Sidebar from "./Sidebar";
+import { NavigationLink } from "@/lib/cmsClient";
 
-interface NavbarProps {
-  navData: CMSData;
-}
+export type NavbarProps = {
+  links: NavigationLink[];
+};
 
-const Navbar = ({ navData }: NavbarProps) => {
+const Navbar = ({ links }: NavbarProps) => {
   useEffect(() => {
     // Scroll to hide header
     let prevScrollpos = window.scrollY;
@@ -41,7 +42,7 @@ const Navbar = ({ navData }: NavbarProps) => {
             width={120}
           />
         </Link>
-        <Sidebar navData={navData} />
+        <Sidebar links={links} />
       </nav>
     </div>
   );

components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useLanguage } from "@/lib/LanguageContext";
+import { Language, useLanguage } from "@/lib/LanguageContext";
 import styles from "@/styles/Navbar.module.css";
 import {
   Alert,
@@ -19,14 +19,15 @@ import { useState } from "react";
 import close from "../public/close.svg";
 import menu from "../public/menu.svg";
 import useTranslate from "@/hooks/useTranslate";
+import { NavigationLink } from "@/lib/cmsClient";
 
 type Anchor = "right";
 
-interface NavbarProps {
-  navData: CMSData;
-}
+type NavbarProps = {
+  links: NavigationLink[];
+};
 
-const Sidebar = ({ navData }: NavbarProps) => {
+const Sidebar = ({ links }: NavbarProps) => {
   const t = useTranslate();
   const [state, setState] = useState({
     right: false,
@@ -36,9 +37,8 @@ const Sidebar = ({ navData }: NavbarProps) => {
   const { language, setLanguage } = useLanguage();
   const router = useRouter();
   const currentRoute = router.pathname;
-  const navGeneral = navData.data.slice(0, 4);
-  const navForMembers = navData.data.slice(4, 11);
-  const cmsSnackbarMessage = navData.data.slice(13, 14)[0];
+  const navGeneral = links.filter((link) => link.category === "GENERAL");
+  const navForMembers = links.filter((link) => link.category === "FOR_MEMBERS");
 
   // MUI Drawer toggling
   const toggleDrawer =
@@ -55,10 +55,9 @@ const Sidebar = ({ navData }: NavbarProps) => {
       setState({ ...state, [anchor]: open });
     };
 
-  const handleLanguageChange = (language: any) => {
-    setLanguage(language);
-    // @ts-ignore: Dynamic property access
-    setSnackbarMessage(`${cmsSnackbarMessage[`text_${language}`]}`);
+  const handleLanguageChange = (newLanguage: Language) => {
+    setLanguage(newLanguage);
+    setSnackbarMessage(t("snackbar:languageChanged", newLanguage));
     setSnackbarOpen(true);
   };
 
@@ -87,29 +86,23 @@ const Sidebar = ({ navData }: NavbarProps) => {
       </Button>
 
       <List disablePadding>
-        {navGeneral.map((data: CMSItem) => {
-          const route =
-            data.text_en.toLowerCase() === "home"
-              ? "/"
-              : `/${data.text_en.toLowerCase().replace(" ", "-")}`;
-
+        {navGeneral.map((link) => {
           return (
-            <ListItem key={data.id} disablePadding>
+            <ListItem key={link.url} disablePadding>
               <Link
-                href={route}
+                href={link.url}
                 locale={language}
                 passHref
                 className={styles.nextLink}
               >
                 <ListItemButton
                   className={
-                    route === currentRoute
+                    link.url === currentRoute
                       ? styles.navLinkActive
                       : styles.navLink
                   }
                 >
-                  {/* @ts-ignore: Dynamic property access */}
-                  {data[`text_${language}`]}
+                  {t(link.label_key)}
                 </ListItemButton>
               </Link>
             </ListItem>
@@ -120,22 +113,17 @@ const Sidebar = ({ navData }: NavbarProps) => {
       <Divider />
       <ListSubheader>{t("nav:forMembers")}</ListSubheader>
       <List disablePadding>
-        {navForMembers.map((data: any) => (
-          <ListItem key={data.id} disablePadding>
-            <Link
-              href={`/${data.text_en.toLowerCase().replace(" ", "-")}`}
-              passHref
-              className={styles.nextLink}
-            >
+        {navForMembers.map((link) => (
+          <ListItem key={link.url} disablePadding>
+            <Link href={link.url} passHref className={styles.nextLink}>
               <ListItemButton
                 className={
-                  `/${data.text_en.toLowerCase().replace(" ", "-")}` ===
-                  currentRoute
+                  link.url === currentRoute
                     ? styles.navLinkActive
                     : styles.navLink
                 }
               >
-                {data[`text_${language}`]}
+                {t(link.label_key)}
               </ListItemButton>
             </Link>
           </ListItem>
@@ -170,7 +158,7 @@ const Sidebar = ({ navData }: NavbarProps) => {
         </Button>
         <Button
           onClick={() => handleLanguageChange("en")}
-          onKeyDown={() => handleLanguageChange("en ")}
+          onKeyDown={() => handleLanguageChange("en")}
           className={
             language === "en"
               ? styles.activeLanguageButton

hooks/translations.json

@@ -15,5 +15,15 @@
     "fi": "Tietoa osakunnasta",
     "en": "Nation Info",
     "sv": "Samma på svenska"
+  },
+  "nav:officialDocuments": {
+    "fi": "Viralliset Dokumentit",
+    "en": "Official Documents",
+    "sv": "Officiella Dokument"
+  },
+  "snackbar:languageChanged": {
+    "fi": "Hienoa! Kieli on vaihdettu suomeksi.",
+    "en": "Success! Language set to English.",
+    "sv": "Framgång! Språk inställt på svenska."
   }
 }

hooks/useTranslate.ts

@@ -1,25 +1,24 @@
 import translations from "./translations.json";
 import { Language, useLanguage } from "../lib/LanguageContext";
 
-type TranslationKey = keyof typeof translations;
+export type TranslationKey = keyof typeof translations;
 
-const translate =
-  (language: Language) =>
-  (key: TranslationKey): string => {
-    const translation = translations[key];
+const translate = (key: TranslationKey, language: Language): string => {
+  const translation = translations[key];
 
-    if (translation === undefined) {
-      throw new Error(
-        `Could not find translation ${key} (something is very wrong)`,
-      );
-    }
+  if (translation === undefined) {
+    throw new Error(
+      `Could not find translation ${key} (try running "npm run fetchTranslations")`,
+    );
+  }
 
-    return translation[language];
-  };
+  return translation[language];
+};
 
 const useTranslate = () => {
   const { language } = useLanguage();
-  return translate(language);
+  return (key: TranslationKey, languageOverride?: Language) =>
+    translate(key, languageOverride ?? language);
 };
 
 export default useTranslate;

lib/cmsClient.ts

@@ -1,3 +1,4 @@
+import { TranslationKey } from "@/hooks/useTranslate";
 import { createDirectus, rest } from "@directus/sdk";
 
 type Schema = {
@@ -6,7 +7,7 @@ type Schema = {
 };
 
 export type NavigationLink = {
-  labelKey: string;
+  label_key: TranslationKey;
   url: string;
   category: "GENERAL" | "FOR_MEMBERS";
 };

pages/index.tsx

@@ -1,6 +1,5 @@
 import Carousel from "@/components/Carousel";
-import Navbar from "@/components/Navbar";
-import { fetchNavData } from "@/lib/fetchNavData";
+import Navbar, { NavbarProps } from "@/components/Navbar";
 import styles from "@/styles/Home.module.css";
 import {
   Button,
@@ -20,21 +19,30 @@ import aino from "../public/aino.png";
 import arrowBlue from "../public/arrow_forward_blue.svg";
 import arrowWhite from "../public/arrow_forward_white.svg";
 import cAside from "../public/contact-aside.png";
+import createClient from "@/lib/cmsClient";
+import { readItems } from "@directus/sdk";
 
 const OPTIONS: EmblaOptionsType = { loop: true };
 const SLIDE_COUNT = 10;
 const SLIDES = Array.from(Array(SLIDE_COUNT).keys());
 
-export const getStaticProps: GetStaticProps<NavProps> = async () => {
-  const navData = await fetchNavData();
+export const getStaticProps: GetStaticProps<HomePageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
   return {
     props: {
-      navData,
+      navBar: {
+        links,
+      },
     },
   };
 };
 
-export default function Home({ navData }: NavProps) {
+type HomePageProps = {
+  navBar: NavbarProps;
+};
+
+export default function Home({ navBar }: HomePageProps) {
   return (
     <>
       <Head>
@@ -47,7 +55,7 @@ export default function Home({ navData }: NavProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <main className={styles.main}>
-        <Navbar navData={navData} />
+        <Navbar links={navBar.links} />
         {/* Hero */}
         <section className={styles.hero}>
           <h2 className={styles.h2}>Ystäviä, tapahtumia ja koti Kampissa</h2>

pages/nation-info.tsx

@@ -1,22 +1,30 @@
-import Navbar from "@/components/Navbar";
-import { fetchNavData } from "@/lib/fetchNavData";
+import Navbar, { NavbarProps } from "@/components/Navbar";
 import { GetStaticProps } from "next";
 import styles from "@/styles/nation-info.module.css";
 import Head from "next/head";
 import Image from "next/image";
 import { Button } from "@mui/material";
 import arrowWhite from "../public/arrow_forward_white.svg";
+import createClient from "@/lib/cmsClient";
+import { readItems } from "@directus/sdk";
 
-export const getStaticProps: GetStaticProps<NavProps> = async () => {
-  const navData = await fetchNavData();
+export const getStaticProps: GetStaticProps<NationInfoPageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
   return {
     props: {
-      navData,
+      navBar: {
+        links,
+      },
     },
   };
 };
 
-export default function NationInfo({ navData }: NavProps) {
+type NationInfoPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function NationInfo({ navBar }: NationInfoPageProps) {
   return (
     <>
       <Head>
@@ -29,7 +37,7 @@ export default function NationInfo({ navData }: NavProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <main className={styles.main}>
-        <Navbar navData={navData} />
+        <Navbar links={navBar.links} />
         {/* Image Header */}
         <header className={styles.infoHeader}>
           <div className={styles.headerContainer}>

pages/official-documents.tsx

@@ -1,23 +1,35 @@
-import Navbar from "@/components/Navbar";
-import { fetchNavData } from "@/lib/fetchNavData";
+import Navbar, { NavbarProps } from "@/components/Navbar";
 import { GetStaticProps } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "@/styles/official-documents.module.css";
 import { Button } from "@mui/material";
 import arrowWhite from "../public/arrow_forward_white.svg";
 import Link from "next/link";
+import createClient from "@/lib/cmsClient";
+import { readItems } from "@directus/sdk";
 
-export const getStaticProps: GetStaticProps<NavProps> = async () => {
-  const navData = await fetchNavData();
+export const getStaticProps: GetStaticProps<
+  OfficialDocumentsPageProps
+> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
   return {
     props: {
-      navData,
+      navBar: {
+        links,
+      },
     },
   };
 };
 
-export default function OfficialDocuments({ navData }: NavProps) {
+type OfficialDocumentsPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function OfficialDocuments({
+  navBar,
+}: OfficialDocumentsPageProps) {
   return (
     <>
       <Head>
@@ -30,7 +42,7 @@ export default function OfficialDocuments({ navData }: NavProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <main className={styles.main}>
-        <Navbar navData={navData} />
+        <Navbar links={navBar.links} />
         <header className={styles.header}>
           <div className={styles.headerContainer}>
             <h1>Viralliset Documentit</h1>