ECHO-487 Update react router to latest version

echo/frontend/package.json

@@ -67,7 +67,7 @@
     "react-markdown": "^9.1.0",
     "react-pdf": "^9.2.1",
     "react-qrcode-logo": "^3.0.0",
-    "react-router-dom": "^7.4.0",
+    "react-router": "^7.8.2",
     "react-transition-group": "^4.4.5",
     "recharts": "^2.15.1",
     "rehype-stringify": "^10.0.1",

echo/frontend/src/App.tsx

@@ -4,7 +4,7 @@ import "@mantine/dropzone/styles.css";
 
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router/dom";
 import { I18nProvider } from "./components/layout/I18nProvider";
 import { mainRouter, participantRouter } from "./Router";
 import { USE_PARTICIPANT_ROUTER } from "./config";

echo/frontend/src/Router.tsx

@@ -1,4 +1,4 @@
-import { Navigate, createBrowserRouter } from "react-router-dom";
+import { Navigate, createBrowserRouter } from "react-router";
 import {
   createLazyRoute,
   createLazyNamedRoute,

echo/frontend/src/components/aspect/AspectCard.tsx

@@ -2,7 +2,7 @@ import { Trans } from "@lingui/react/macro";
 import { cn, sanitizeImageUrl } from "@/lib/utils";
 import { Box, Button, LoadingOverlay, Paper, Stack, Text } from "@mantine/core";
 import { IconArrowsDiagonal } from "@tabler/icons-react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { I18nLink } from "@/components/common/i18nLink";
 import { useProjectById } from "@/components/project/hooks";
 

echo/frontend/src/components/aspect/hooks/useCopyAspect.tsx

@@ -1,7 +1,7 @@
 import { directus } from "@/lib/directus";
 import { readItem } from "@directus/sdk";
 import useCopyToRichText from "@/hooks/useCopyToRichText";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 interface Quote {
   quote_id: {

echo/frontend/src/components/aspect/hooks/useCopyQuote.ts

@@ -1,7 +1,7 @@
 import { directus } from "@/lib/directus";
 import { readItem } from "@directus/sdk";
 import useCopyToRichText from "@/hooks/useCopyToRichText";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { string } from "zod";
 
 // Define types inline since the .d.ts file is not a module
@@ -20,7 +20,7 @@ type QuoteWithConversation = {
 };
 
 export const useCopyQuote = () => {
-  const { language, projectId } = useParams();
+  const { language, projectId } = useParams<{ language: string; projectId: string }>();
   const { copied, copy } = useCopyToRichText();
 
   // actually aspect Segment ID

echo/frontend/src/components/auth/hooks/index.ts

@@ -12,7 +12,7 @@ import {
 import { ADMIN_BASE_URL } from "@/config";
 import { throwWithMessage } from "../utils/errorUtils";
 import { useEffect, useState } from "react";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { useLocation, useSearchParams } from "react-router";
 
 export const useCurrentUser = () =>
   useQuery({

echo/frontend/src/components/chat/ChatAccordion.tsx

@@ -17,7 +17,7 @@ import {
   Center,
   Loader,
 } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { IconDotsVertical, IconPencil, IconTrash } from "@tabler/icons-react";
 import { formatRelative } from "date-fns";
 import { NavigationButton } from "../common/NavigationButton";

echo/frontend/src/components/chat/ChatHistoryMessage.tsx

@@ -19,7 +19,7 @@ import { CopyRichTextIconButton } from "@/components/common/CopyRichTextIconButt
 import { ConversationLinks } from "@/components/conversation/ConversationLinks";
 import SourcesSearched from "./SourcesSearched";
 import { I18nLink } from "@/components/common/i18nLink";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Sources } from "./Sources";
 import { ReferencesIconButton } from "../common/ReferencesIconButton";

echo/frontend/src/components/common/NavigationButton.tsx

@@ -10,7 +10,6 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { PropsWithChildren } from "react";
-import { Link } from "react-router-dom";
 import { I18nLink } from "@/components/common/i18nLink";
 import { LoadingSpinner } from "./LoadingSpinner";
 

echo/frontend/src/components/common/i18nLink.tsx

@@ -1,7 +1,7 @@
 import { SUPPORTED_LANGUAGES } from "@/config";
 import { useLanguage } from "@/hooks/useLanguage";
 import React from "react";
-import { Link, LinkProps, useParams } from "react-router-dom";
+import { Link, LinkProps, useParams } from "react-router";
 
 export const I18nLink: React.FC<LinkProps> = ({ to, ...props }) => {
   const { language } = useParams<{ language?: string }>();

echo/frontend/src/components/conversation/AutoSelectConversations.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   Alert,
 } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import {
   IconCheck,
   IconLock,

echo/frontend/src/components/conversation/ConversationAccordion.tsx

@@ -46,7 +46,7 @@ import {
   useCallback,
   Suspense,
 } from "react";
-import { useLocation, useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router";
 import { UploadConversationDropzone } from "../dropzone/UploadConversationDropzone";
 import { useDebouncedValue } from "@mantine/hooks";
 import {

echo/frontend/src/components/conversation/ConversationDangerZone.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Button, Group, Stack } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { IconDownload, IconTrash } from "@tabler/icons-react";
 import { useDeleteConversationByIdMutation } from "./hooks";
 import { useI18nNavigate } from "@/hooks/useI18nNavigate";

echo/frontend/src/components/conversation/ConversationLinks.tsx

@@ -1,5 +1,5 @@
 import { Anchor, Group } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { I18nLink } from "@/components/common/i18nLink";
 
 export const ConversationLinks = ({

echo/frontend/src/components/conversation/MoveConversationButton.tsx

@@ -22,7 +22,7 @@ import { useMoveConversationMutation } from "./hooks";
 import { useInfiniteProjects } from "@/components/project/hooks";
 import { Trans } from "@lingui/react/macro";
 import { useI18nNavigate } from "@/hooks/useI18nNavigate";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export const MoveConversationButton = ({
   conversation,

echo/frontend/src/components/error/ErrorPage.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Text, Title } from "@mantine/core";
-import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+import { useRouteError, isRouteErrorResponse } from "react-router";
 import { BaseLayout } from "../layout/BaseLayout";
 import { DEBUG_MODE } from "@/config";
 

echo/frontend/src/components/insight/Insight.tsx

@@ -1,5 +1,5 @@
 import { Paper, Stack, Text } from "@mantine/core";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import { I18nLink } from "@/components/common/i18nLink";
 
 export const Insight = ({

echo/frontend/src/components/language/LanguagePicker.tsx

@@ -3,7 +3,7 @@ import { SUPPORTED_LANGUAGES } from "@/config";
 import { useLanguage } from "@/hooks/useLanguage";
 import { NativeSelect } from "@mantine/core";
 import { ChangeEvent } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 const data: Array<{
   language: (typeof SUPPORTED_LANGUAGES)[number];

echo/frontend/src/components/layout/AuthLayout.tsx

@@ -1,7 +1,7 @@
 import { Divider, LoadingOverlay } from "@mantine/core";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
-import { Outlet, useNavigate, useSearchParams } from "react-router-dom";
+import { Outlet, useNavigate, useSearchParams } from "react-router";
 import { PropsWithChildren, useEffect } from "react";
 import { Toaster } from "../common/Toaster";
 import { useAuthenticated } from "@/components/auth/hooks";

echo/frontend/src/components/layout/BaseLayout.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core";
 import { Toaster } from "../common/Toaster";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { PropsWithChildren } from "react";
 import { Header } from "./Header";
 import { ErrorBoundary } from "../error/ErrorBoundary";

echo/frontend/src/components/layout/Header.tsx

@@ -24,7 +24,7 @@ import { LanguagePicker } from "../language/LanguagePicker";
 import { useState, useEffect } from "react";
 import * as Sentry from "@sentry/react";
 import { useLanguage } from "@/hooks/useLanguage";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { AnnouncementIcon } from "../announcement/AnnouncementIcon";
 import { Announcements } from "../announcement/Announcements";
 import { TopAnnouncementBar } from "../announcement/TopAnnouncementBar";

echo/frontend/src/components/layout/LanguageLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { I18nProvider } from "./I18nProvider";
 
 export const LanguageLayout = () => {

echo/frontend/src/components/layout/ParticipantLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation } from "react-router";
 import { Group, ActionIcon, Box } from "@mantine/core";
 import useSessionStorageState from "use-session-storage-state";
 import { IconSettings } from "@tabler/icons-react";

echo/frontend/src/components/layout/ProjectConversationLayout.tsx

@@ -1,12 +1,12 @@
 import { t } from "@lingui/core/macro";
 import { Stack, Title } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { TabsWithRouter } from "./TabsWithRouter";
 import { ConversationStatusIndicators } from "../conversation/ConversationAccordion";
 import { CONVERSATION_FIELDS_WITHOUT_PROCESSING_STATUS, useConversationById } from "../conversation/hooks";
 
 export const ProjectConversationLayout = () => {
-  const { conversationId } = useParams();
+  const { conversationId } = useParams<{ conversationId: string }>();
 
   const conversationQuery = useConversationById({
     conversationId: conversationId ?? "",

echo/frontend/src/components/layout/ProjectLayout.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Box } from "@mantine/core";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { ProjectSidebar } from "../project/ProjectSidebar";
 import { Resizable } from "re-resizable";
 import { useSidebar } from "@/components/layout/hooks/useSidebar";

echo/frontend/src/components/layout/ProjectLibraryLayout.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro";
 import { useDocumentTitle } from "@mantine/hooks";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 export const ProjectLibraryLayout = () => {
   useDocumentTitle(t`Project Library | Dembrane`);

echo/frontend/src/components/layout/ProjectOverviewLayout.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { useProjectById } from "@/components/project/hooks";
 import { Box, Divider, LoadingOverlay, Stack } from "@mantine/core";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { TabsWithRouter } from "./TabsWithRouter";
 import { useDocumentTitle } from "@mantine/hooks";
 import { ProjectQRCode } from "../project/ProjectQRCode";

echo/frontend/src/components/layout/TabsWithRouter.tsx

@@ -1,6 +1,6 @@
 import { Stack, Tabs, Box, LoadingOverlay } from "@mantine/core";
 import { useEffect, useState, Suspense, useCallback } from "react";
-import { Outlet, useLocation, useParams } from "react-router-dom";
+import { Outlet, useLocation, useParams } from "react-router";
 import { useI18nNavigate } from "@/hooks/useI18nNavigate";
 
 const TabLoadingFallback = () => (

echo/frontend/src/components/participant/MicrophoneTest.tsx

@@ -16,7 +16,7 @@ import { IconMicrophone } from "@tabler/icons-react";
 import { Modal } from "@mantine/core";
 import Cookies from "js-cookie";
 import { useDisclosure } from "@mantine/hooks";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 interface MicrophoneTestProps {
   onContinue: (deviceId: string) => void;

echo/frontend/src/components/participant/ParticipantOnboardingCards.tsx

@@ -1,7 +1,7 @@
 import { Trans } from "@lingui/react/macro";
 // Start of Selection
 import React, { useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import "./ParticipantOnboardingCards.css";
 import { useLanguage } from "@/hooks/useLanguage";