chore(react-i18next): change usage of custom useTranslation to react-i18next

web/package.json

@@ -94,7 +94,6 @@
     "react-spinners": "^0.13.8",
     "react-spring-bottom-sheet": "3.5.0-alpha.0",
     "recharts": "^2.11.0",
-    "sprintf-js": "^1.1.3",
     "sunrise-sunset-js": "^2.2.1",
     "tailwind-merge": "^1.14.0",
     "tiny-invariant": "^1.3.1",
@@ -143,7 +142,6 @@
     "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "5.3.3",
     "@types/react-transition-group": "^4.4.10",
-    "@types/sprintf-js": "^1.1.4",
     "@types/topojson": "^3.2.6",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-server": "^3.0.4",

web/src/App.tsx

@@ -17,7 +17,8 @@
 import TimeControllerWrapper from 'features/time/TimeControllerWrapper';
 import { useDarkMode } from 'hooks/theme';
 import { lazy, ReactElement, Suspense, useEffect, useLayoutEffect } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
+import i18n from 'translation/i18n';
 import trackEvent from 'utils/analytics';
 
 const MapWrapper = lazy(async () => import('features/map/MapWrapper'));
@@ -66,7 +67,6 @@
       });
     }
   }, []);
-  const { __ } = useTranslation();
 
   return (
     <Suspense fallback={<div />}>
@@ -77,10 +77,10 @@
             <Sentry.ErrorBoundary fallback={ErrorComponent} showDialog>
               {isSuccess && isNewVersionAvailable && (
                 <Toast
-                  title={__('misc.newversion')}
+                  title={i18n.t('misc.newversion')}
                   toastAction={handleReload}
                   isCloseable={true}
-                  toastActionText={__('misc.reload')}
+                  toastActionText={i18n.t('misc.reload')}
                 />
               )}
               <LoadingOverlay />

web/src/components/CarbonIntensitySquare.tsx

@@ -1,5 +1,5 @@
 import { animated, useSpring } from '@react-spring/web';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 import { CarbonUnits } from 'utils/units';
 
 import { useCo2ColorScale } from '../hooks/theme';
@@ -32,7 +32,7 @@ interface CarbonIntensitySquareProps {
 }
 
 function CarbonIntensitySquare({ intensity, withSubtext }: CarbonIntensitySquareProps) {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   const co2ColorScale = useCo2ColorScale();
   const backgroundColor = useSpring({
     backgroundColor: co2ColorScale(intensity),
@@ -56,7 +56,7 @@ function CarbonIntensitySquare({ intensity, withSubtext }: CarbonIntensitySquare
         </animated.div>
       </div>
       <div className="mt-2 flex flex-col items-center">
-        <div className="text-sm">{__('country-panel.carbonintensity')}</div>
+        <div className="text-sm">{t('country-panel.carbonintensity')}</div>
         {withSubtext && (
           <div className="text-sm">{CarbonUnits.GRAMS_CO2EQ_PER_WATT_HOUR}</div>
         )}

web/src/components/LoadingOverlay.tsx

@@ -3,7 +3,7 @@ import useGetState from 'api/getState';
 import { loadingMapAtom } from 'features/map/mapAtoms';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from './Button';
 
@@ -14,7 +14,7 @@ const TIME_BEFORE_SHOWING_RELOAD_BUTTON = 8000;
 // TODO: Consider loading svg directly or via img tag instead of the background-image
 // approach used here.
 function FadingOverlay({ isVisible }: { isVisible: boolean }) {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
 
   const [showButton, setShowButton] = useState(false);
   const transitions = useTransition(isVisible, {
@@ -48,13 +48,13 @@ function FadingOverlay({ isVisible }: { isVisible: boolean }) {
             <div className="h-40 w-40 bg-[url('/images/loading-icon.svg')] bg-[length:100px] bg-center bg-no-repeat dark:bg-gray-900 dark:bg-[url('/images/loading-icon-darkmode.svg')]" />
             {showButton && (
               <>
-                <p>{__('misc.slow-loading-text')}</p>
+                <p>{t('misc.slow-loading-text')}</p>
                 <Button
                   className="w-20 min-w-min dark:bg-gray-800/80"
                   aria-label="Reload page"
                   onClick={() => window.location.reload()}
                 >
-                  {__('misc.reload')}
+                  {t('misc.reload')}
                 </Button>
               </>
             )}

web/src/components/TimeAverageToggle.tsx

@@ -1,6 +1,6 @@
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { useTranslation } from 'react-i18next';
 import { HiOutlineClock } from 'react-icons/hi2';
-import { useTranslation } from 'translation/translation';
 import { TimeAverages } from 'utils/constants';
 import { formatTimeRange } from 'utils/formatting';
 

web/src/components/TimeDisplay.tsx

@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 import { formatDate } from 'utils/formatting';
 import { selectedDatetimeIndexAtom, timeAverageAtom } from 'utils/state/atoms';
 

web/src/components/Toast.tsx

@@ -1,6 +1,6 @@
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { useState } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   title: string;
@@ -11,7 +11,7 @@ type Props = {
 };
 
 function Toast(props: Props) {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   const { title, description, toastAction, toastActionText } = props;
   const [open, setOpen] = useState(true);
   const handleToastAction = () => {
@@ -52,7 +52,7 @@ function Toast(props: Props) {
               </div>
               <div className="flex h-0 flex-1 ">
                 <ToastPrimitive.Close className="flex h-6 w-full items-center justify-center rounded border border-transparent px-3 py-2 text-sm font-medium shadow">
-                  {__('misc.dismiss')}
+                  {t('misc.dismiss')}
                 </ToastPrimitive.Close>
               </div>
             </div>

web/src/components/ToggleButton.tsx

@@ -10,10 +10,9 @@ import {
   Trigger as TooltipTrigger,
 } from '@radix-ui/react-tooltip';
 import { ReactElement, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 
-import { useTranslation } from '../translation/translation';
-
 interface ToggleButtonProperties {
   options: Array<{ value: string; translationKey: string }>;
   selectedOption: string;
@@ -29,7 +28,7 @@ export default function ToggleButton({
   onToggle,
   transparentBackground,
 }: ToggleButtonProperties): ReactElement {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   const [isToolTipOpen, setIsToolTipOpen] = useState(false);
   const onToolTipClick = () => {
     setIsToolTipOpen(!isToolTipOpen);
@@ -65,7 +64,7 @@ export default function ToggleButton({
             )}
           >
             <p className="sans flex-grow select-none capitalize dark:text-white">
-              {__(option.translationKey)}
+              {t(option.translationKey)}
             </p>
           </ToggleGroupItem>
         ))}
@@ -94,7 +93,7 @@ export default function ToggleButton({
                 side="bottom"
                 onPointerDownOutside={onToolTipClick}
               >
-                <div dangerouslySetInnerHTML={{ __html: __(tooltipKey) }} />
+                <div dangerouslySetInnerHTML={{ __html: t(tooltipKey) }} />
               </TooltipContent>
             </TooltipPortal>
           </TooltipRoot>

web/src/components/legend/Co2Legend.tsx

@@ -1,6 +1,6 @@
 import { useCo2ColorScale } from 'hooks/theme';
 import type { ReactElement } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 import { CarbonUnits } from 'utils/units';
 
 import HorizontalColorbar from './ColorBar';
@@ -25,12 +25,12 @@ function LegendItem({
 }
 
 export default function Co2Legend(): ReactElement {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   const co2ColorScale = useCo2ColorScale();
   return (
     <div>
       <LegendItem
-        label={__('legends.carbonintensity')}
+        label={t('legends.carbonintensity')}
         unit={CarbonUnits.GRAMS_CO2EQ_PER_WATT_HOUR}
       >
         <HorizontalColorbar colorScale={co2ColorScale} ticksCount={6} id={'co2'} />

web/src/components/legend/SolarLegend.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 
 import { solarColor } from '../../features/weather-layers/solar/utils';
 import HorizontalColorbar from './ColorBar';
@@ -24,10 +24,10 @@ function LegendItem({
 }
 
 export default function SolarLegend(): ReactElement {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   return (
     <div>
-      <LegendItem label={__('legends.solarpotential')} unit="W/m²">
+      <LegendItem label={t('legends.solarpotential')} unit="W/m²">
         <HorizontalColorbar colorScale={solarColor} id="solar" ticksCount={5} />
       </LegendItem>
     </div>

web/src/components/legend/WindLegend.tsx

@@ -1,6 +1,6 @@
 import { windColor } from 'features/weather-layers/wind-layer/scales';
 import type { ReactElement } from 'react';
-import { useTranslation } from 'translation/translation';
+import { useTranslation } from 'react-i18next';
 
 import HorizontalColorbar from './ColorBar';
 
@@ -24,10 +24,10 @@ function LegendItem({
 }
 
 export default function WindLegend(): ReactElement {
-  const { __ } = useTranslation();
+  const { t } = useTranslation();
   return (
     <div>
-      <LegendItem label={__('legends.windpotential')} unit="m/s">
+      <LegendItem label={t('legends.windpotential')} unit="m/s">
         <HorizontalColorbar colorScale={windColor} id="wind" ticksCount={6} />
       </LegendItem>
     </div>

web/src/components/modals/OnboardingModal.tsx

@@ -1,35 +1,34 @@
+import { TFunction } from 'i18next';
 import { useAtom } from 'jotai';
 import { resolvePath, useSearchParams } from 'react-router-dom';
 import { hasOnboardingBeenSeenAtom } from 'utils/state/atoms';
 
 import Modal, { Page } from './OnboardingModalInner';
 
-type TranslationFunction = (key: string, ...arguments_: string[]) => string;
-
 interface ViewContentProps {
-  __: TranslationFunction;
+  t: TFunction;
   translationKey: string;
   isDangerouslySet?: boolean;
 }
 
 const HEADER_STYLE = 'mb-2 px-2 text-base font-semibold sm:text-lg sm:mb-4';
 const BODY_STYLE = 'text-sm px-4 sm:text-base pb-4';
 
-function ViewContent({ __, translationKey, isDangerouslySet = false }: ViewContentProps) {
+function ViewContent({ t, translationKey, isDangerouslySet = false }: ViewContentProps) {
   return (
     <>
       <div>
-        <h2 className={HEADER_STYLE}>{__(`${translationKey}.header`)}</h2>
+        <h2 className={HEADER_STYLE}>{t(`${translationKey}.header`)}</h2>
       </div>
       {isDangerouslySet ? (
         <p
           dangerouslySetInnerHTML={{
-            __html: __(`${translationKey}.text`),
+            __html: t(`${translationKey}.text`),
           }}
           className={BODY_STYLE}
         ></p>
       ) : (
-        <div className={BODY_STYLE}>{__(`${translationKey}.text`)}</div>
+        <div className={BODY_STYLE}>{t(`${translationKey}.text`)}</div>
       )}
     </>
   );
@@ -39,50 +38,38 @@ const views: Page[] = [
   {
     headerImage: resolvePath('images/electricitymaps-icon.svg'),
     isMainTitle: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view1" isDangerouslySet />
+    renderContent: (t) => (
+      <ViewContent t={t} translationKey="onboarding-modal.view1" isDangerouslySet />
     ),
   },
   {
     headerImage: resolvePath('images/onboarding/mapExtract'),
     hasWebp: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view2" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view2" />,
   },
   {
     headerImage: resolvePath('images/onboarding/exchangeArrows.gif'),
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view3" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view3" />,
   },
   {
     headerImage: resolvePath('images/onboarding/switchViews'),
     hasWebp: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view4" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view4" />,
   },
   {
     headerImage: resolvePath('images/onboarding/switchEmissions'),
     hasWebp: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view5" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view5" />,
   },
   {
     headerImage: resolvePath('images/onboarding/pastData'),
     hasWebp: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view6" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view6" />,
   },
   {
     headerImage: resolvePath('images/onboarding/splitLayers'),
     hasWebp: true,
-    renderContent: (__) => (
-      <ViewContent __={__} translationKey="onboarding-modal.view7" />
-    ),
+    renderContent: (t) => <ViewContent t={t} translationKey="onboarding-modal.view7" />,
   },
 ];