From d756cb68c34eb6aaff020edf69430d4fd3e8ad59 Mon Sep 17 00:00:00 2001 From: Trott Albert Date: Wed, 8 Jul 2020 05:44:44 +0500 Subject: [PATCH] feat: add new useTranslator (#2197) --- .../shared/hooks/useTranslator.test.ts | 22 +++++++++++++++++ src/dashboard/Dashboard.tsx | 4 ++-- src/incidents/list/ViewIncidents.tsx | 4 ++-- src/incidents/report/ReportIncident.tsx | 4 ++-- src/incidents/view/ViewIncident.tsx | 4 ++-- src/labs/ViewLab.tsx | 4 ++-- src/labs/ViewLabs.tsx | 4 ++-- src/labs/requests/NewLabRequest.tsx | 4 ++-- src/page-header/breadcrumbs/Breadcrumbs.tsx | 4 ++-- src/patients/ContactInfo.tsx | 4 ++-- src/patients/GeneralInformation.tsx | 24 +++++++------------ src/patients/allergies/Allergies.tsx | 4 ++-- src/patients/allergies/NewAllergyModal.tsx | 4 ++-- .../appointments/AppointmentsList.tsx | 4 ++-- src/patients/care-plans/AddCarePlanModal.tsx | 4 ++-- src/patients/care-plans/CarePlanForm.tsx | 4 ++-- src/patients/care-plans/CarePlanTab.tsx | 4 ++-- src/patients/care-plans/CarePlanTable.tsx | 4 ++-- src/patients/diagnoses/AddDiagnosisModal.tsx | 4 ++-- src/patients/diagnoses/Diagnoses.tsx | 4 ++-- src/patients/edit/EditPatient.tsx | 4 ++-- src/patients/labs/LabsTab.tsx | 4 ++-- src/patients/list/ViewPatients.tsx | 4 ++-- src/patients/new/NewPatient.tsx | 4 ++-- src/patients/notes/NewNoteModal.tsx | 4 ++-- src/patients/notes/NoteTab.tsx | 4 ++-- .../related-persons/AddRelatedPersonModal.tsx | 4 ++-- .../related-persons/RelatedPersonTab.tsx | 4 ++-- src/patients/view/ViewPatient.tsx | 4 ++-- .../appointments/AppointmentDetailForm.tsx | 4 ++-- .../appointments/ViewAppointments.tsx | 4 ++-- .../appointments/edit/EditAppointment.tsx | 4 ++-- .../appointments/new/NewAppointment.tsx | 4 ++-- .../appointments/view/ViewAppointment.tsx | 4 ++-- src/settings/Settings.tsx | 4 ++-- src/shared/components/PageComponent.tsx | 5 ++-- src/shared/components/Sidebar.tsx | 4 ++-- .../components/input/LanguageSelector.tsx | 4 ++-- src/shared/components/navbar/Navbar.tsx | 4 ++-- .../network-status/NetworkStatusMessage.tsx | 4 ++-- src/shared/hooks/useTranslator.ts | 17 +++++++++++++ 41 files changed, 124 insertions(+), 92 deletions(-) create mode 100644 src/__tests__/shared/hooks/useTranslator.test.ts create mode 100644 src/shared/hooks/useTranslator.ts diff --git a/src/__tests__/shared/hooks/useTranslator.test.ts b/src/__tests__/shared/hooks/useTranslator.test.ts new file mode 100644 index 0000000000..5da6b2ba6e --- /dev/null +++ b/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) + }) +}) diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index 8cfefb9325..216c5fe3ef 100644 --- a/src/dashboard/Dashboard.tsx +++ b/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

Example

} diff --git a/src/incidents/list/ViewIncidents.tsx b/src/incidents/list/ViewIncidents.tsx index 88c72fdf35..b798381168 100644 --- a/src/incidents/list/ViewIncidents.tsx +++ b/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')) diff --git a/src/incidents/report/ReportIncident.tsx b/src/incidents/report/ReportIncident.tsx index b270cc7222..8de7e9c7a5 100644 --- a/src/incidents/report/ReportIncident.tsx +++ b/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,6 +8,7 @@ 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' @@ -16,7 +16,7 @@ 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 = [ { diff --git a/src/incidents/view/ViewIncident.tsx b/src/incidents/view/ViewIncident.tsx index a4797cb7c5..17b6fc620d 100644 --- a/src/incidents/view/ViewIncident.tsx +++ b/src/incidents/view/ViewIncident.tsx @@ -1,7 +1,6 @@ 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' @@ -9,12 +8,13 @@ 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 : '') diff --git a/src/labs/ViewLab.tsx b/src/labs/ViewLab.tsx index b8328de69d..d07042bba3 100644 --- a/src/labs/ViewLab.tsx +++ b/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) diff --git a/src/labs/ViewLabs.tsx b/src/labs/ViewLabs.tsx index 298570ba12..6caa3f1663 100644 --- a/src/labs/ViewLabs.tsx +++ b/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')) diff --git a/src/labs/requests/NewLabRequest.tsx b/src/labs/requests/NewLabRequest.tsx index 08fe49b664..833fa8a71e 100644 --- a/src/labs/requests/NewLabRequest.tsx +++ b/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')) diff --git a/src/page-header/breadcrumbs/Breadcrumbs.tsx b/src/page-header/breadcrumbs/Breadcrumbs.tsx index 720126e4c9..0f16629a8a 100644 --- a/src/page-header/breadcrumbs/Breadcrumbs.tsx +++ b/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) { diff --git a/src/patients/ContactInfo.tsx b/src/patients/ContactInfo.tsx index 8a5939f220..70ff3eb473 100644 --- a/src/patients/ContactInfo.tsx +++ b/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) { diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx index d9dbacd66c..213ac7c5cf 100644 --- a/src/patients/GeneralInformation.tsx +++ b/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)} />
@@ -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)} />
@@ -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)} />
@@ -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)} />
@@ -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)} /> )} @@ -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)} /> diff --git a/src/patients/allergies/Allergies.tsx b/src/patients/allergies/Allergies.tsx index f39ffaa60a..d37c5327e9 100644 --- a/src/patients/allergies/Allergies.tsx +++ b/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) diff --git a/src/patients/allergies/NewAllergyModal.tsx b/src/patients/allergies/NewAllergyModal.tsx index 9a5383df24..97dabee171 100644 --- a/src/patients/allergies/NewAllergyModal.tsx +++ b/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: '' }) diff --git a/src/patients/appointments/AppointmentsList.tsx b/src/patients/appointments/AppointmentsList.tsx index 93ee38e70d..58c2567e09 100644 --- a/src/patients/appointments/AppointmentsList.tsx +++ b/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) diff --git a/src/patients/care-plans/AddCarePlanModal.tsx b/src/patients/care-plans/AddCarePlanModal.tsx index 7ecb0a4938..48058e232b 100644 --- a/src/patients/care-plans/AddCarePlanModal.tsx +++ b/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) diff --git a/src/patients/care-plans/CarePlanForm.tsx b/src/patients/care-plans/CarePlanForm.tsx index b658d9dd99..9ff64150c0 100644 --- a/src/patients/care-plans/CarePlanForm.tsx +++ b/src/patients/care-plans/CarePlanForm.tsx @@ -1,6 +1,5 @@ import { Alert, Column, Row } from '@hospitalrun/components' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup' import SelectWithLabelFormGroup, { @@ -8,6 +7,7 @@ import SelectWithLabelFormGroup, { } 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 CarePlan, { CarePlanIntent, CarePlanStatus } from '../../shared/model/CarePlan' import Patient from '../../shared/model/Patient' @@ -31,7 +31,7 @@ interface Props { } const CarePlanForm = (props: Props) => { - const { t } = useTranslation() + const { t } = useTranslator() const { patient, carePlan, carePlanError, disabled, onChange } = props const [condition, setCondition] = useState(carePlan.diagnosisId) diff --git a/src/patients/care-plans/CarePlanTab.tsx b/src/patients/care-plans/CarePlanTab.tsx index e52aca0142..f6bdbb1f47 100644 --- a/src/patients/care-plans/CarePlanTab.tsx +++ b/src/patients/care-plans/CarePlanTab.tsx @@ -1,9 +1,9 @@ import { Button } from '@hospitalrun/components' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' import { Route, Switch } from 'react-router-dom' +import useTranslator from '../../shared/hooks/useTranslator' import Permissions from '../../shared/model/Permissions' import { RootState } from '../../shared/store' import AddCarePlanModal from './AddCarePlanModal' @@ -11,7 +11,7 @@ import CarePlanTable from './CarePlanTable' import ViewCarePlan from './ViewCarePlan' const CarePlanTab = () => { - const { t } = useTranslation() + const { t } = useTranslator() const { permissions } = useSelector((state: RootState) => state.user) const [showAddCarePlanModal, setShowAddCarePlanModal] = useState(false) return ( diff --git a/src/patients/care-plans/CarePlanTable.tsx b/src/patients/care-plans/CarePlanTable.tsx index e25280a7af..1ba4d5b899 100644 --- a/src/patients/care-plans/CarePlanTable.tsx +++ b/src/patients/care-plans/CarePlanTable.tsx @@ -1,15 +1,15 @@ import { Table } from '@hospitalrun/components' import format from 'date-fns/format' 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 CarePlanTable = () => { const history = useHistory() - const { t } = useTranslation() + const { t } = useTranslator() const { patient } = useSelector((state: RootState) => state.patient) return ( diff --git a/src/patients/diagnoses/AddDiagnosisModal.tsx b/src/patients/diagnoses/AddDiagnosisModal.tsx index c42bbf5da5..449c9b00f3 100644 --- a/src/patients/diagnoses/AddDiagnosisModal.tsx +++ b/src/patients/diagnoses/AddDiagnosisModal.tsx @@ -1,10 +1,10 @@ import { Modal, Alert } from '@hospitalrun/components' import React, { useState, useEffect } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup' import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup' +import useTranslator from '../../shared/hooks/useTranslator' import Diagnosis from '../../shared/model/Diagnosis' import { RootState } from '../../shared/store' import { addDiagnosis } from '../patient-slice' @@ -18,7 +18,7 @@ const AddDiagnosisModal = (props: Props) => { const { show, onCloseButtonClick } = props const dispatch = useDispatch() const { diagnosisError, patient } = useSelector((state: RootState) => state.patient) - const { t } = useTranslation() + const { t } = useTranslator() const [diagnosis, setDiagnosis] = useState({ name: '', diagnosisDate: new Date().toISOString() }) diff --git a/src/patients/diagnoses/Diagnoses.tsx b/src/patients/diagnoses/Diagnoses.tsx index 24465461af..d529fb306c 100644 --- a/src/patients/diagnoses/Diagnoses.tsx +++ b/src/patients/diagnoses/Diagnoses.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 Diagnosis from '../../shared/model/Diagnosis' import Patient from '../../shared/model/Patient' import Permissions from '../../shared/model/Permissions' @@ -16,7 +16,7 @@ interface Props { const Diagnoses = (props: Props) => { const { patient } = props - const { t } = useTranslation() + const { t } = useTranslator() const { permissions } = useSelector((state: RootState) => state.user) const [showDiagnosisModal, setShowDiagnosisModal] = useState(false) diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx index 8eccc03c9e..884a26e91d 100644 --- a/src/patients/edit/EditPatient.tsx +++ b/src/patients/edit/EditPatient.tsx @@ -1,11 +1,11 @@ import { Spinner, Button, Toast } from '@hospitalrun/components' import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs' import useTitle from '../../page-header/title/useTitle' +import useTranslator from '../../shared/hooks/useTranslator' import Patient from '../../shared/model/Patient' import { RootState } from '../../shared/store' import GeneralInformation from '../GeneralInformation' @@ -21,7 +21,7 @@ const getPatientCode = (p: Patient): string => { } const EditPatient = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() const dispatch = useDispatch() diff --git a/src/patients/labs/LabsTab.tsx b/src/patients/labs/LabsTab.tsx index 2fd8c80db1..66296cee95 100644 --- a/src/patients/labs/LabsTab.tsx +++ b/src/patients/labs/LabsTab.tsx @@ -1,10 +1,10 @@ import { Alert, Table } from '@hospitalrun/components' import format from 'date-fns/format' import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' import { useHistory } from 'react-router-dom' import PatientRepository from '../../shared/db/PatientRepository' +import useTranslator from '../../shared/hooks/useTranslator' import Lab from '../../shared/model/Lab' interface Props { @@ -14,7 +14,7 @@ interface Props { const LabsTab = (props: Props) => { const history = useHistory() const { patientId } = props - const { t } = useTranslation() + const { t } = useTranslator() const [labs, setLabs] = useState([]) diff --git a/src/patients/list/ViewPatients.tsx b/src/patients/list/ViewPatients.tsx index 51aaa381e2..4dafd5543d 100644 --- a/src/patients/list/ViewPatients.tsx +++ b/src/patients/list/ViewPatients.tsx @@ -1,7 +1,6 @@ import { Spinner, Button, Container, Row, TextInput, Column, Table } from '@hospitalrun/components' import format from 'date-fns/format' import React, { useEffect, useState, useRef } from 'react' -import { useTranslation } from 'react-i18next' import { useSelector, useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' @@ -10,6 +9,7 @@ import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonB import useTitle from '../../page-header/title/useTitle' import SortRequest from '../../shared/db/SortRequest' import useDebounce from '../../shared/hooks/useDebounce' +import useTranslator from '../../shared/hooks/useTranslator' import useUpdateEffect from '../../shared/hooks/useUpdateEffect' import { RootState } from '../../shared/store' import { searchPatients } from '../patients-slice' @@ -17,7 +17,7 @@ import { searchPatients } from '../patients-slice' const breadcrumbs = [{ i18nKey: 'patients.label', location: '/patients' }] const ViewPatients = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() useTitle(t('patients.label')) useAddBreadcrumbs(breadcrumbs, true) diff --git a/src/patients/new/NewPatient.tsx b/src/patients/new/NewPatient.tsx index 3dbdb120dd..7cd7b52fdf 100644 --- a/src/patients/new/NewPatient.tsx +++ b/src/patients/new/NewPatient.tsx @@ -1,11 +1,11 @@ import { Button, Toast } 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' import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs' import useTitle from '../../page-header/title/useTitle' +import useTranslator from '../../shared/hooks/useTranslator' import Patient from '../../shared/model/Patient' import { RootState } from '../../shared/store' import GeneralInformation from '../GeneralInformation' @@ -17,7 +17,7 @@ const breadcrumbs = [ ] const NewPatient = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() const dispatch = useDispatch() const { createError } = useSelector((state: RootState) => state.patient) diff --git a/src/patients/notes/NewNoteModal.tsx b/src/patients/notes/NewNoteModal.tsx index 913e9a9ad4..818522d2fb 100644 --- a/src/patients/notes/NewNoteModal.tsx +++ b/src/patients/notes/NewNoteModal.tsx @@ -1,9 +1,9 @@ import { Modal, Alert } from '@hospitalrun/components' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup' +import useTranslator from '../../shared/hooks/useTranslator' import Note from '../../shared/model/Note' import { RootState } from '../../shared/store' import { addNote } from '../patient-slice' @@ -18,7 +18,7 @@ const NewNoteModal = (props: Props) => { const { show, toggle, onCloseButtonClick } = props const dispatch = useDispatch() const { patient, noteError } = useSelector((state: RootState) => state.patient) - const { t } = useTranslation() + const { t } = useTranslator() const [note, setNote] = useState({ text: '', }) diff --git a/src/patients/notes/NoteTab.tsx b/src/patients/notes/NoteTab.tsx index b91970ddf1..b32ce3e732 100644 --- a/src/patients/notes/NoteTab.tsx +++ b/src/patients/notes/NoteTab.tsx @@ -1,8 +1,8 @@ import { Button, List, ListItem, Alert } from '@hospitalrun/components' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' +import useTranslator from '../../shared/hooks/useTranslator' import Note from '../../shared/model/Note' import Patient from '../../shared/model/Patient' import Permissions from '../../shared/model/Permissions' @@ -15,7 +15,7 @@ interface Props { const NoteTab = (props: Props) => { const { patient } = props - const { t } = useTranslation() + const { t } = useTranslator() const { permissions } = useSelector((state: RootState) => state.user) const [showNewNoteModal, setShowNoteModal] = useState(false) diff --git a/src/patients/related-persons/AddRelatedPersonModal.tsx b/src/patients/related-persons/AddRelatedPersonModal.tsx index e3bca43c37..7b57e6d3bb 100644 --- a/src/patients/related-persons/AddRelatedPersonModal.tsx +++ b/src/patients/related-persons/AddRelatedPersonModal.tsx @@ -1,11 +1,11 @@ import { Modal, Alert, Typeahead, Label } from '@hospitalrun/components' import format from 'date-fns/format' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup' import PatientRepository from '../../shared/db/PatientRepository' +import useTranslator from '../../shared/hooks/useTranslator' import Patient from '../../shared/model/Patient' import RelatedPerson from '../../shared/model/RelatedPerson' import { RootState } from '../../shared/store' @@ -19,7 +19,7 @@ interface Props { const AddRelatedPersonModal = (props: Props) => { const dispatch = useDispatch() - const { t } = useTranslation() + const { t } = useTranslator() const { patient, relatedPersonError } = useSelector((state: RootState) => state.patient) const { show, toggle, onCloseButtonClick } = props diff --git a/src/patients/related-persons/RelatedPersonTab.tsx b/src/patients/related-persons/RelatedPersonTab.tsx index a2247f91d6..4524d56f17 100644 --- a/src/patients/related-persons/RelatedPersonTab.tsx +++ b/src/patients/related-persons/RelatedPersonTab.tsx @@ -1,11 +1,11 @@ import { Button, Alert, Spinner, Table } from '@hospitalrun/components' import React, { useState, useEffect } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs' import PatientRepository from '../../shared/db/PatientRepository' +import useTranslator from '../../shared/hooks/useTranslator' import Patient from '../../shared/model/Patient' import Permissions from '../../shared/model/Permissions' import { RootState } from '../../shared/store' @@ -24,7 +24,7 @@ const RelatedPersonTab = (props: Props) => { history.push(location) } const { patient } = props - const { t } = useTranslation() + const { t } = useTranslator() const { permissions } = useSelector((state: RootState) => state.user) const [showNewRelatedPersonModal, setShowRelatedPersonModal] = useState(false) const [relatedPersons, setRelatedPersons] = useState(undefined) diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx index 0f26ebe03a..bb4218e783 100644 --- a/src/patients/view/ViewPatient.tsx +++ b/src/patients/view/ViewPatient.tsx @@ -1,6 +1,5 @@ import { Panel, Spinner, TabsHeader, Tab, Button } from '@hospitalrun/components' import React, { useEffect } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useParams, @@ -14,6 +13,7 @@ import { import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs' import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider' import useTitle from '../../page-header/title/useTitle' +import useTranslator from '../../shared/hooks/useTranslator' import Patient from '../../shared/model/Patient' import Permissions from '../../shared/model/Permissions' import { RootState } from '../../shared/store' @@ -37,7 +37,7 @@ const getPatientCode = (p: Patient): string => { } const ViewPatient = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() const dispatch = useDispatch() const location = useLocation() diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx index e8f4139b4f..03c4c87570 100644 --- a/src/scheduling/appointments/AppointmentDetailForm.tsx +++ b/src/scheduling/appointments/AppointmentDetailForm.tsx @@ -1,6 +1,5 @@ import { Typeahead, Label, Alert } from '@hospitalrun/components' import React from 'react' -import { useTranslation } from 'react-i18next' import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup' import SelectWithLabelFormGroup, { @@ -9,6 +8,7 @@ import SelectWithLabelFormGroup, { 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 Appointment from '../../shared/model/Appointment' import Patient from '../../shared/model/Patient' @@ -22,7 +22,7 @@ interface Props { const AppointmentDetailForm = (props: Props) => { const { onFieldChange, appointment, patient, isEditable, error } = props - const { t } = useTranslation() + const { t } = useTranslator() const onDateChange = (date: Date, fieldName: string) => onFieldChange && onFieldChange(fieldName, date.toISOString()) diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx index df60389573..8ae3114efd 100644 --- a/src/scheduling/appointments/ViewAppointments.tsx +++ b/src/scheduling/appointments/ViewAppointments.tsx @@ -1,6 +1,5 @@ import { Calendar, Button } from '@hospitalrun/components' import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' import { useSelector, useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' @@ -8,6 +7,7 @@ import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs' import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider' import useTitle from '../../page-header/title/useTitle' import PatientRepository from '../../shared/db/PatientRepository' +import useTranslator from '../../shared/hooks/useTranslator' import { RootState } from '../../shared/store' import { fetchAppointments } from './appointments-slice' @@ -22,7 +22,7 @@ interface Event { const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }] const ViewAppointments = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() useTitle(t('scheduling.appointments.label')) const dispatch = useDispatch() diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx index 94280e1ddd..73e30bed85 100644 --- a/src/scheduling/appointments/edit/EditAppointment.tsx +++ b/src/scheduling/appointments/edit/EditAppointment.tsx @@ -1,11 +1,11 @@ import { Spinner, Button } from '@hospitalrun/components' import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs' import useTitle from '../../../page-header/title/useTitle' +import useTranslator from '../../../shared/hooks/useTranslator' import Appointment from '../../../shared/model/Appointment' import { RootState } from '../../../shared/store' import { updateAppointment, fetchAppointment } from '../appointment-slice' @@ -13,7 +13,7 @@ import AppointmentDetailForm from '../AppointmentDetailForm' import { getAppointmentLabel } from '../util/scheduling-appointment.util' const EditAppointment = () => { - const { t } = useTranslation() + const { t } = useTranslator() useTitle(t('scheduling.appointments.editAppointment')) const history = useHistory() const dispatch = useDispatch() diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx index 49c2687896..b51fe91315 100644 --- a/src/scheduling/appointments/new/NewAppointment.tsx +++ b/src/scheduling/appointments/new/NewAppointment.tsx @@ -2,12 +2,12 @@ import { Button, Toast } from '@hospitalrun/components' import addMinutes from 'date-fns/addMinutes' import roundToNearestMinutes from 'date-fns/roundToNearestMinutes' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs' import useTitle from '../../../page-header/title/useTitle' +import useTranslator from '../../../shared/hooks/useTranslator' import Appointment from '../../../shared/model/Appointment' import { RootState } from '../../../shared/store' import { createAppointment } from '../appointment-slice' @@ -19,7 +19,7 @@ const breadcrumbs = [ ] const NewAppointment = () => { - const { t } = useTranslation() + const { t } = useTranslator() const history = useHistory() const dispatch = useDispatch() useTitle(t('scheduling.appointments.new')) diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx index 221fe0d868..b40c336035 100644 --- a/src/scheduling/appointments/view/ViewAppointment.tsx +++ b/src/scheduling/appointments/view/ViewAppointment.tsx @@ -1,12 +1,12 @@ import { Spinner, Button, Modal, Toast } from '@hospitalrun/components' 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 { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider' import useTitle from '../../../page-header/title/useTitle' +import useTranslator from '../../../shared/hooks/useTranslator' import Permissions from '../../../shared/model/Permissions' import { RootState } from '../../../shared/store' import { fetchAppointment, deleteAppointment } from '../appointment-slice' @@ -14,7 +14,7 @@ import AppointmentDetailForm from '../AppointmentDetailForm' import { getAppointmentLabel } from '../util/scheduling-appointment.util' const ViewAppointment = () => { - const { t } = useTranslation() + const { t } = useTranslator() useTitle(t('scheduling.appointments.viewAppointment')) const dispatch = useDispatch() const { id } = useParams() diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index d3fe2dc91f..0d31f89c69 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1,12 +1,12 @@ import { Row, Column } from '@hospitalrun/components' import React from 'react' -import { useTranslation } from 'react-i18next' import useTitle from '../page-header/title/useTitle' import LanguageSelector from '../shared/components/input/LanguageSelector' +import useTranslator from '../shared/hooks/useTranslator' const Settings = () => { - const { t } = useTranslation() + const { t } = useTranslator() useTitle(t('settings.label')) return ( diff --git a/src/shared/components/PageComponent.tsx b/src/shared/components/PageComponent.tsx index 1d7654837b..b8a81af45d 100644 --- a/src/shared/components/PageComponent.tsx +++ b/src/shared/components/PageComponent.tsx @@ -1,6 +1,7 @@ import { Button, Select } from '@hospitalrun/components' import React from 'react' -import { useTranslation } from 'react-i18next' + +import useTranslator from '../hooks/useTranslator' const pageSizes = [ { label: '25', value: 25 }, @@ -19,7 +20,7 @@ const PageComponent = ({ setPreviousPageRequest, setNextPageRequest, }: any) => { - const { t } = useTranslation() + const { t } = useTranslator() return (
diff --git a/src/shared/components/Sidebar.tsx b/src/shared/components/Sidebar.tsx index 91e99f6ff4..cc48668548 100644 --- a/src/shared/components/Sidebar.tsx +++ b/src/shared/components/Sidebar.tsx @@ -1,9 +1,9 @@ import { List, ListItem, Icon } from '@hospitalrun/components' import React, { useState, CSSProperties } from 'react' -import { useTranslation } from 'react-i18next' import { useSelector, useDispatch } from 'react-redux' import { useLocation, useHistory } from 'react-router-dom' +import useTranslator from '../hooks/useTranslator' import Permissions from '../model/Permissions' import { RootState } from '../store' import { updateSidebar } from './component-slice' @@ -13,7 +13,7 @@ const Sidebar = () => { const { sidebarCollapsed } = useSelector((state: RootState) => state.components) const permissions = useSelector((state: RootState) => state.user.permissions) - const { t } = useTranslation() + const { t } = useTranslator() const path = useLocation() const history = useHistory() const { pathname } = path diff --git a/src/shared/components/input/LanguageSelector.tsx b/src/shared/components/input/LanguageSelector.tsx index 349df6ba04..e44d943151 100644 --- a/src/shared/components/input/LanguageSelector.tsx +++ b/src/shared/components/input/LanguageSelector.tsx @@ -1,12 +1,12 @@ import { sortBy } from 'lodash' import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' import i18n, { resources } from '../../config/i18n' +import useTranslator from '../../hooks/useTranslator' import SelectWithLabelFormGroup, { Option } from './SelectWithLableFormGroup' const LanguageSelector = () => { - const { t } = useTranslation() + const { t } = useTranslator() const [selected, setSelected] = useState(i18n.language) let languageOptions: Option[] = Object.keys(resources).map((abbr) => ({ diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx index fd47e8eb8b..58eed83e21 100644 --- a/src/shared/components/navbar/Navbar.tsx +++ b/src/shared/components/navbar/Navbar.tsx @@ -1,17 +1,17 @@ import { Navbar as HospitalRunNavbar } from '@hospitalrun/components' import React from 'react' -import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import { logout } from '../../../user/user-slice' +import useTranslator from '../../hooks/useTranslator' import { RootState } from '../../store' import pageMap, { Page } from './pageMap' const Navbar = () => { const dispatch = useDispatch() const history = useHistory() - const { t } = useTranslation() + const { t } = useTranslator() const { permissions } = useSelector((state: RootState) => state.user) const navigateTo = (location: string) => { diff --git a/src/shared/components/network-status/NetworkStatusMessage.tsx b/src/shared/components/network-status/NetworkStatusMessage.tsx index c9e1b35227..b4beb8f5c8 100644 --- a/src/shared/components/network-status/NetworkStatusMessage.tsx +++ b/src/shared/components/network-status/NetworkStatusMessage.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' +import useTranslator from '../../hooks/useTranslator' import { useNetworkStatus } from './useNetworkStatus' const ONLINE_COLOR = 'rgba(0, 255, 0, 0.55)' @@ -13,7 +13,7 @@ const BASE_STYLE = { } export const NetworkStatusMessage = () => { - const { t } = useTranslation() + const { t } = useTranslator() const { isOnline, wasOffline } = useNetworkStatus() const [shouldRender, setShouldRender] = useState(true) const [opacity, setOpacity] = useState(1) diff --git a/src/shared/hooks/useTranslator.ts b/src/shared/hooks/useTranslator.ts new file mode 100644 index 0000000000..7a55183aaf --- /dev/null +++ b/src/shared/hooks/useTranslator.ts @@ -0,0 +1,17 @@ +import { useCallback } from 'react' +import { useTranslation } from 'react-i18next' + +export default function useTranslator() { + const { t } = useTranslation() + + const translate = useCallback( + (key: any): any => { + return key !== undefined ? t(key) : undefined + }, + [t], + ) + + return { + t: translate, + } +}