Use i18next-browser-languagedetector (fixes #170)

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'node_modules',
     'next.config.js',
     'i18next-parser.config.js',
+    'next-i18next.config.js',
     'env-config.*',
     '.*' ],
   rules: {

components/blocks/RawContent.tsx

@@ -2,7 +2,7 @@ import { Card } from '@components/elements/cards';
 import { OverflowScroll } from '@components/elements/styled-divs';
 import { Button } from '@components/elements/button';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 interface IRawContentProps {
   content: unknown;
@@ -19,8 +19,8 @@ export const RawContent = ({ content, title }: IRawContentProps) => {
 };
 
 export const RawContentBtnLabel = () => {
-  const { i18n } = useTranslation();
-  return <>{i18n.t('components.raw_content.label')}</>;
+  const { t } = useTranslation();
+  return <>{t('components.raw_content.label')}</>;
 };
 
 export const RawContentBtn = (props: IRawContentProps) => {

components/blocks/copy-button.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import copy from 'copy-to-clipboard';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { IoCopy } from 'react-icons/io5';
 import { IconContext } from 'react-icons';
 import styled from 'styled-components';
@@ -20,16 +20,15 @@ export const CopyButton = ({
   color?: string;
   copyMessage?: string;
 }) => {
-  const { i18n } = useTranslation();
-
+  const { t } = useTranslation();
   const { setCopiedMessage, message } = useCopiedMessage();
   const handleCopy = (e) => {
     e.cancelBubble = true;
     e.stopPropagation();
     e.preventDefault();
     e.target.focus();
     copy(toCopy);
-    setCopiedMessage(copyMessage ?? i18n.t('copy.copied_to_the_clipboard'));
+    setCopiedMessage(copyMessage ?? t('copy.copied_to_the_clipboard'));
   };
 
   return (

components/blocks/error.tsx

@@ -1,7 +1,8 @@
-import i18n from '../../i18n';
+import { useTranslation } from 'next-i18next';
 
-const ErrorPage = (props: { message?: string }) => (
-  <div>{(props && props.message) || i18n.t('errors.general_error')}</div>
-);
+const ErrorPage = (props: { message?: string }) => {
+  const { t } = useTranslation();
+  return <div>{(props && props.message) || t('errors.general_error')}</div>;
+};
 
 export default ErrorPage;

components/blocks/language-selector.tsx

@@ -1,8 +1,7 @@
-import { useTranslation } from 'react-i18next';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback } from 'react';
 import { HiLanguage } from 'react-icons/hi2';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import router from 'next/router';
 
 type LanguageOption = {
   code: string;
@@ -16,23 +15,10 @@ const languages: LanguageOption[] = [
 ];
 
 const LanguageSelector = ({ bg = 'transparent', size, color }: { bg?: string; size?: string; color?: string }) => {
-  const { i18n } = useTranslation();
-
-  const languageDetector = useMemo(() => new LanguageDetector(), []);
-
-  useEffect(() => {
-    languageDetector.init();
-    const lng = languageDetector.detect();
-    i18n.changeLanguage(typeof lng === 'string' ? lng : lng[0]);
-  }, [i18n, languageDetector]);
-
-  const handleLanguageChange = useCallback(
-    (languageCode: string) => {
-      i18n.changeLanguage(languageCode);
-      languageDetector.cacheUserLanguage(languageCode);
-    },
-    [i18n, languageDetector]
-  );
+  const handleLanguageChange = useCallback((languageCode: string) => {
+    const { pathname, query } = router;
+    router.push({ pathname, query }, router.asPath, { locale: languageCode });
+  }, []);
 
   return (
     <Menu>

components/blocks/loader.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
-
-import i18n from '../../i18n';
+import { useTranslation } from 'next-i18next';
 
 interface ILoaderProps {
   visible: boolean;
 }
 
-export const Loader = ({ visible }: ILoaderProps) => (
-  <AppLoader visible={visible}>
-    <LoaderContainer>
-      <LogoContainer>
-        <img src="/images/logo.svg" alt="Vocdoni Logo" />
-      </LogoContainer>
+export const Loader = ({ visible }: ILoaderProps) => {
+  const { t } = useTranslation();
+  return (
+    <AppLoader visible={visible}>
+      <LoaderContainer>
+        <LogoContainer>
+          <img src="/images/logo.svg" alt="Vocdoni Logo" />
+        </LogoContainer>
 
-      <TextContainer>{i18n.t('dashboard.loading')}</TextContainer>
-    </LoaderContainer>
-  </AppLoader>
-);
+        <TextContainer>{t('dashboard.loading')}</TextContainer>
+      </LoaderContainer>
+    </AppLoader>
+  );
+};
 
 const LogoContainer = styled.div`
   width: 100px;

components/blocks/process_time_left.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { localizedDateDiff } from '@lib/date';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { ItemDate } from '@components/elements/styled-divs';
 import { ElectionStatus } from '@vocdoni/sdk';
 
@@ -13,34 +13,33 @@ export const ProcessTimeLeft = ({
   startDate: Date;
   endDate: Date;
 }) => {
-  const { i18n } = useTranslation();
-
+  const { t } = useTranslation();
   let date: string;
   switch (status) {
     case ElectionStatus.ONGOING: {
-      date = localizedDateDiff(endDate);
+      date = localizedDateDiff(endDate, t);
       break;
     }
 
     case ElectionStatus.RESULTS: {
       if (new Date(endDate) < new Date()) {
-        date = i18n.t('dashboard.process_ended');
-      } else date = localizedDateDiff(endDate);
+        date = t('dashboard.process_ended');
+      } else date = localizedDateDiff(endDate, t);
       break;
     }
 
     case ElectionStatus.ENDED:
-      date = i18n.t('dashboard.process_ended');
+      date = t('dashboard.process_ended');
       break;
 
     case ElectionStatus.PAUSED:
     case ElectionStatus.UPCOMING:
       if (new Date(startDate) > new Date() && status === ElectionStatus.PAUSED) {
-        date = i18n.t('dashboard.process_paused');
+        date = t('dashboard.process_paused');
         break;
       }
 
-      date = localizedDateDiff(startDate);
+      date = localizedDateDiff(startDate, t);
       break;
   }
 

components/blocks/question-results.tsx

@@ -2,7 +2,7 @@
 import { Spacer } from '@components/elements-v2/spacer';
 import { Text } from '@components/elements-v2/text';
 import { theme } from '@theme/global';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import styled from 'styled-components';
 import { useIsMobile } from '@hooks/use-window-size';
 import { BigNumber } from 'ethers';
@@ -29,8 +29,7 @@
 };
 
 export const QuestionResults = (props: QuestionsResultsProps) => {
-  const { i18n } = useTranslation();
-  // const [sortedChoices, setSortedChoices] = useState<ChoiceResult[]>([]);
+  const { t } = useTranslation(); // const [sortedChoices, setSortedChoices] = useState<ChoiceResult[]>([]);
   // const [hasWinner, setHasWinner] = useState<boolean>(false);
   const isMobile = useIsMobile();
   // const [showResults, setSetShowResults] = useState(false);
@@ -74,7 +73,7 @@
     (status === ElectionStatus.ENDED || status === ElectionStatus.RESULTS || liveResults) &&
     props.results !== undefined;
 
   const decimals = (election.meta as any)?.token?.decimals || 0;
 
   //Calculate voting weight
   let totalWeightCount = BigNumber.from(0);
@@ -90,7 +89,7 @@
           <Row gutter="xs">
             <Col xs={12}>
               <Text size="md" color="primary" weight="bold">
-                {i18n.t('vote.results_question', { index: props.index + 1 })}
+                {t('vote.results_question', { index: props.index + 1 })}
               </Text>
             </Col>
             <Col xs={12}>
@@ -134,7 +133,7 @@
                         </Text>
                         <Text size="sm" color="dark-gray" weight="regular">
                           <BreakWord>
-                            {i18n.t('vote.vote_count', {
+                            {t('vote.vote_count', {
                               count: getResults(choice.votes, decimals).toString() as never,
                             })}
                           </BreakWord>
@@ -158,8 +157,8 @@
                           <Col>
                             <Text size="sm" color="dark-gray" weight="regular">
                               <BreakWord>
-                                {i18n.t('vote.vote_count', {
+                                {t('vote.vote_count', {
                                   count: getResults(choice.votes, decimals).toString() as any,
                                 })}
                               </BreakWord>
                             </Text>
@@ -172,8 +171,8 @@
                     <Col xs={12} md={6} justify="end">
                       <Text size={isMobile ? 'sm' : 'xl'} color="dark-gray" align="right">
                         {status !== ElectionStatus.ENDED && !liveResults
-                          ? i18n.t('vote.no_results_live')
-                          : i18n.t('vote.loading_results')}
+                          ? t('vote.no_results_live')
+                          : t('vote.loading_results')}
                       </Text>
                     </Col>
                   )}

components/elements/inputs.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled, { DefaultTheme, StyledComponentProps } from 'styled-components';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { FiSearch } from 'react-icons/fi';
 
 export interface IInputProps {
@@ -42,7 +42,7 @@ enum InputType {
 }
 
 export const InputPassword = (props: StyledComponentProps<'input', DefaultTheme, IInputProps, never>) => {
-  const { i18n } = useTranslation();
+  const { t } = useTranslation();
   const [inputType, setInputType] = useState<InputType>(InputType.Password);
 
   const handleClick = () => {
@@ -55,7 +55,7 @@ export const InputPassword = (props: StyledComponentProps<'input', DefaultTheme,
       <Input {...props} type={inputType} />
 
       <ShowContainer onClick={handleClick}>
-        {inputType === InputType.Password ? i18n.t('input.show') : i18n.t('input.hide')}
+        {inputType === InputType.Password ? t('input.show') : t('input.hide')}
       </ShowContainer>
     </InputContainer>
   );

components/pages/app/footer.tsx

@@ -2,45 +2,44 @@ import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import Link from 'next/link';
 import { HOME_PATH } from '@const/routes';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 export const Footer = () => {
   const theme = useTheme();
-  const { i18n } = useTranslation();
-
+  const { t } = useTranslation();
   const LINKS: HeaderLink[] = [
     {
       url: 'https://blog.vocdoni.io/',
-      name: i18n.t('links.blog'),
+      name: t('links.blog'),
       external: true,
       logged: true,
       guest: true,
     },
     {
       url: 'https://developer.vocdoni.io',
-      name: i18n.t('links.docs'),
+      name: t('links.docs'),
       external: true,
       logged: true,
       guest: true,
     },
     {
       url: 'https://discord.gg/sM7UhAGY53',
-      name: i18n.t('links.help'),
+      name: t('links.help'),
       external: true,
       logged: true,
       guest: true,
     },
     {
       // url: ABOUT_PATH,
       url: 'https://vocdoni.io',
-      name: i18n.t('links.about'),
+      name: t('links.about'),
       external: false,
       logged: false,
       guest: true,
     },
     {
       url: 'https://discord.gg/sQCxgYs',
-      name: i18n.t('links.support'),
+      name: t('links.support'),
       external: true,
       logged: true,
       guest: false,

components/pages/app/header.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Link from 'next/link';
 import { Unless } from 'react-if';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import {
   HOME_PATH,
@@ -33,7 +33,7 @@ interface IHeaderProps {
 export const Header = ({ children }: IHeaderProps) => {
   const isMobile = useIsMobile();
   const [openMobileMenu, setOpenMobileMenu] = useState(false);
-  const { i18n } = useTranslation();
+  const { t } = useTranslation();
   const env = process.env.VOCDONI_ENVIRONMENT;
 
   let headerUrl;
@@ -51,38 +51,38 @@ export const Header = ({ children }: IHeaderProps) => {
 
   const LINKS: HeaderLink[] = [
     {
-      name: i18n.t('links.organizations'),
+      name: t('links.organizations'),
       url: ORGANIZATIONS_PATH,
     },
     {
-      name: i18n.t('links.processes'),
+      name: t('links.processes'),
       url: PROCESSES_PATH,
     },
     {
-      name: i18n.t('links.blocks'),
+      name: t('links.blocks'),
       url: BLOCKS_PATH,
     },
     {
-      name: i18n.t('links.transactions'),
+      name: t('links.transactions'),
       url: TRANSACTIONS_PATH,
     },
     {
-      name: i18n.t('links.validators'),
+      name: t('links.validators'),
       url: VALIDATORS_PATH,
     },
     {
-      name: i18n.t('links.stats'),
+      name: t('links.stats'),
       url: STATS_PATH,
     },
     {
-      name: i18n.t('links.tools'),
+      name: t('links.tools'),
       url: TOOLS_PATH,
     },
   ];
 
   const RIGHT_LINKS: HeaderLink[] = [
     {
-      name: i18n.t('links.verify_vote'),
+      name: t('links.verify_vote'),
       url: VERIFY,
     },
   ];