react-i18next

Author: igorweber

components/NavPanel.tsx

@@ -6,7 +6,7 @@ export type NavPanelProps = {
   backHref?: string;
   backText?: string;
   nextHref?: string
-  nextText?: string
+  nextText?: string | null
 }
 
 export default function NavPanel(props: NavPanelProps) {

package-lock.json

@@ -15,6 +15,7 @@
     "@navikt/ds-react": "^2.0.6",
     "@navikt/nav-dekoratoren-moduler": "^1.8.1",
     "date-fns": "^2.29.3",
+    "i18next": "^22.4.6",
     "next": "13.0.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package.json

@@ -1,40 +1,68 @@
 import "../../styles/globals.css";
 import "@navikt/ds-css";
 
-import type { AppProps } from "next/app";
-import { onLanguageSelect } from "@navikt/nav-dekoratoren-moduler";
-
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
+import { onLanguageSelect } from "@navikt/nav-dekoratoren-moduler";
+import type { AppProps } from "next/app";
+
+
+// Await init?
 i18n
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    debug: true,
+    debug: false,
     fallbackLng: 'nb',
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },
     resources: {
-      en: {
-        translation: {
-          "menuSend": "Send",
-          "menuHistory": "Previous report cards",
-          "menuAbout": "About",
-          "menuFaq": "FAQ",
-          "title": "New solution"
-        }
-      },
       nb: {
         translation: {
           "menuSend": "Send",
           "menuHistory": "Tidligere meldekort",
           "menuAbout": "Om meldekort",
           "menuFaq": "Ofte stilte spørsmål",
-          "title": "Ny løsning"
+
+          "indexTitle": "Ny løsning",
+          "indexDescription": "Du kan sende inn meldekort for følgende perioder:",
+
+          "historyTitle": "Tidligere meldekort",
+
+          "aboutTitle": "Om meldekort",
+
+          "faqTitle": "Ofte stilte spørsmål",
+
+          "period": "Periode",
+          "date": "Dato",
+          "week": "Uke",
+          "startFillingOut": "Begynn utfylling"
+        }
+      },
+      en: {
+        translation: {
+          "menuSend": "Send",
+          "menuHistory": "Previous report cards",
+          "menuAbout": "About",
+          "menuFaq": "FAQ",
+
+          "indexTitle": "New solution",
+          "indexDescription": "You can submit registration cards for the following periods:",
+
+          "historyTitle": "Previous report cards",
+
+          "aboutTitle": "About report cards",
+
+          "faqTitle": "FAQ",
+
+          "period": "Period",
+          "date": "Date",
+          "week": "Week",
+          "startFillingOut": "Start filling out"
         }
       }
     }

src/pages/_app.tsx

@@ -1,14 +1,17 @@
 import { GuidePanel } from "@navikt/ds-react";
 import Menu from "../../components/Menu";
 import Spacer from "../../components/Spacer";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
 
+  const { t } = useTranslation();
+
   return (
     <main>
       <Menu />
 
-      <h1>Om meldekort</h1>
+      <h1>{t('aboutTitle')}</h1>
 
       <GuidePanel poster>
         Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer

src/pages/about.tsx

@@ -1,14 +1,17 @@
 import { Accordion } from "@navikt/ds-react";
 import Menu from "../../components/Menu";
 import Spacer from "../../components/Spacer";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
 
+  const { t } = useTranslation();
+
   return (
     <main>
       <Menu />
 
-      <h1>Ofte stilte spørsmål</h1>
+      <h1>{t('faqTitle')}</h1>
 
       <Accordion>
         <Accordion.Item>

src/pages/faq.tsx

@@ -2,9 +2,12 @@ import { Table } from "@navikt/ds-react";
 import Menu from "../../components/Menu";
 import Spacer from "../../components/Spacer";
 import { format, getISOWeek } from "date-fns";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
 
+  const { t } = useTranslation();
+
   const data = [
     {
       startDate: new Date(2022, 9, 24, 12, 0),
@@ -20,21 +23,21 @@ export default function Page() {
     <main>
       <Menu />
 
-      <h1>Tidligere meldekort</h1>
+      <h1>{t('historyTitle')}</h1>
 
       <Table zebraStripes>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell scope="col">Periode</Table.HeaderCell>
-            <Table.HeaderCell scope="col">Dato</Table.HeaderCell>
+            <Table.HeaderCell scope="col">{t('period')}</Table.HeaderCell>
+            <Table.HeaderCell scope="col">{t('date')}</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {data.map(({ startDate, endDate }) => {
             return (
               <Table.Row key={startDate.getTime()}>
                 <Table.HeaderCell scope="row">
-                  Uke {getISOWeek(startDate)} - {getISOWeek(endDate)}
+                  {t('week')} {getISOWeek(startDate)} - {getISOWeek(endDate)}
                 </Table.HeaderCell>
                 <Table.DataCell>
                   {format(startDate, "dd.MM.yyyy")} - {format(endDate, "dd.MM.yyyy")}

src/pages/history.tsx

@@ -28,22 +28,22 @@ export default function Page() {
     <main>
       <Menu />
 
-      <h1>{t('title')}</h1>
-      <p>Du kan sende inn meldekort for følgende perioder:</p>
+      <h1>{t('indexTitle')}</h1>
+      <p>{t('indexDescription')}</p>
 
       <Table zebraStripes>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell scope="col">Periode</Table.HeaderCell>
-            <Table.HeaderCell scope="col">Dato</Table.HeaderCell>
+            <Table.HeaderCell scope="col">{t('period')}</Table.HeaderCell>
+            <Table.HeaderCell scope="col">{t('date')}</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {data.map(({ startDate, endDate }) => {
             return (
               <Table.Row key={startDate.getTime()}>
                 <Table.HeaderCell scope="row">
-                  Uke {getISOWeek(startDate)} - {getISOWeek(endDate)}
+                  {t('week')} {getISOWeek(startDate)} - {getISOWeek(endDate)}
                 </Table.HeaderCell>
                 <Table.DataCell>
                   {format(startDate, "dd.MM.yyyy")} - {format(endDate, "dd.MM.yyyy")}
@@ -56,7 +56,7 @@ export default function Page() {
 
       <Spacer />
 
-      <NavPanel nextHref="/form" nextText="Begynn utfylling" />
+      <NavPanel nextHref="/form" nextText={t('startFillingOut')} />
     </main>
   );
 }