[web] interviews: use useI18nRouter and useI18nPathname for i18n routing (#1366)

apps/web/src/components/guides/cover/GuidesListWithCategory.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import { last, reduce } from 'lodash-es';
-import { usePathname, useRouter } from 'next/navigation';
 
 import { useAuthSignInUp } from '~/hooks/user/useAuthFns';
 
@@ -8,6 +7,8 @@ import type { GuideCardMetadataWithCompletedStatus } from '~/components/guides/t
 import Heading from '~/components/ui/Heading';
 import { themeTextColor } from '~/components/ui/theme';
 
+import { useI18nPathname, useI18nRouter } from '~/next-i18nostic/src';
+
 import GuidesCountLabel from './GuidesCountLabel';
 import GuidesList from './GuidesList';
 import GuideReadingTimeLabel from './GuidesReadingTimeLabel';
@@ -24,8 +25,8 @@ type Props = Readonly<{
 }>;
 
 export default function GuidesListWithCategory({ guideItems }: Props) {
-  const router = useRouter();
-  const pathname = usePathname();
+  const router = useI18nRouter();
+  const { pathname } = useI18nPathname();
   const user = useUser();
   const { signInUpHref } = useAuthSignInUp();
   const { addQueryParamToPath, markGuideAsCompleted, markGuideAsNotCompleted } =

apps/web/src/components/interviews/guides/InterviewsGuideCard.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { usePathname, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import {
   RiArrowDownSLine,
@@ -30,6 +29,8 @@ import {
   themeTextSubtleColor,
 } from '~/components/ui/theme';
 
+import { useI18nPathname, useI18nRouter } from '~/next-i18nostic/src';
+
 import { useUser } from '@supabase/auth-helpers-react';
 
 type GuidesListProps = Readonly<{
@@ -113,8 +114,8 @@ export default function InterviewsGuideCard({
 }: Props) {
   const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
-  const router = useRouter();
-  const pathname = usePathname();
+  const router = useI18nRouter();
+  const { pathname } = useI18nPathname();
   const user = useUser();
   const { signInUpHref } = useAuthSignInUp();
   const { addQueryParamToPath, markGuideAsCompleted, markGuideAsNotCompleted } =

apps/web/src/components/interviews/questions/listings/items/QuestionsUnifiedListWithFiltersAndProgress.tsx

@@ -1,4 +1,3 @@
-import { usePathname, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 
 import { trpc } from '~/hooks/trpc';
@@ -14,6 +13,7 @@ import {
   useMutationQuestionProgressDelete,
 } from '~/db/QuestionsProgressClient';
 import { hashQuestion } from '~/db/QuestionsUtils';
+import { useI18nPathname, useI18nRouter } from '~/next-i18nostic/src';
 
 import QuestionsUnifiedListWithFilters from './QuestionsUnifiedListWithFilters';
 import useQuestionsWithCompletionStatus from './useQuestionsWithCompletionStatus';
@@ -48,8 +48,8 @@ export default function QuestionsUnifiedListWithFiltersAndProgress({
   const intl = useIntl();
   const { showToast } = useToast();
   const user = useUser();
-  const router = useRouter();
-  const pathname = usePathname();
+  const router = useI18nRouter();
+  const { pathname } = useI18nPathname();
   const { signInUpHref } = useAuthSignInUp();
   const [
     automaticallyMarkCompleteQuestion,

apps/web/src/components/interviews/questions/listings/slideout/InterviewsQuestionsListSlideOut.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { useRouter } from 'next/navigation';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, useState } from 'react';
 import { RiFilterLine } from 'react-icons/ri';
@@ -20,6 +19,8 @@ import Button from '~/components/ui/Button';
 import SlideOut from '~/components/ui/SlideOut';
 import { themeBackgroundGlimmerColor } from '~/components/ui/theme';
 
+import { useI18nRouter } from '~/next-i18nostic/src';
+
 import InterviewsQuestionsListSlideOutContents from './InterviewsQuestionsListSlideOutContents';
 import QuestionListingFilterButtonBadgeWrapper from '../filters/QuestionListingFilterButtonBadgeWrapper';
 import { questionListFilterNamespace } from '../../common/QuestionHrefUtils';
@@ -70,7 +71,7 @@ function InterviewsQuestionsListSlideOutImpl({
   );
   const isMobile = useMediaQuery('(max-width: 640px)');
   const isDesktop = useMediaQuery('(min-width: 1367px)');
-  const router = useRouter();
+  const router = useI18nRouter();
   const [currentListType, setCurrentListType] =
     useState<QuestionListTypeWithLabel>(initialListType);
   const filterNamespace = questionListFilterNamespace(currentListType);

apps/web/src/components/interviews/questions/listings/slideout/InterviewsQuestionsListSlideOutContents.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import {
   RiArrowDownSLine,
@@ -29,6 +28,8 @@ import Text from '~/components/ui/Text';
 import TextInput from '~/components/ui/TextInput';
 import { themeBackgroundCardColor } from '~/components/ui/theme';
 
+import { useI18nRouter } from '~/next-i18nostic/src';
+
 import InterviewsQuestionsListSlideOutQuestionList from './InterviewsQuestionsListSlideOutQuestionList';
 import QuestionListingFilterButtonBadgeWrapper from '../filters/QuestionListingFilterButtonBadgeWrapper';
 import QuestionListFilterFormats from '../filters/QuestionListingFilterFormats';
@@ -210,7 +211,7 @@ export default function InterviewsQuestionsListSlideOutContents({
   onClickQuestion,
 }: Props) {
   const intl = useIntl();
-  const router = useRouter();
+  const router = useI18nRouter();
   const { userProfile } = useUserProfile();
 
   const [showFilters, setShowFilters] = useState(false);

apps/web/src/components/interviews/recommended/InterviewsRecommendedPrepStrategyPopover.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { usePathname } from 'next/navigation';
 import { FaCheck } from 'react-icons/fa6';
 import { RiArrowDownSLine, RiArrowRightLine } from 'react-icons/ri';
 
@@ -23,6 +22,7 @@ import Tooltip from '~/components/ui/Tooltip';
 import { getGuideCompletionCount } from '~/db/guides/GuidesUtils';
 import type { QuestionProgress } from '~/db/QuestionsProgressTypes';
 import { categorizeQuestionsProgress } from '~/db/QuestionsUtils';
+import { useI18nPathname } from '~/next-i18nostic/src';
 
 import { useUser } from '@supabase/auth-helpers-react';
 
@@ -98,7 +98,7 @@ function InterviewsRecommendedPrepStrategyPopoverContents({
     },
   ];
 
-  const pathname = usePathname();
+  const { pathname } = useI18nPathname();
 
   return (
     <>