Cache cms

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+.cache/*

README.md

@@ -17,6 +17,16 @@
 
 A file `translations.json` is downloaded from the CMS every time you run a command. This allows Typescript to use it's type data for autocompleting and build-time verifying translation keys.
 
+## CMS cache
+
+On the first run, the project fetches data from the CMS. This data is stored in `.cache`, which is used for subsequent fetches. The cache TTL is 1 hour.
+When the `Translation` collection is fetched, a type file is also generated in the cache directory, which holds the type of the translation keys. If the type file does not exist, the translation key type is inferred as `string`. For example
+
+```
+const t = useTranslate();
+const string = t("doesnt:exist"); // does not fail if there is no type file in the cache
+```
+
 ## License
 
 This project contains both code and content. The code of the website is licensed under GPLv3. By content we mean text, image, logos or designs specific to the Satakunta Nation. The content is proprietary. In other words, you can freely use the technical implementation (code, config files) of this website for your purposes, but make your own content.

components/Carousel.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-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 { useTranslate } from "@/hooks/TranslationContext";
 import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows";
 
 type PropType = {

components/ContactTable.tsx

@@ -1,5 +1,4 @@
 import { Contact } from "@/lib/cmsClient";
-import useTranslate from "@/hooks/useTranslate";
 import {
   TableContainer,
   Table,
@@ -12,6 +11,7 @@ import {
 } from "@mui/material";
 import styles from "@/styles/contactTable.module.css";
 import { useMemo, useState } from "react";
+import { useTranslate } from "@/hooks/TranslationContext";
 
 export type ContactTableProps = {
   contactData: Contact[];

components/Sidebar.tsx

@@ -16,8 +16,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import useTranslate from "@/hooks/useTranslate";
 import { NavigationLink } from "@/lib/cmsClient";
+import { useTranslate } from "@/hooks/TranslationContext";
 import close from "../public/close.svg";
 import menu from "../public/menu.svg";
 

hooks/TranslationContext.tsx

@@ -0,0 +1,47 @@
+import { Translation, TranslationKey } from "@/lib/cmsClient";
+import { createContext, useContext } from "react";
+import { Language, useLanguage } from "../lib/LanguageContext";
+
+export const TranslationContext = createContext<Translation[] | null>(null);
+
+type TranslationProviderProps = {
+  translations: Translation[];
+  children: React.ReactNode;
+};
+
+export const TranslationProvider = ({
+  translations,
+  children,
+}: TranslationProviderProps) => (
+  <TranslationContext.Provider value={translations}>
+    {children}
+  </TranslationContext.Provider>
+);
+
+const translate = (
+  translations: Translation[],
+  key: TranslationKey,
+  language: Language,
+): string => {
+  const translation = translations.find((t) => t.key === key);
+
+  if (translation === undefined) {
+    throw new Error(
+      `Could not find translation ${key} (see that it exists in the CMS)`,
+    );
+  }
+
+  return translation[language];
+};
+
+export const useTranslate = () => {
+  const { language } = useLanguage();
+  const translations = useContext(TranslationContext);
+  if (translations === null) {
+    throw new Error(
+      "useTranslate failed, make sure TranslationProvider is set",
+    );
+  }
+  return (key: TranslationKey, languageOverride?: Language) =>
+    translate(translations, key, languageOverride ?? language);
+};