changed router imports

Author: akanshaaa19

src/App.test.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 import { waitFor, render, screen } from '@testing-library/react';
 import { vi, describe, it } from 'vitest';

src/App.tsx

@@ -1,5 +1,6 @@
 import { startTransition, useState, useEffect, useMemo } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { useNavigate, Route, Routes } from 'react-router';
+
 import { ApolloProvider } from '@apollo/client';
 import 'i18n/config';
 

src/components/UI/Heading/Heading.test.tsx

@@ -10,8 +10,8 @@ const wrapper = (
 );
 
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/components/UI/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import HelpIcon from '../HelpIcon/HelpIcon';
 import styles from './Heading.module.css';
 import BackIcon from 'assets/images/icons/BackIconFlow.svg?react';

src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.test.tsx

@@ -1,5 +1,5 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 
 import SideDrawer from './SideDrawer';

src/components/UI/Layout/Navigation/SideMenus/SideMenus.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 

src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, forwardRef } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 import {
   ListItemButton,
   ListItemIcon,

src/components/UI/Menu/Menu.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import Menu from './Menu';
 
 const menuList = [

src/components/UI/Menu/MenuItem/MenuItem.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, screen } from '@testing-library/react';
 import MenuItem from './MenuItem';
 

src/components/UI/Menu/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as MenuItemElement } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import styles from './MenuItem.module.css';
 

src/components/errorboundary/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import { Container } from '@mui/material';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import setLogs from 'config/logs';
 import { Component } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styles from './ErrorBoundary.module.css';
 
 function withRouter(NavigateComponent: any) {

src/components/floweditor/FlowEditor.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
@@ -29,9 +29,9 @@ import * as Notification from 'common/notification';
 
 window.location = { assign: vi.fn() } as any;
 
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
   return {
-    ...(await vi.importActual<any>('react-router-dom')),
+    ...(await vi.importActual<any>('react-router')),
     useParams: () => ({ uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676' }),
   };
 });

src/components/floweditor/FlowEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useLazyQuery, useQuery } from '@apollo/client';
-import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, Navigate, useParams } from 'react-router';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import BackIconFlow from 'assets/images/icons/BackIconFlow.svg?react';
 import WarningIcon from 'assets/images/icons/Warning.svg?react';

src/containers/Assistants/Assistants.test.tsx

@@ -7,8 +7,8 @@ import * as Notification from 'common/notification';
 
 const notificationSpy = vi.spyOn(Notification, 'setNotification');
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/containers/Auth/Auth.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import { Typography } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { Captcha } from 'components/UI/Form/Captcha/Captcha';
 
@@ -187,7 +187,7 @@ export const Auth = ({
                   );
                 })}
                 <div className={styles.Link}>
-                  <Link to={`/${linkURL}`}>{linkText}</Link>
+                  <a href={`/${linkURL}`}>{linkText}</a>
                 </div>
                 <div className={styles.CenterButton}>
                   {isRegistration ? (

src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { vi } from 'vitest';
 import axios from 'axios';
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
@@ -21,8 +21,8 @@ const mockedState = {
   },
 };
 
-vi.mock('react-router-dom', async () => ({
-  ...((await vi.importActual<any>('react-router-dom')) as {}),
+vi.mock('react-router', async () => ({
+  ...((await vi.importActual<any>('react-router')) as {}),
   useLocation: () => mockedState,
 }));
 

src/containers/Auth/ConfirmOTP/ConfirmOTP.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
 

src/containers/Auth/Login/Login.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import axios from 'axios';
 import { MockedProvider } from '@apollo/client/testing';
 import { vi } from 'vitest';

src/containers/Auth/Login/Login.tsx

@@ -1,5 +1,5 @@
 import { useState, useContext, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router';
 import axios from 'axios';
 import * as Yup from 'yup';
 import { useLazyQuery } from '@apollo/client';

src/containers/Auth/Logout/Logout.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 import { useContext, useEffect, CSSProperties } from 'react';
 import axios from 'axios';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useParams, useNavigate } from 'react-router';
 import { useApolloClient } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 

src/containers/Auth/Registration/Registration.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import axios from 'axios';
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import { vi } from 'vitest';

src/containers/Auth/Registration/Registration.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
 import { yupPasswordValidation } from 'common/constants';

src/containers/Auth/ResetPassword/ResetPasswordConfirmOTP.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import axios from 'axios';
 import { vi } from 'vitest';
 

src/containers/Auth/ResetPassword/ResetPasswordConfirmOTP.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import axios from 'axios';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';

src/containers/Auth/ResetPassword/ResetPasswordPhone.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
 

src/containers/BlockContact/BlockContactList/BlockContactList.test.tsx

@@ -1,5 +1,5 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 
 import { conversationQuery } from 'mocks/Chat';

src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { MockedProvider } from '@apollo/client/testing';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 import { MARK_AS_READ } from 'graphql/mutations/Chat';
 import { SHORT_DATE_FORMAT } from 'common/constants';

src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx

@@ -1,5 +1,5 @@
 import { ListItemButton } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import dayjs from 'dayjs';
 import { useApolloClient, useMutation } from '@apollo/client';
 

src/containers/Chat/ChatConversations/ChatConversations.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, waitFor, fireEvent, cleanup, screen } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

src/containers/Chat/ChatConversations/ConversationList/ConversationList.test.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter, BrowserRouter as Router } from 'react-router-dom';
+import { MemoryRouter, BrowserRouter as Router } from 'react-router';
 import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';

src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx

@@ -28,7 +28,7 @@ import ChatConversation from '../ChatConversation/ChatConversation';
 import { getConversationForSearchMulti, getConversation } from './ConversationList.helper';
 import styles from './ConversationList.module.css';
 import { GROUP_SEARCH_MULTI_QUERY, GROUP_SEARCH_QUERY } from 'graphql/queries/WaGroups';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 interface ConversationListProps {
   searchVal: string;

src/containers/Chat/ChatInterface/ChatInterface.test.tsx

@@ -18,8 +18,8 @@ import ChatInterface from './ChatInterface';
 import { getWhatsAppManagedPhonesStatusMock } from 'mocks/StatusBar';
 
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/containers/Chat/ChatInterface/ChatInterface.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Paper, Tab, Tabs } from '@mui/material';
 import { useQuery } from '@apollo/client';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useParams, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 import Simulator from 'components/simulator/Simulator';

src/containers/Chat/ChatMessages/AddVariables/AddVariables.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 import axios from 'axios';
 import { vi } from 'vitest';

src/containers/Chat/ChatMessages/ChatMessages.test.tsx

@@ -4,8 +4,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { DEFAULT_ENTITY_LIMIT, DEFAULT_MESSAGE_LIMIT } from 'common/constants';
 import { SEARCH_QUERY } from 'graphql/queries/Search';
 import ChatMessages from './ChatMessages';
-import { MemoryRouter, Route, Routes } from 'react-router';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, BrowserRouter as Router } from 'react-router';
 import { createMediaMessageMock, getAttachmentPermissionMock } from 'mocks/Attachment';
 import { clearMessagesQuery, contactCollectionsQuery } from 'mocks/Contact';
 import { OrganizationStateMock } from 'mocks/Organization';

src/containers/Chat/ChatMessages/ChatMessages.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState, useEffect } from 'react';
 import { useQuery, useMutation, useLazyQuery, useApolloClient } from '@apollo/client';
 import { CircularProgress, Container } from '@mui/material';
 import dayjs from 'dayjs';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useTranslation } from 'react-i18next';
 

