chore: upgrade react, react-18 & react-router-dom of examples workspaces

Author: FaberVitale

examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx

@@ -1,5 +1,4 @@
-import { FormEvent } from 'react'
-import { ChangeEvent } from 'react-redux/node_modules/@types/react'
+import { FormEvent, ChangeEvent } from 'react'
 import { useAppDispatch, useAppSelector } from '../../store'
 import { themeActions, ThemeState } from '../../services/theme/slice'
 import styles from './changeThemeForm.module.css'

examples/action-listener/counter/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './index.css'
 import { store } from './store'
 import { themeActions } from './services/theme/slice'
@@ -8,4 +8,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
   store.dispatch(themeActions.changeColorScheme('dark'))
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+
+root.render(<App />)

examples/query/react/advanced/src/index.tsx

@@ -1,13 +1,14 @@
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { ApiProvider } from '@reduxjs/toolkit/query/react'
-
 import App from './App'
 import { pokemonApi } from './services/pokemon'
 
 const rootElement = document.getElementById('root')
-render(
+
+const reactRoot = ReactDOM.createRoot(rootElement as HTMLElement)
+
+reactRoot.render(
   <ApiProvider api={pokemonApi}>
     <App />
-  </ApiProvider>,
-  rootElement
+  </ApiProvider>
 )

examples/query/react/authentication-with-extrareducers/package.json

@@ -16,13 +16,12 @@
     "react-dom": "^18.1.0",
     "react-icons": "3.11.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "6.3.0",
     "react-scripts": "4.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",
-    "@types/react-router-dom": "5.1.6",
     "typescript": "~4.2.4"
   },
   "scripts": {

examples/query/react/authentication-with-extrareducers/src/App.tsx

@@ -1,8 +1,8 @@
-import { Switch, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 import { Box, Center, VStack } from '@chakra-ui/react'
 
 import { Login } from './features/auth/Login'
-import { PrivateRoute } from './utils/PrivateRoute'
+import { PrivateOutlet } from './utils/PrivateOutlet'
 import { ProtectedComponent } from './features/auth/ProtectedComponent'
 
 function Hooray() {
@@ -21,12 +21,12 @@ function Hooray() {
 function App() {
   return (
     <Box>
-      <Switch>
-        <Route exact path="/login" component={Login} />
-        <PrivateRoute path="/">
-          <Hooray />
-        </PrivateRoute>
-      </Switch>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<PrivateOutlet />}>
+          <Route index element={<Hooray />} />
+        </Route>
+      </Routes>
     </Box>
   )
 }

examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx

@@ -10,7 +10,7 @@ import {
   Box,
   useToast,
 } from '@chakra-ui/react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
 import { ProtectedComponent } from './ProtectedComponent'
@@ -47,7 +47,7 @@ function PasswordInput({
 
 export const Login = () => {
   const dispatch = useDispatch()
-  const { push } = useHistory()
+  const navigate = useNavigate()
   const toast = useToast()
 
   const [formState, setFormState] = React.useState<LoginRequest>({
@@ -86,7 +86,7 @@ export const Login = () => {
               // Being that the result is handled in extraReducers in authSlice,
               // we know that we're authenticated after this, so the user
               // and token will be present in the store
-              push('/')
+              navigate('/')
             } catch (err) {
               toast({
                 status: 'error',

examples/query/react/authentication-with-extrareducers/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
@@ -11,7 +11,7 @@ import { Provider } from 'react-redux'
 
 // Initialize the msw worker, wait for the service worker registration to resolve, then mount
 worker.start({ quiet: true }).then(() =>
-  ReactDOM.render(
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
       <Provider store={store}>
         <ChakraProvider>
@@ -20,7 +20,6 @@ worker.start({ quiet: true }).then(() =>
           </BrowserRouter>
         </ChakraProvider>
       </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
   )
 )

examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+
+export function PrivateOutlet() {
+  const auth = useAuth()
+  const location = useLocation()
+
+  return auth.user ? (
+    <Outlet />
+  ) : (
+    <Navigate to="/login" state={{ from: location }} />
+  )
+}

examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx

@@ -16,13 +16,12 @@
     "react-dom": "^18.1.0",
     "react-icons": "3.11.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "6.3.0",
     "react-scripts": "4.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",
-    "@types/react-router-dom": "5.1.6",
     "typescript": "~4.2.4"
   },
   "scripts": {

examples/query/react/authentication/package.json

@@ -1,8 +1,8 @@
-import { Switch, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 import { Box, Center, VStack } from '@chakra-ui/react'
 
 import { Login } from './features/auth/Login'
-import { PrivateRoute } from './utils/PrivateRoute'
+import { PrivateOutlet } from './utils/PrivateOutlet'
 import { ProtectedComponent } from './features/auth/ProtectedComponent'
 
 function Hooray() {
@@ -21,12 +21,12 @@ function Hooray() {
 function App() {
   return (
     <Box>
-      <Switch>
-        <Route exact path="/login" component={Login} />
-        <PrivateRoute path="/">
-          <Hooray />
-        </PrivateRoute>
-      </Switch>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<PrivateOutlet />}>
+          <Route index element={<Hooray />} />
+        </Route>
+      </Routes>
     </Box>
   )
 }

examples/query/react/authentication/src/App.tsx

@@ -10,7 +10,7 @@ import {
   Box,
   useToast,
 } from '@chakra-ui/react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { setCredentials } from './authSlice'
 
@@ -48,7 +48,7 @@ function PasswordInput({
 
 export const Login = () => {
   const dispatch = useDispatch()
-  const { push } = useHistory()
+  const navigate = useNavigate()
   const toast = useToast()
 
   const [formState, setFormState] = React.useState<LoginRequest>({
@@ -85,7 +85,7 @@ export const Login = () => {
             try {
               const user = await login(formState).unwrap()
               dispatch(setCredentials(user))
-              push('/')
+              navigate('/')
             } catch (err) {
               toast({
                 status: 'error',

examples/query/react/authentication/src/features/auth/Login.tsx

@@ -1,26 +1,30 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
-
 import App from './App'
 import { store } from './app/store'
-
 import { worker } from './mocks/browser'
 import { Provider } from 'react-redux'
 
 // Initialize the msw worker, wait for the service worker registration to resolve, then mount
-worker.start({ quiet: true }).then(() =>
-  ReactDOM.render(
-    <React.StrictMode>
-      <Provider store={store}>
-        <ChakraProvider>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </ChakraProvider>
-      </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
-  )
-)
+worker
+  .start({ quiet: true })
+  .then(() => {
+    const rootNode = ReactDOM.createRoot(
+      document.getElementById('root') as HTMLElement
+    )
+
+    return rootNode.render(
+      <React.StrictMode>
+        <Provider store={store}>
+          <ChakraProvider>
+            <BrowserRouter>
+              <App />
+            </BrowserRouter>
+          </ChakraProvider>
+        </Provider>
+      </React.StrictMode>
+    )
+  })
+  .catch(console.error)

examples/query/react/authentication/src/index.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+
+export function PrivateOutlet() {
+  const auth = useAuth()
+  const location = useLocation()
+
+  return auth.user ? (
+    <Outlet />
+  ) : (
+    <Navigate to="/login" state={{ from: location }} />
+  )
+}

examples/query/react/authentication/src/utils/PrivateOutlet.tsx

@@ -13,7 +13,7 @@
     "react-scripts": "4.0.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.3.0",
     "@types/jest": "^26.0.23",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",

examples/query/react/authentication/src/utils/PrivateRoute.tsx

@@ -1,15 +1,16 @@
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 
 import App from './App'
 import { setupStore } from './store'
 
 const store = setupStore()
 
-const rootElement = document.getElementById('root')
-render(
+const reactRoot = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+)
+reactRoot.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  rootElement
+  </Provider>
 )

examples/query/react/basic/package.json

@@ -1,13 +1,14 @@
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 
 import App from './App'
 import { store } from './store'
 
-const rootElement = document.getElementById('root')
-render(
+const reactRoot = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+)
+reactRoot.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  rootElement
+  </Provider>
 )