refactor: Replace react-i18next imports with next-i18next (#1844)

* refactor: Replace react-i18next imports with next-i18next
next-i18n offers SSR support. Although we don't need it specifically for every component it is better to prefer it in order to maintain consistency

* eslint: Add rule to prevent react-i18next imports

.eslintrc.js

@@ -45,5 +45,9 @@ module.exports = {
         endOfLine: 'auto',
       },
     ],
+    'no-restricted-imports': ["error", {
+      "name": "react-i18next",
+      "message": "Please use next-i18next"
+    }]
   },
 }

src/common/hooks/affiliates.ts

@@ -3,7 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { endpoints } from 'service/apiEndpoints'
 import { authQueryFnFactory } from 'service/restRequests'
 import { AlertStore } from 'stores/AlertStore'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { DonationResponse } from 'gql/donations'
 import { AxiosError, AxiosResponse } from 'axios'
 import {

src/components/client/auth/profile/AffiliateProgramTab.tsx

@@ -1,14 +1,13 @@
 import { Box, Button, CircularProgress, Link, TableBody, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { useTranslation } from 'react-i18next'
 import ProfileTab from './ProfileTab'
 import { ProfileTabs } from './tabs'
 import {
   useCancelGuaranteedDonationMutation,
   useGetAffiliateData,
   useJoinAffiliateProgramMutation,
 } from 'common/hooks/affiliates'
-import { TFunction } from 'next-i18next'
+import { TFunction, useTranslation } from 'next-i18next'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import theme from 'common/theme'
 import { useMemo } from 'react'

src/components/client/notifications/CampaignSubscribeModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import * as yup from 'yup'
-import { Trans } from 'react-i18next'
+import { Trans } from 'next-i18next'
 import { useTranslation } from 'next-i18next'
 import { useMutation } from '@tanstack/react-query'
 import { useSession } from 'next-auth/react'

src/components/client/notifications/GeneralSubscribeModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import * as yup from 'yup'
-import { Trans } from 'react-i18next'
+import { Trans } from 'next-i18next'
 import { useTranslation } from 'next-i18next'
 import { useMutation } from '@tanstack/react-query'
 import { useSession } from 'next-auth/react'

src/components/client/notifications/SubscriptionPage.tsx

@@ -1,4 +1,4 @@
-import { useTranslation, Trans } from 'react-i18next'
+import { useTranslation, Trans } from 'next-i18next'
 import Layout from '../layout/Layout'
 import PodkrepiLogo from 'components/common/brand/PodkrepiLogo'
 import { useRouter } from 'next/router'

src/components/common/CookieConsentPopup.tsx

@@ -1,5 +1,5 @@
 import CookieConsent from 'react-cookie-consent'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import theme from 'common/theme'