Upgrade next-18next and try to make it work

docs/1-internationalization.md

@@ -13,7 +13,7 @@ When using translations in a React component, default to using the [useTranslati
 
 ```jsx
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 export function MyComponent() {
   const { t } = useTranslation()
@@ -32,7 +32,7 @@ For simple interpolation, follow this pattern:
 
 ```jsx
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 export function MyComponent() {
   const { t } = useTranslation()

packages/web/components/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { UserBadgeFragmentFragment as Badge, BadgeType } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type Props = {

packages/web/components/Dashboard/Filters/Filters.tsx

@@ -7,7 +7,7 @@ import LanguageSelect from './LanguageSelect'
 import TopicSelect from './TopicSelect'
 import useToggle from '@/hooks/useToggle'
 import useUILanguage from '@/hooks/useUILanguage'
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
 
 export type PostQueryVarsType = {

packages/web/components/Dashboard/Filters/LanguageSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import MultiSelect from '@/components/MultiSelect'
 import { LanguagesQuery } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   languagesData: LanguagesQuery | undefined

packages/web/components/Dashboard/Filters/SearchInput.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import _ from 'lodash'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   defaultValue: string

packages/web/components/Dashboard/Filters/TopicSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import MultiSelect from '@/components/MultiSelect'
 import { Topic } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   topics: Topic[] | undefined

packages/web/components/Dashboard/MyFeed/MyFeed.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { toast } from 'react-toastify'
 import _ from 'lodash'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { gtag } from '@/components/GoogleAnalytics'
 import Pagination from '@/components/Pagination'
 import LoadingWrapper from '@/components/LoadingWrapper'

packages/web/components/Dashboard/MyPosts/MyPosts.tsx

@@ -6,7 +6,7 @@ import {
   User as UserType,
   usePostsQuery,
 } from '@/generated/graphql'
-import { useTranslation, Trans } from '@/config/i18n'
+import { useTranslation, Trans } from 'next-i18next'
 import TranslationLink from '@/components/TranslationLink'
 import LoadingSpinner from '@/components/Icons/LoadingSpinner'
 import PostCard from '../PostCard'

packages/web/components/Dashboard/Nav/Nav.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
 
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import { navConstants } from './nav-constants'
 import theme from '@/theme'
 import {

packages/web/components/Dashboard/Post/Post.tsx

@@ -23,7 +23,7 @@ import Button, { ButtonVariant } from '@/components/Button'
 import theme from '@/theme'
 import PostBodyStyles from '@/components/PostBodyStyles'
 import InlineFeedbackPopover, { PendingThreadData } from '@/components/InlineFeedbackPopover'
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import PostHeader from '@/components/PostHeader'
 import ConfirmationModal from '@/components/Modals/ConfirmationModal'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'

packages/web/components/Dashboard/Post/PostAuthorCard.tsx

@@ -7,7 +7,7 @@ import {
   useUnfollowUserMutation,
   useFollowingUsersQuery,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { languageNameWithDialect } from '@/utils/languages'
 import Button, { ButtonVariant } from '@/components/Button'
 import LevelGauge from '@/components/LevelGauge'

packages/web/components/Dashboard/Post/PostComment.tsx

@@ -6,7 +6,7 @@ import {
   useDeletePostCommentMutation,
   PostCommentFragmentFragment as PostCommentType,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import EditableMarkdown from '@/components/EditableMarkdown'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'

packages/web/components/Dashboard/Post/PostComments.tsx

@@ -12,7 +12,7 @@ import {
   PostPageQueryVariables,
   LanguageLevel,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import theme from '@/theme'
 import PostComment from './PostComment'

packages/web/components/Dashboard/Post/helpers.ts

@@ -1,5 +1,5 @@
 import { PostClapFragmentFragment as PostClapType } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { isChildOf } from '@/utils'
 
 // Elements whose boundaries a comment can cross

packages/web/components/Dashboard/PostCard/PostCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { formatShortDate } from '@/utils/date'
 import {
   PostStatus as PostStatusType,

packages/web/components/Dashboard/Profile/PostList.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation, Trans } from '@/config/i18n'
+import { useTranslation, Trans } from 'next-i18next'
 import {
   PostCardFragmentFragment as PostType,
   UserWithLanguagesFragmentFragment as UserType,

packages/web/components/Dashboard/Profile/Profile.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   ProfileUserFragmentFragment as UserType,
   PostCardFragmentFragment as PostCardType,

packages/web/components/Dashboard/Profile/ProfileCard.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FacebookIcon from '@/components/Icons/FacebookIcon'
 import InstagramIcon from '@/components/Icons/InstagramIcon'
 import YoutubeIcon from '@/components/Icons/YoutubeIcon'

packages/web/components/Dashboard/Profile/ProfileStats.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import chroma from 'chroma-js'
 
 import differenceInCalendarWeeks from 'date-fns/differenceInCalendarWeeks'

packages/web/components/Dashboard/Settings/BioForm.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
 import { sanitize } from '@/utils'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'

packages/web/components/Dashboard/Settings/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 const Breadcrumbs: React.FC = () => {

packages/web/components/Dashboard/Settings/DetailsForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback } from 'react'
 import { useForm } from 'react-hook-form'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'

packages/web/components/Dashboard/Settings/InterestsForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   TopicFragmentFragment as TopicType,
   UserInterestFragmentFragment as UserInterestType,

packages/web/components/Dashboard/Settings/LanguagesForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   LanguageFragmentFragment as LanguageType,
   LanguageRelation as LanguageRelationType,

packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   DigestEmailConfiguration as DigestEmailConfigurationType,
   useUpdateUserConfigurationMutation,

packages/web/components/Dashboard/Settings/SettingsNav.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import NavLink from '@/components/NavLink'
 import theme from '@/theme'
 

packages/web/components/Dashboard/Settings/SocialForm.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
 import { ApolloError } from '@apollo/client'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
 import Button, { ButtonVariant } from '@/components/Button'

packages/web/components/Dashboard/Settings/SocialFormField.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FieldError, ValidationOptions } from 'react-hook-form'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FacebookIcon from '@/components/Icons/FacebookIcon'
 import GlobeIcon from '@/components/Icons/GlobeIcon'
 import InstagramIcon from '@/components/Icons/InstagramIcon'

packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import theme from '@/theme'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import UpdateCardFormModal from './UpdateCardFormModal'
 
 type CardOnFileProps = {

packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/generated/graphql'
 import Button from '@/components/Button'
 import SubscriptionPlanSelect from './SubscriptionPlanSelect'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type PaymentFormProps = {

packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Modal from '@/components/Modal'
 import PaymentForm from './PaymentForm'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type PaymentFormModalProps = {
   onClose: () => void

packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify'
 
 import Button, { ButtonVariant } from '@/components/Button'
 import { useConfirmationModal } from '@/components/Modals/ConfirmationModal'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   MembershipSubscriptionPeriod,
   UserWithSubscriptionFragmentFragment as UserType,

packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { MembershipSubscriptionPeriod } from '@/generated/graphql'
 import Select from '@/components/Select'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type SubscriptionPlanSelectProps = {
   selectedOption: MembershipSubscriptionPeriod

packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx

@@ -7,7 +7,7 @@ import {
   useUpdateSubscriptionPaymentMethodMutation,
 } from '@/generated/graphql'
 import Button from '@/components/Button'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type UpdateCardFormProps = {

packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Modal from '@/components/Modal'
 import UpdateCardForm from './UpdateCardForm'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type UpdateCardFormModalProps = {
   onClose: () => void

packages/web/components/Dashboard/Settings/UILanguageForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'

packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'

packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx

@@ -1,6 +1,6 @@
 import theme from '@/theme'
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import CheckmarkCircleIcon from '../Icons/CheckmarkCircleIcon'
 
 type FeatureProps = {

packages/web/components/InlineFeedbackPopover/Comment.tsx

@@ -15,7 +15,7 @@ import {
   useApplySuggestionMutation,
 } from '@/generated/graphql'
 import theme from '@/theme'
-import { Router, useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import EditableMarkdown from '@/components/EditableMarkdown'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'
 import { useConfirmationModal } from '@/components/Modals/ConfirmationModal'
@@ -28,6 +28,7 @@ import LevelGauge from '../LevelGauge'
 import UserAvatar from '../UserAvatar'
 import PremiumFeatureModal from '../Modals/PremiumFeatureModal'
 import { JOURNALY_PREMIUM_URL } from '@/constants'
+import { useRouter } from 'next/router'
 
 type CommentProps = {
   comment: CommentType
@@ -52,6 +53,7 @@ const Comment = ({
   currentContentInPost,
   postAuthorId,
 }: CommentProps) => {
+  const router = useRouter()
   const { t } = useTranslation('comment')
   const [isEditMode, setIsEditMode] = useState(false)
   const [updatingCommentBody, setUpdatingCommentBody] = useState(comment.body)
@@ -310,7 +312,7 @@ const Comment = ({
           featureExplanation={t('acceptSuggestionPremiumFeatureExplanation')}
           onAcknowledge={() => setDisplayPremiumFeatureModal(false)}
           onGoToPremium={() => {
-            Router.push(JOURNALY_PREMIUM_URL)
+            router.push(JOURNALY_PREMIUM_URL)
             setDisplayPremiumFeatureModal(false)
           }}
         />

packages/web/components/InlineFeedbackPopover/Thread.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   useCreateCommentMutation,
   useCreateThreadMutation,

packages/web/components/InterestFormField/InterestFormField.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/generated/graphql'
 import Button, { ButtonVariant } from '@/components/Button'
 import { OptionPills } from '@/components/MultiSelect'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import Select from '../Select'
 
 type Props = {

packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useSlate } from 'slate-react'
 
-import { useTranslation, Router } from '@/config/i18n'
+import { useTranslation, Router } from 'next-i18next'
 import BaseToolbarButton from './BaseToolbarButton'
 import { insertImage } from '../helpers'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'

packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx

@@ -30,7 +30,7 @@ import ToolbarButton from './ToolbarButton'
 import InsertImageButton from './InsertImageButton'
 import { isTableActive } from '../helpers'
 import SwitchToggle from '@/components/SwitchToggle'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import useIntersectionObserver from '@/hooks/userIntersectionObserver'
 
 type ToolbarProps = {