Fix header bar in events page

apps/blifrivillig/components/TranslatedField.js

@@ -1,35 +1,40 @@
-import React, {useContext} from 'react'
-import { gql } from '@apollo/client';
+import React, { useContext } from "react";
+import { gql } from "@apollo/client";
 
 const TranslationContext = React.createContext([]);
 
 const getTranslationsData = async (client, lang) => {
-    const { data } = await client.query({
-        variables: {lang},
-        query: gql`
-            query TranslationQuery($lang: String) {
-                texts {
-                    text_id
-                    translations(filter: {languages_code: {url_code: {_eq: $lang}}}) {
-                        text
-                    }
-                }
-            }
-        `
-      });
-
-    return data.texts.reduce((acc, it) => {
-        acc[it.text_id] = it.translations[0].text
-        return acc
-    }, {})
-}
+  const { data } = await client.query({
+    variables: { lang },
+    query: gql`
+      query TranslationQuery($lang: String) {
+        texts {
+          text_id
+          translations(
+            filter: { languages_code: { url_code: { _eq: $lang } } }
+          ) {
+            text
+          }
+        }
+      }
+    `,
+  });
 
-const TranslatedField = ({tKey}) => {
-    const translations = useContext(TranslationContext);
-    const item = translations[tKey];
-    if(!item) throw "Missing translation with key " + tKey;
-    return item;
-}
+  return data.texts.reduce((acc, it) => {
+    acc[it.text_id] = it.translations[0].text;
+    return acc;
+  }, {});
+};
+
+const TranslatedField = ({ tKey }) => {
+  const translations = useContext(TranslationContext);
+  const item = translations[tKey];
+
+  if (!item) {
+    console.error("Missing translation for key " + tKey);
+  }
+  return item;
+};
 
 export default TranslatedField;
-export { getTranslationsData, TranslationContext };
+export { getTranslationsData, TranslationContext };

apps/kvarteret/pages/events/index.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
 import { BlurImage } from "dak-components";
-import TranslatedField from "dak-components/lib/components/TranslatedField";
+import TranslatedField, {
+  getTranslationsData,
+} from "dak-components/lib/components/TranslatedField";
+import fetchLayoutData from "dak-components/lib/cms/layout";
+import { GetStaticProps } from "next";
 
 type Event = {
   slug: string;
@@ -209,4 +213,18 @@ const EventSearch = () => {
   );
 };
 
+/**
+ * Need to have getStaticProps in each page to fetch translations and layout data
+ */
+export const getStaticProps: GetStaticProps<any> = async (context) => {
+  const layout = await fetchLayoutData(context.locale);
+
+  return {
+    props: {
+      translations: await getTranslationsData(context.locale, []),
+      layout: layout,
+    },
+  };
+};
+
 export default EventSearch;

packages/dak-components/lib/components/TranslatedField.js

@@ -46,11 +46,13 @@ const useTranslation = (key) => {
         key +
         " useContext(TranslationContext) is undefined"
     );
-    return key; // default to render key if translations are not loaded
+    return key ?? null; // default to render key if translations are not loaded
   }
   const item = translations[key];
-  if (!item) throw "Missing translation with key " + key;
-  return item;
+  if (!item) {
+    console.error("Missing translation for key " + key);
+  }
+  return item ?? null;
 };
 
 const TranslatedField = ({ tKey }) => {