Merge pull request #33 from JosephGasiorekUSDS/jgasiorek-ffs-913

FFS-913: Upgrade i18n infra

app/I18nTesting.js

@@ -0,0 +1,31 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import fs from 'fs/promises'
+
+async function getRes() {
+  const data = await fs.readFile('./app/i18n/locales/en/translation.json')
+  return JSON.parse(data)
+}
+
+const res = await getRes()
+console.log(res)
+
+await i18n
+  .use(initReactI18next)
+  .init({
+    lng: 'en',
+    fallbackLng: 'en',
+    debug: true,
+    interpolation: {
+      escapeValue: false,
+    },
+    react: {
+      useSuspense: false,
+      wait: true
+    },
+    ns: ['translationsNS'],
+    defaultNS: 'translationsNS',
+    resources: { en: { translationsNS: res }}
+  });
+
+export default i18n

app/TestWrapper.tsx

@@ -0,0 +1,21 @@
+import { I18nextProvider } from "react-i18next";
+import { Provider } from "react-redux";
+import i18nTesting from '@/app/I18nTesting'
+import { EnhancedStore } from '@reduxjs/toolkit'
+import { makeStore } from "@/lib/store";
+
+interface Props {
+    store?: EnhancedStore
+    children: React.ReactNode
+}
+
+export default function TestWrapper({ children, store }: Props) {
+    store = store || makeStore()
+    return (
+        <Provider store={store}>
+            <I18nextProvider i18n={i18nTesting}>
+                {children}
+            </I18nextProvider>
+        </Provider>
+    )
+}

app/benefits/page.tsx

@@ -2,15 +2,15 @@
 import "@trussworks/react-uswds/lib/uswds.css"
 import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, Form, FormGroup, Grid, GridContainer, Checkbox, Alert } from '@trussworks/react-uswds' 
-import { useTranslation } from '@/app/i18n/client'
+import { useTranslation } from 'react-i18next'
 import { useAppDispatch, useAppSelector } from "@/lib/hooks"
 import { useRouter } from "next/navigation"
 import { SubmitHandler, useForm, Controller } from "react-hook-form"
 import { selectBenefits, setBenefits } from "@/lib/features/benefits/benefitsSlice"
 import { useState } from "react"
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const dispatch = useAppDispatch()
     const router = useRouter()
     const benefits = useAppSelector(state => selectBenefits(state))

app/components/ExpenseList.tsx

@@ -1,5 +1,5 @@
 import { Card, CardBody, CardGroup, CardHeader, GridContainer } from "@trussworks/react-uswds";
-import { useTranslation } from "@/app/i18n/client";
+import { useTranslation } from "react-i18next";
 import { useAppSelector } from "@/lib/hooks";
 import { ExpenseItem, selectExpenseItems, selectExpenseTotal } from "@/lib/features/ledger/expenses/expensesSlice";
 import ExpenseListItem from "./ExpenseListItem";
