Replace react-i18next imports with next-i18next

CONTRIBUTING.md

@@ -127,7 +127,7 @@ A common way to sort the imports in the file is by their source: `external`, `ab
 
 ```tsx
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import Nav from 'components/layout/Nav'
 import Layout from 'components/layout/Layout'
@@ -418,7 +418,7 @@ Usage of translation hook `useTranslation` is preferred over usage of `<Trans />
 #### Usage in components
 
 ```tsx
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 export default function CustomComponent() {
   const { t } = useTranslation()

package.json

@@ -23,7 +23,6 @@
     "formik": "^2.2.6",
     "highcharts": "^9.0.1",
     "highcharts-react-official": "^3.0.0",
-    "i18next": "^19.8.4",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
     "next": "^10.0.5",

src/common/form/README.md

@@ -5,7 +5,7 @@
 ```tsx
 import React from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Grid, TextField, Button } from '@material-ui/core'
 
 import { AlertStore } from 'stores/AlertStore'

src/common/form/validation.ts

@@ -1,6 +1,6 @@
 import { setLocale } from 'yup'
 import { TOptions } from 'i18next'
-import { TFunction } from 'react-i18next'
+import { TFunction } from 'next-i18next'
 
 export type TranslatableField = (string | undefined) | { key: string; values?: TOptions }
 

src/components/about/AboutPage.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@material-ui/core'
 import Layout from 'components/layout/Layout'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import styles from './about.module.scss'
 

src/components/auth/changePassword/ChangePasswordPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Typography, Grid } from '@material-ui/core'
 
 import SubmitButton from 'components/common/form/SubmitButton'

src/components/auth/forgottenPassword/ForgottenPasswordPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/auth/login/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Grid } from '@material-ui/core'
 import { AlertStore } from 'stores/AlertStore'
 

src/components/auth/login/LoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { signIn } from 'next-auth/client'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container, Grid, Box, Button } from '@material-ui/core'
 
 import Link from 'components/common/Link'

src/components/auth/profile/ProfilePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import {
   Avatar,
   Box,

src/components/auth/register/RegisterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/common/form/FormTextField.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormikValues } from 'formik'
 import { TextField, TextFieldProps } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { translateError } from 'common/form/useForm'
 import { TranslatableField } from 'common/form/validation'

src/components/common/form/SubmitButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 import { Button, ButtonProps, CircularProgress, CircularProgressProps } from '@material-ui/core'
 

src/components/index/helpers/Typewriter.tsx

@@ -1,5 +1,5 @@
 import Typewriter from 'typewriter-effect'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { Typography } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'

src/components/index/helpers/chart/TeamPie.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 import { teamPieData, teamPieOptions, TeamPieItem } from 'components/index/helpers/chart/pieData'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import handleViewport from 'react-in-viewport'
 
 export type TeamPieProps = {

src/components/index/sections/ActivitySection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) =>

src/components/index/sections/Jumbotron.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { Grid, Typography } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'

src/components/index/sections/ProblemsToSolveSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import CommissionsIcon from '../icons/problems-to-solve-icons/CommissionsIcon'

src/components/index/sections/SupportUsSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import FinancesIcon from '../icons/support-us-icons/FinancesIcon'

src/components/index/sections/TeamChartSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography, Box } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import TeamPie from 'components/index/helpers/chart/TeamPie'

src/components/index/sections/TeamSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) =>

src/components/layout/LocaleButton.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Button } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 export default function LocaleMenu() {
   const router = useRouter()

src/components/layout/LocaleMenu.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Button, Menu, MenuItem } from '@material-ui/core'
 
 export default function LocaleMenu() {

src/components/layout/LocaleSwitcher.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Box, Button, ButtonGroup } from '@material-ui/core'
 
 export default function LocaleSwitcher() {

src/components/layout/nav/MainNavMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Grid } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
 import LinkButton from 'components/common/LinkButton'

src/components/layout/nav/MobileNav.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { useSession } from 'next-auth/client'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import { SwipeableDrawer, Hidden, Box, Grid } from '@material-ui/core'
 

src/components/layout/nav/PrivateMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/client'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { AccountCircle } from '@material-ui/icons'
 import { Avatar, Grid, IconButton, Menu, MenuItem } from '@material-ui/core'
 

src/components/layout/nav/PublicMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Grid } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
 import LinkButton from 'components/common/LinkButton'

src/components/support-form/Actions.tsx

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react'
 import { Button, Grid } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 type ActionsProps = {
   nextLabel: string

src/components/support-form/SupportPage.tsx

@@ -1,5 +1,5 @@
 import { FormikErrors } from 'formik'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import React, { useEffect, useState } from 'react'
 import { makeStyles, Theme, createStyles, withStyles } from '@material-ui/core/styles'
 import { Container, Stepper, Step, StepLabel, StepConnector, Hidden, Grid } from '@material-ui/core'

src/components/support-form/steps/AdditionalQuestions.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { FormikProps } from 'formik'
 import {
   Checkbox,

src/components/support-form/steps/GeneralInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import {
   Checkbox,
   FormControl,

src/components/support-form/steps/Newsletter.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { FormikProps } from 'formik'
 import { Checkbox, FormControl, FormControlLabel, FormLabel } from '@material-ui/core'
 

src/components/support-form/steps/Roles.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import {
   Checkbox,
   FormControl,

src/components/support-form/steps/ThankYou.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { createStyles, Grid, makeStyles, Theme, Typography } from '@material-ui/core'
 
 const useStyles = makeStyles((theme: Theme) =>