💚 Fix broken CI Pipelines

.github/workflows/quality.yaml

@@ -17,8 +17,8 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
-          cache: "yarn"
+          node-version: 'lts/*'
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -40,8 +40,8 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
-          cache: "yarn"
+          node-version: 'lts/*'
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

src/App.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { FC } from 'react'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, Route, Routes } from 'react-router'
 import '../leaflet.config.js'
 import Notification from './components/Notification.js'
 import ProtectedRoute from './components/ProtectedRoute'

src/components/navigation/NavItem.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, colors } from '@mui/material'
 import { FC } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 interface Props {
   active: boolean

src/components/ticker/TickerList.tsx

@@ -1,6 +1,6 @@
 import { Table, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@mui/material'
 import { FC, useEffect, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router'
 import { GetTickersQueryParams } from '../../api/Ticker'
 import useDebounce from '../../hooks/useDebounce'
 import TickerListFilter from './TickerListFilter'

src/contexts/AuthContext.test.tsx

@@ -1,10 +1,10 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { AuthProvider } from './AuthContext'
-import { MemoryRouter } from 'react-router-dom'
 import sign from 'jwt-encode'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AuthProvider } from './AuthContext'
 
-// Mock of useNavigate, useLocation (react-router-dom)
+// Mock of useNavigate, useLocation (react-router)
 vi.mock('react-router', () => ({
   ...vi.importActual('react-router'), // This ensures any other exports remain intact
   useNavigate: vi.fn(() => vi.fn()), // A function that returns another function

src/views/HomeView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
-import { Navigate } from 'react-router'
-import { useSearchParams } from 'react-router-dom'
+import { Navigate, useSearchParams } from 'react-router'
 import Loader from '../components/Loader'
 import useAuth from '../contexts/useAuth'
 import useTickersQuery from '../queries/useTickersQuery'

src/views/Layout.tsx

@@ -1,12 +1,12 @@
-import { FC } from 'react'
+import { faGaugeHigh, faGears, faUsers } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Box, Container } from '@mui/material'
+import { FC } from 'react'
+import { useLocation } from 'react-router'
 import Nav from '../components/navigation/Nav'
 import NavItem from '../components/navigation/NavItem'
 import UserDropdown from '../components/navigation/UserDropdown'
 import useAuth from '../contexts/useAuth'
-import { useLocation } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGaugeHigh, faGears, faUsers } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   children: React.ReactNode

src/views/TickerView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import Ticker from '../components/ticker/Ticker'
 import useAuth from '../contexts/useAuth'
 import useTickerQuery from '../queries/useTickerQuery'