add cmsClient, modify NavBar to use useTranslate

components/Navbar.tsx

@@ -16,7 +16,8 @@ import { useEffect, useState } from "react";
 import close from "../public/close.svg";
 import menu from "../public/menu.svg";
 import sato_logo_nav from "../public/sato_logo_nav.png";
-import { useLanguage } from "@/lib/LocalizationContext";
+import { useLanguage } from "@/lib/LanguageContext";
+import useTranslate from "@/hooks/useTranslate";
 
 type Anchor = "right";
 
@@ -25,6 +26,7 @@ interface NavbarProps {
 }
 
 const Navbar = ({ navData }: NavbarProps) => {
+  const t = useTranslate();
   const [state, setState] = useState({
     right: false,
   });
@@ -33,8 +35,6 @@ const Navbar = ({ navData }: NavbarProps) => {
   const currentRoute = router.pathname;
   const navGeneral = cmsData.data.slice(0, 4);
   const navForMembers = cmsData.data.slice(4);
-  const forMembersLabel = cmsData.data.slice(11, 12)[0];
-  const languagesLabel = cmsData.data.slice(12, 13)[0];
   const { language, setLanguage } = useLanguage();
 
   useEffect(() => {
@@ -112,8 +112,7 @@ const Navbar = ({ navData }: NavbarProps) => {
       </List>
       <br />
       <Divider />
-      {/* @ts-ignore: Dynamic property access */}
-      <ListSubheader>{forMembersLabel[`text_${language}`]}</ListSubheader>
+      <ListSubheader>{t("nav:forMembers")}</ListSubheader>
       <List disablePadding>
         {navForMembers.map((data: any) => (
           <ListItem key={data.id} disablePadding>
@@ -137,8 +136,7 @@ const Navbar = ({ navData }: NavbarProps) => {
 
       <br />
       <Divider />
-      {/* @ts-ignore: Dynamic property access */}
-      <ListSubheader>{languagesLabel[`text_${language}`]}</ListSubheader>
+      <ListSubheader>{t("nav:languages")}</ListSubheader>
       <div>
         <ListItemIcon></ListItemIcon>
         <Button

fetchTranslations.ts

@@ -0,0 +1,34 @@
+import * as dotenv from "dotenv";
+dotenv.config({ path: ".env.local" });
+import { writeFile } from "fs/promises";
+import createClient from "./lib/cmsClient";
+import { readItems } from "@directus/sdk";
+
+export async function fetchTranslations() {
+  const client = createClient();
+  try {
+    const translations = await client.request(readItems("Translation"));
+    // go from [{key: "hello", fi: "Hei", sv: "Hej", en: "Hello"}] to {"hello": {fi: "Hei", sv: "Hej", en: "Hello"}}
+    const mappedTranslations = translations.reduce(
+      (map, translation) => ({
+        ...map,
+        [translation.key]: {
+          fi: translation.fi,
+          en: translation.en,
+          sv: translation.sv,
+        },
+      }),
+      {},
+    );
+
+    await writeFile(
+      "./hooks/translations.json",
+      JSON.stringify(mappedTranslations),
+    );
+    console.log("Downloaded and saved translations");
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+fetchTranslations();

hooks/translations.json

@@ -1,13 +1,19 @@
 {
-  "new_test": { "fi": "moi", "en": "hi", "sv": "hej" },
   "general:nation": {
     "fi": "Satakuntalainen Osakunta",
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
-  "home:welcome": {
-    "fi": "Tervetuloa Satakuntalaisen Osakunnan sivuille",
-    "en": "Welcome to the website of Satakuntalainen Osakunta",
+  "nav:forMembers": {
+    "fi": "Jäsenille",
+    "en": "For Members",
+    "sv": "För Medlemmar"
+  },
+  "nav:home": { "fi": "Etusivu", "en": "Home", "sv": "Framsida" },
+  "nav:languages": { "fi": "Kielet", "en": "Languages", "sv": "Språk" },
+  "nav:nationInfo": {
+    "fi": "Tietoa osakunnasta",
+    "en": "Nation Info",
     "sv": "Samma på svenska"
   }
 }

hooks/useTranslate.ts

@@ -1,10 +1,5 @@
-import { useContext } from "react";
 import translations from "./translations.json";
-import {
-  Language,
-  LanguageContext,
-  useLanguageContext,
-} from "../lib/LanguageContext";
+import { Language, useLanguage } from "../lib/LanguageContext";
 
 type TranslationKey = keyof typeof translations;
 
@@ -23,7 +18,7 @@ const translate =
   };
 
 const useTranslate = () => {
-  const { language } = useLanguageContext();
+  const { language } = useLanguage();
   return translate(language);
 };
 

lib/LanguageContext.tsx

@@ -11,16 +11,6 @@ interface LanguageContextType {
 // Create the context
 export const LanguageContext = createContext<LanguageContextType | null>(null);
 
-export const useLanguageContext = () => {
-  const ctx = useContext(LanguageContext);
-
-  if (ctx === null) {
-    throw new Error("could not find LanguageContext");
-  }
-
-  return ctx;
-};
-
 // Create a provider component
 export const LanguageProvider: React.FC<{ children: ReactNode }> = ({
   children,
@@ -35,4 +25,12 @@ export const LanguageProvider: React.FC<{ children: ReactNode }> = ({
 };
 
 // Custom hook to use the language context
-export const useLanguage = () => useContext(LanguageContext);
+export const useLanguage = () => {
+  const ctx = useContext(LanguageContext);
+
+  if (ctx === null) {
+    throw new Error("could not find LanguageContext");
+  }
+
+  return ctx;
+};

lib/cmsClient.ts

@@ -0,0 +1,31 @@
+import { createDirectus, rest } from "@directus/sdk";
+
+type Schema = {
+  NavigationLink: NavigationLink[];
+  Translation: Translation[];
+};
+
+export type NavigationLink = {
+  labelKey: string;
+  url: string;
+  category: "GENERAL" | "FOR_MEMBERS";
+};
+
+/*
+ * You shouldnt use this type, use the better typed one in useTranslate.tsx instead
+ */
+export type Translation = {
+  key: string;
+  fi: string;
+  en: string;
+  sv: string;
+};
+
+const createClient = () => {
+  if (process.env.DIRECTUS_URL === undefined) {
+    throw Error("Environment variable DIRECTUS_URL not defined");
+  }
+  return createDirectus<Schema>(process.env.DIRECTUS_URL).with(rest());
+};
+
+export default createClient;