@@ -9,7 +9,7 @@ interface ExpenseListProps {
 }
 
 export default function ExpenseList({header}: ExpenseListProps) {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const items = useAppSelector(state => selectExpenseItems(state))
     const expenseTotal = useAppSelector(state => selectExpenseTotal(state))
 

app/components/ExpenseListItem.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "@/app/i18n/client"
+import { useTranslation } from "react-i18next"
 import { ExpenseItem, removeExpense } from "@/lib/features/ledger/expenses/expensesSlice"
 import { useAppDispatch } from "@/lib/hooks"
 import { Grid, ModalToggleButton, Modal, ModalHeading, ModalFooter, ButtonGroup } from "@trussworks/react-uswds"
@@ -11,7 +11,7 @@ interface ItemProps {
 }
 export default function ExpenseListItem({ item, index }: ItemProps) {
     const ref = useRef(null)
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const dispatch = useAppDispatch()
 
     function onDeleteClicked() {

app/components/I18nComponent.tsx

@@ -0,0 +1,6 @@
+'use client'
+import '@/app/i18n'
+
+export default function I18nComponent() {
+    return (<></>)
+}

app/components/IncomeList.tsx

@@ -4,15 +4,15 @@ import { IncomeItem, selectIncomeItems, selectIncomeTotal } from "@/lib/features
 import { useAppSelector } from "@/lib/hooks"
 import IncomeListItem from "./IncomeListItem"
 import { Card, CardBody, CardGroup, CardHeader, GridContainer } from "@trussworks/react-uswds"
-import { useTranslation } from "@/app/i18n/client"
+import { useTranslation } from "react-i18next"
 
 interface Props {
     dayCount: number
     header: string
 }
 
 export default function IncomeList({dayCount, header}: Props) {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const items = useAppSelector(state => selectIncomeItems(state))
     const incomeTotal = useAppSelector(state => selectIncomeTotal(state))
     const incomeItemElements = items.map((item: IncomeItem, idx: number) => {

app/components/IncomeListItem.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "@/app/i18n/client"
+import { useTranslation } from "react-i18next"
 import { IncomeItem, removeIncome } from "@/lib/features/ledger/income/incomeSlice"
 import { useAppDispatch } from "@/lib/hooks"
 import { Grid, ModalToggleButton, Modal, ModalHeading, ModalFooter, ButtonGroup } from "@trussworks/react-uswds"
@@ -9,7 +9,7 @@ interface ItemProps {
 }
 export default function IncomeListItem({ item, index }: ItemProps) {
     const ref = useRef(null)
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const dispatch = useAppDispatch()
 
     function onDeleteClicked() {

app/components/RequiredFieldDescription.tsx

@@ -1,9 +1,9 @@
-import { useTranslation } from '@/app/i18n/client'
+import { useTranslation } from 'react-i18next'
 import { RequiredMarker } from "@trussworks/react-uswds"
 import { Trans } from 'react-i18next'
 
 export default function RequiredFieldDescription() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     return (
         <div className="margin-top-1">
             <Trans i18nKey="required_field_description" t={t} components={[<RequiredMarker key='asterisk' />]} />

app/i18n.js

@@ -0,0 +1,15 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .use(resourcesToBackend((language, namespace) => import(`./i18n/locales/${language}/${namespace}.json`)))
+  .init({
+    debug: process.env.NODE_ENV !== "production" ,
+    fallbackLng: 'en'
+  });
+
+export default i18n;

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import StoreProvider  from './StoreProvider'
 import "./globals.css";
 import GovernmentBanner from "./components/GovernmentBanner";
+import I18nComponent from "./components/I18nComponent";
 import InitialStateLoader from "./InitialStateLoader";
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,7 @@ function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}><StoreProvider><InitialStateLoader><GovernmentBanner />{children}</InitialStateLoader></StoreProvider></body>
+      <body className={inter.className}><StoreProvider><InitialStateLoader><I18nComponent /><GovernmentBanner />{children}</InitialStateLoader></StoreProvider></body>
     </html>
   );
 }

app/ledger/expense/add/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 import "@trussworks/react-uswds/lib/uswds.css"
 import "@trussworks/react-uswds/lib/index.css"
+import { useTranslation } from 'react-i18next'
 import { Header, Title, Button, Form, FormGroup, Grid, GridContainer, Alert, Checkbox, DatePicker, ErrorMessage, ComboBox, Label, ValidationChecklist, ValidationItem, RequiredMarker } from '@trussworks/react-uswds' 
-import { useTranslation } from '@/app/i18n/client'
 import { useAppDispatch } from "@/lib/hooks"
 import { ExpenseItem, addExpense, selectExpenseItems } from "@/lib/features/ledger/expenses/expensesSlice"
 import { useRouter } from "next/navigation"
@@ -13,7 +13,7 @@ import exp from "constants"
 import RequiredFieldDescription from "@/app/components/RequiredFieldDescription"
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const dispatch = useAppDispatch()
     const router = useRouter()
 

app/ledger/expense/list/page.tsx

@@ -3,14 +3,14 @@
 import "@trussworks/react-uswds/lib/uswds.css"
 import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, ButtonGroup, CardGroup, ModalToggleButton, Modal, ModalHeading, ModalFooter, Card, CardBody, CardHeader, Grid, GridContainer, Label, TextInput, ModalRef } from '@trussworks/react-uswds' 
-import { useTranslation } from '../../../i18n/client'
+import { useTranslation } from 'react-i18next'
 import { useRouter } from "next/navigation"
 import ExpenseList from "@/app/components/ExpenseList"
 import { useAppSelector } from "@/lib/hooks"
 import { selectRecommendStandardDeduction } from "@/lib/store"
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const router = useRouter()
     const reccommendStandardDeduction = useAppSelector(state => selectRecommendStandardDeduction(state))
 

app/ledger/expense/page.tsx

@@ -3,12 +3,12 @@
 import "@trussworks/react-uswds/lib/uswds.css"
 import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, HeadingLevel, Grid, GridContainer, Accordion } from '@trussworks/react-uswds' 
-import { useTranslation } from '@/app/i18n/client'
+import { useTranslation } from 'react-i18next'
 import { useRouter } from "next/navigation"
 import Link from 'next/link'
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const router = useRouter()
 
     const testItems = [

app/ledger/expense/snap/page.tsx

@@ -5,11 +5,11 @@ import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, HeadingLevel, Grid, GridContainer, Accordion, Radio, Form } from '@trussworks/react-uswds' 
 import { useRouter } from "next/navigation"
 import Link from 'next/link'
-import { useTranslation } from "@/app/i18n/client"
+import { useTranslation } from "react-i18next"
 import { Controller, SubmitHandler, useForm } from "react-hook-form"
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const router = useRouter()
 
     const MONTHLY_AMOUNT = "XXX.XX"

app/ledger/expense/snap/recommend/page.test.tsx

@@ -8,6 +8,7 @@ import { EnhancedStore } from '@reduxjs/toolkit'
 import mockRouter from 'next-router-mock'
 import { BenefitsState, selectBenefits, setBenefits } from '@/lib/features/benefits/benefitsSlice'
 import { IncomeItem, addIncome } from '@/lib/features/ledger/income/incomeSlice'
+import TestWrapper from '@/app/TestWrapper'
 
 describe('SNAP Recommend Deduction Screen', async () => {
     let store: EnhancedStore
@@ -22,13 +23,14 @@ describe('SNAP Recommend Deduction Screen', async () => {
             medicaid: true,
         }
         store.dispatch(setBenefits(benefits))
+
         const incomeItem: IncomeItem = {
             amount: 100,
             name: "Suzy",
             description: "Yardwork",
         }
         store.dispatch(addIncome(incomeItem))
-        render (<Provider store={store}><Page /></Provider>)
+        render(<TestWrapper store={store}><Page /></TestWrapper>)
     })
     afterEach(cleanup)
 

app/ledger/expense/snap/recommend/page.tsx

@@ -4,7 +4,7 @@ import "@trussworks/react-uswds/lib/uswds.css"
 import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, Grid, GridContainer, Radio, Form } from '@trussworks/react-uswds' 
 import { useRouter } from "next/navigation"
-import { useTranslation } from "@/app/i18n/client"
+import { useTranslation } from "react-i18next"
 import { Controller, SubmitHandler, useForm } from "react-hook-form"
 import { useAppDispatch, useAppSelector } from "@/lib/hooks"
 import { BenefitsState, selectBenefits, setBenefits } from "@/lib/features/benefits/benefitsSlice"
@@ -13,7 +13,7 @@ import { useEffect } from "react"
 import { selectRecommendStandardDeduction } from "@/lib/store"
 
 export default function Page() {
-    const { t } = useTranslation('en')
+    const { t } = useTranslation()
     const router = useRouter()
     const dispatch = useAppDispatch()
     const benefits = useAppSelector(state => selectBenefits(state))