feat: add new useTranslator (#2197)

src/__tests__/shared/hooks/useTranslator.test.ts

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useTranslation } from '../../../__mocks__/react-i18next'
+import useTranslator from '../../../shared/hooks/useTranslator'
+
+describe('useTranslator', () => {
+  it('should return undefined if input value for translation is undefined', () => {
+    const { result } = renderHook(() => useTranslator())
+
+    expect(result.current.t(undefined)).toBe(undefined)
+  })
+
+  it('should return useTranslation hook result if input value is NOT undefined', () => {
+    const { result: useTranslatorResult } = renderHook(() => useTranslator())
+    const { result: useTranslationResult } = renderHook(() => useTranslation())
+
+    const result = useTranslatorResult.current.t('patient.firstName')
+    const expected = useTranslationResult.current.t('patient.firstName')
+
+    expect(result).toBe(expected)
+  })
+})

src/dashboard/Dashboard.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import useTitle from '../page-header/title/useTitle'
+import useTranslator from '../shared/hooks/useTranslator'
 
 const Dashboard: React.FC = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('dashboard.label'))
   return <h3>Example</h3>
 }

src/incidents/list/ViewIncidents.tsx

@@ -1,7 +1,6 @@
 import { Button, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -10,12 +9,13 @@ import useTitle from '../../page-header/title/useTitle'
 import SelectWithLabelFormGroup, {
   Option,
 } from '../../shared/components/input/SelectWithLableFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 import IncidentFilter from '../IncidentFilter'
 import { searchIncidents } from '../incidents-slice'
 
 const ViewIncidents = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   useTitle(t('incidents.reports.label'))

src/incidents/report/ReportIncident.tsx

@@ -1,6 +1,5 @@
 import { Button, Row, Column } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -9,14 +8,15 @@ import useTitle from '../../page-header/title/useTitle'
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Incident from '../../shared/model/Incident'
 import { RootState } from '../../shared/store'
 import { reportIncident } from '../incident-slice'
 
 const ReportIncident = () => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('incidents.reports.new'))
   const breadcrumbs = [
     {

src/incidents/view/ViewIncident.tsx

@@ -1,20 +1,20 @@
 import { Column, Row, Spinner } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 import { fetchIncident } from '../incident-slice'
 
 const ViewIncident = () => {
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { id } = useParams()
   const { incident } = useSelector((state: RootState) => state.incident)
   useTitle(incident ? incident.code : '')

src/labs/ViewLab.tsx

@@ -1,13 +1,13 @@
 import { Row, Column, Badge, Button, Alert } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../shared/components/input/TextFieldWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import Lab from '../shared/model/Lab'
 import Patient from '../shared/model/Patient'
 import Permissions from '../shared/model/Permissions'
@@ -19,7 +19,7 @@ const getTitle = (patient: Patient | undefined, lab: Lab | undefined) =>
 
 const ViewLab = () => {
   const { id } = useParams()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   const { permissions } = useSelector((state: RootState) => state.user)

src/labs/ViewLabs.tsx

@@ -1,7 +1,6 @@
 import { Button, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useState, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -12,6 +11,7 @@ import SelectWithLabelFormGroup, {
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
 import useDebounce from '../shared/hooks/useDebounce'
+import useTranslator from '../shared/hooks/useTranslator'
 import Lab from '../shared/model/Lab'
 import Permissions from '../shared/model/Permissions'
 import { RootState } from '../shared/store'
@@ -20,7 +20,7 @@ import { searchLabs } from './labs-slice'
 type LabFilter = 'requested' | 'completed' | 'canceled' | 'all'
 
 const ViewLabs = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const setButtons = useButtonToolbarSetter()
   useTitle(t('labs.label'))

src/labs/requests/NewLabRequest.tsx

@@ -1,6 +1,5 @@
 import { Typeahead, Label, Button, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -9,13 +8,14 @@ import useTitle from '../../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Lab from '../../shared/model/Lab'
 import Patient from '../../shared/model/Patient'
 import { RootState } from '../../shared/store'
 import { requestLab } from '../lab-slice'
 
 const NewLabRequest = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const dispatch = useDispatch()
   const history = useHistory()
   useTitle(t('labs.requests.new'))

src/page-header/breadcrumbs/Breadcrumbs.tsx

@@ -1,14 +1,14 @@
 import { Breadcrumb, BreadcrumbItem } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 
 const Breadcrumbs = () => {
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { breadcrumbs } = useSelector((state: RootState) => state.breadcrumbs)
 
   if (breadcrumbs.length === 0) {

src/patients/ContactInfo.tsx

@@ -1,12 +1,12 @@
 import { Spinner, Row, Column, Icon } from '@hospitalrun/components'
 import React, { useEffect, ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import SelectWithLabelFormGroup, {
   Option,
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import { ContactInfoPiece } from '../shared/model/ContactInformation'
 import { uuid } from '../shared/util/uuid'
 import ContactInfoTypes from './ContactInfoTypes'
@@ -24,7 +24,7 @@ interface Props {
 const ContactInfo = (props: Props): ReactElement => {
   const { component, data, errors, label, name, isEditable, onChange } = props
 
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   useEffect(() => {
     if (onChange && data.length === 0) {

src/patients/GeneralInformation.tsx

@@ -1,13 +1,13 @@
 import { Panel, Checkbox, Alert } from '@hospitalrun/components'
 import { startOfDay, subYears, differenceInYears } from 'date-fns'
 import React, { ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import DatePickerWithLabelFormGroup from '../shared/components/input/DatePickerWithLabelFormGroup'
 import SelectWithLabelFormGroup, {
   Option,
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import { ContactInfoPiece } from '../shared/model/ContactInformation'
 import Patient from '../shared/model/Patient'
 import ContactInfo from './ContactInfo'
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const GeneralInformation = (props: Props): ReactElement => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient, isEditable, onChange, error } = props
 
   const onFieldChange = (name: string, value: string | boolean | ContactInfoPiece[]) => {
@@ -98,7 +98,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('prefix', event.currentTarget.value)}
               isInvalid={!!error?.prefix}
-              feedback={error ? (error.prefix ? t(error.prefix) : undefined) : undefined}
+              feedback={t(error?.prefix)}
             />
           </div>
           <div className="col-md-4">
@@ -110,7 +110,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               onChange={(event) => onFieldChange('givenName', event.currentTarget.value)}
               isRequired
               isInvalid={!!error?.givenName}
-              feedback={error ? (error.givenName ? t(error.givenName) : undefined) : undefined}
+              feedback={t(error?.givenName)}
             />
           </div>
           <div className="col-md-4">
@@ -121,7 +121,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('familyName', event.currentTarget.value)}
               isInvalid={!!error?.familyName}
-              feedback={error ? (error.familyName ? t(error.familyName) : undefined) : undefined}
+              feedback={t(error?.familyName)}
             />
           </div>
           <div className="col-md-2">
@@ -132,7 +132,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('suffix', event.currentTarget.value)}
               isInvalid={!!error?.suffix}
-              feedback={error ? (error.suffix ? t(error.suffix) : undefined) : undefined}
+              feedback={t(error?.suffix)}
             />
           </div>
         </div>
@@ -192,9 +192,7 @@ const GeneralInformation = (props: Props): ReactElement => {
                 maxDate={new Date(Date.now().valueOf())}
                 onChange={(date: Date) => onFieldChange('dateOfBirth', date.toISOString())}
                 isInvalid={!!error?.dateOfBirth}
-                feedback={
-                  error ? (error.dateOfBirth ? t(error.dateOfBirth) : undefined) : undefined
-                }
+                feedback={t(error?.dateOfBirth)}
               />
             )}
           </div>
@@ -227,13 +225,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('preferredLanguage', event.currentTarget.value)}
               isInvalid={!!error?.preferredLanguage}
-              feedback={
-                error
-                  ? error.preferredLanguage
-                    ? t(error.preferredLanguage)
-                    : undefined
-                  : undefined
-              }
+              feedback={t(error?.preferredLanguage)}
             />
           </div>
         </div>

src/patients/allergies/Allergies.tsx

@@ -1,9 +1,9 @@
 import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Allergy from '../../shared/model/Allergy'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
@@ -15,7 +15,7 @@ interface AllergiesProps {
 }
 
 const Allergies = (props: AllergiesProps) => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient } = props
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewAllergyModal, setShowNewAllergyModal] = useState(false)

src/patients/allergies/NewAllergyModal.tsx

@@ -1,9 +1,9 @@
 import { Modal, Alert } from '@hospitalrun/components'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Allergy from '../../shared/model/Allergy'
 import { RootState } from '../../shared/store'
 import { addAllergy } from '../patient-slice'
@@ -16,7 +16,7 @@ interface NewAllergyModalProps {
 const NewAllergyModal = (props: NewAllergyModalProps) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { allergyError, patient } = useSelector((state: RootState) => state.patient)
 
   const [allergy, setAllergy] = useState({ name: '' })

src/patients/appointments/AppointmentsList.tsx

@@ -1,11 +1,11 @@
 import { Button, List, ListItem, Container, Row } from '@hospitalrun/components'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
 const AppointmentsList = (props: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   const { patientId } = props
   const { appointments } = useSelector((state: RootState) => state.appointments)

src/patients/care-plans/AddCarePlanModal.tsx

@@ -1,9 +1,9 @@
 import { Modal } from '@hospitalrun/components'
 import { addMonths } from 'date-fns'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import CarePlan from '../../shared/model/CarePlan'
 import { RootState } from '../../shared/store'
 import { addCarePlan } from '../patient-slice'
@@ -26,7 +26,7 @@ const initialCarePlanState = {
 const AddCarePlanModal = (props: Props) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { carePlanError, patient } = useSelector((state: RootState) => state.patient)
   const [carePlan, setCarePlan] = useState(initialCarePlanState)