src/containers/Chat/ChatMessages/ConversationHeader/ConversationHeader.test.tsx

@@ -315,8 +315,8 @@ const groupsComponent = (
 );
 
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/containers/Chat/ChatMessages/ConversationHeader/ConversationHeader.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Toolbar, Typography, Popper, Fade, Paper, Button, ClickAwayListener, IconButton } from '@mui/material';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { useMutation, useLazyQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 

src/containers/Chat/CollectionConversations/CollectionConversations.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, cleanup, waitFor, screen, fireEvent } from '@testing-library/react';
 
 import { SEARCH_QUERY } from 'graphql/queries/Search';

src/containers/Collection/Collection.test.tsx

@@ -16,7 +16,7 @@ import { getOrganizationLanguagesQuery, getOrganizationQuery } from 'mocks/Organ
 import { Collection } from './Collection';
 import * as FormLayout from 'containers/Form/FormLayout';
 import { getRoleNamesMock } from 'containers/StaffManagement/StaffManagement.test.helper';
-import { BrowserRouter, MemoryRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, MemoryRouter, Routes, Route } from 'react-router';
 import { getSearchCollectionQuery } from 'mocks/Search';
 
 const mocks = [
@@ -56,8 +56,8 @@ vi.mock('common/notification', async (importOriginal) => {
 
 const user = userEvent.setup();
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/containers/Collection/Collection.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useQuery, useLazyQuery, useMutation } from '@apollo/client';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Input } from 'components/UI/Form/Input/Input';
 import { FormLayout } from 'containers/Form/FormLayout';

src/containers/Collection/CollectionContact/CollectionContact.test.tsx

@@ -7,9 +7,9 @@ import { countCollectionContactsQuery, getCollectionContactsQuery } from 'mocks/
 import { getCollectionInfo, getCollectionQuery, getCollectionUsersQuery } from 'mocks/Collection';
 import { CollectionContact } from './CollectionContact';
 
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
   return {
-    ...(await vi.importActual<any>('react-router-dom')),
+    ...(await vi.importActual<any>('react-router')),
     useParams: () => ({ id: '1' }),
   };
 });

src/containers/Collection/CollectionContact/CollectionContact.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { GET_COLLECTION } from 'graphql/queries/Collection';
 import styles from './CollectionContact.module.css';

src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.test.tsx

@@ -15,9 +15,9 @@ import { CollectionContactList } from './CollectionContactList';
 import { addContactToCollection, deleteContactFromCollection } from 'mocks/Collection';
 import { setNotification } from 'common/notification';
 
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
   return {
-    ...(await vi.importActual<any>('react-router-dom')),
+    ...(await vi.importActual<any>('react-router')),
     useParams: () => ({ id: '1' }),
   };
 });