From 5620e3651a98c11d084e3e39f3a354d17dae9738 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sat, 11 Jun 2022 14:04:23 +0200 Subject: [PATCH] chore: upgrade react, react-18 & react-router-dom of examples workspaces --- .../ChangeThemeForm/ChangeThemeForm.tsx | 3 +- .../action-listener/counter/src/index.tsx | 6 +- examples/query/react/advanced/src/index.tsx | 11 +- .../package.json | 3 +- .../src/App.tsx | 16 +- .../src/features/auth/Login.tsx | 6 +- .../src/index.tsx | 7 +- .../src/utils/PrivateOutlet.tsx | 13 ++ .../src/utils/PrivateRoute.tsx | 23 -- .../query/react/authentication/package.json | 3 +- .../query/react/authentication/src/App.tsx | 16 +- .../src/features/auth/Login.tsx | 6 +- .../query/react/authentication/src/index.tsx | 38 ++-- .../src/utils/PrivateOutlet.tsx | 13 ++ .../authentication/src/utils/PrivateRoute.tsx | 23 -- examples/query/react/basic/package.json | 2 +- examples/query/react/basic/src/index.tsx | 11 +- .../react/conditional-fetching/src/index.tsx | 11 +- .../react/deduping-queries/src/index.tsx | 12 +- .../query/react/graphql-codegen/package.json | 3 +- .../query/react/graphql-codegen/src/App.tsx | 8 +- .../query/react/graphql-codegen/src/index.tsx | 9 +- examples/query/react/graphql/package.json | 3 +- examples/query/react/graphql/src/App.tsx | 8 +- examples/query/react/graphql/src/index.tsx | 12 +- .../query/react/kitchen-sink/package.json | 4 +- examples/query/react/kitchen-sink/src/App.tsx | 35 +-- .../src/features/common/Container.tsx | 10 +- .../src/features/posts/PostDetail.tsx | 89 +++++--- .../src/features/posts/PostsManager.tsx | 102 +++++---- .../query/react/kitchen-sink/src/index.tsx | 12 +- .../kitchen-sink/src/mocks/setupTests.tsx | 57 +++-- examples/query/react/mutations/package.json | 3 +- examples/query/react/mutations/src/App.tsx | 8 +- .../src/features/posts/PostDetail.tsx | 6 +- .../src/features/posts/PostsManager.tsx | 24 ++- examples/query/react/mutations/src/index.tsx | 7 +- .../react/mutations/src/mocks/browser.ts | 2 +- .../query/react/mutations/src/mocks/db.ts | 4 +- .../react/optimistic-update/package.json | 3 +- .../query/react/optimistic-update/src/App.tsx | 8 +- .../src/features/posts/PostDetail.tsx | 6 +- .../src/features/posts/PostsManager.tsx | 29 +-- .../react/optimistic-update/src/index.tsx | 7 +- .../optimistic-update/src/mocks/browser.ts | 2 +- .../react/optimistic-update/src/mocks/db.ts | 5 +- examples/query/react/pagination/package.json | 3 +- examples/query/react/pagination/src/App.tsx | 8 +- examples/query/react/pagination/src/index.tsx | 7 +- .../react/pagination/src/mocks/browser.ts | 2 +- examples/query/react/polling/src/index.tsx | 9 +- .../package.json | 3 +- .../src/App.tsx | 8 +- .../src/index.tsx | 7 +- .../src/mocks/browser.ts | 2 +- .../react/prefetching-automatic/package.json | 3 +- .../react/prefetching-automatic/src/App.tsx | 8 +- .../react/prefetching-automatic/src/index.tsx | 7 +- .../src/mocks/browser.ts | 2 +- examples/query/react/prefetching/package.json | 3 +- examples/query/react/prefetching/src/App.tsx | 8 +- .../query/react/prefetching/src/index.tsx | 7 +- .../react/prefetching/src/mocks/browser.ts | 2 +- .../react/with-apiprovider/src/index.tsx | 8 +- packages/toolkit/package.json | 2 +- yarn.lock | 200 +++++++----------- 66 files changed, 494 insertions(+), 494 deletions(-) create mode 100644 examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx delete mode 100644 examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx create mode 100644 examples/query/react/authentication/src/utils/PrivateOutlet.tsx delete mode 100644 examples/query/react/authentication/src/utils/PrivateRoute.tsx diff --git a/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx b/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx index c85dccbc8f..3157b6936f 100644 --- a/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx +++ b/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' diff --git a/examples/action-listener/counter/src/index.tsx b/examples/action-listener/counter/src/index.tsx index ededcf300a..39faca33d1 100644 --- a/examples/action-listener/counter/src/index.tsx +++ b/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(, document.getElementById('root')) +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) + +root.render() diff --git a/examples/query/react/advanced/src/index.tsx b/examples/query/react/advanced/src/index.tsx index 9c54540773..b5a9e97285 100644 --- a/examples/query/react/advanced/src/index.tsx +++ b/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( - , - rootElement + ) diff --git a/examples/query/react/authentication-with-extrareducers/package.json b/examples/query/react/authentication-with-extrareducers/package.json index e2353138a5..edf3a9d31b 100644 --- a/examples/query/react/authentication-with-extrareducers/package.json +++ b/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": { diff --git a/examples/query/react/authentication-with-extrareducers/src/App.tsx b/examples/query/react/authentication-with-extrareducers/src/App.tsx index 349aa3ffa4..9a8fbd70ca 100644 --- a/examples/query/react/authentication-with-extrareducers/src/App.tsx +++ b/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 ( - - - - - - + + } /> + }> + } /> + + ) } diff --git a/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx b/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx index ffde30cc42..ce36f9bbf0 100644 --- a/examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx +++ b/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({ @@ -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', diff --git a/examples/query/react/authentication-with-extrareducers/src/index.tsx b/examples/query/react/authentication-with-extrareducers/src/index.tsx index 7b3484cab8..2bf5b85aa3 100644 --- a/examples/query/react/authentication-with-extrareducers/src/index.tsx +++ b/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( @@ -20,7 +20,6 @@ worker.start({ quiet: true }).then(() => - , - document.getElementById('root') + ) ) diff --git a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx b/examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx new file mode 100644 index 0000000000..7ef1120b4c --- /dev/null +++ b/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 ? ( + + ) : ( + + ) +} diff --git a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx b/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx deleted file mode 100644 index 71511ce1ee..0000000000 --- a/examples/query/react/authentication-with-extrareducers/src/utils/PrivateRoute.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Redirect, Route, RouteProps } from 'react-router-dom' -import { useAuth } from '../hooks/useAuth' - -export function PrivateRoute({ children, ...rest }: RouteProps) { - const { user } = useAuth() - return ( - - user ? ( - children - ) : ( - - ) - } - /> - ) -} diff --git a/examples/query/react/authentication/package.json b/examples/query/react/authentication/package.json index 6a08b7e5b9..23d493f0e7 100644 --- a/examples/query/react/authentication/package.json +++ b/examples/query/react/authentication/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": { diff --git a/examples/query/react/authentication/src/App.tsx b/examples/query/react/authentication/src/App.tsx index 349aa3ffa4..9a8fbd70ca 100644 --- a/examples/query/react/authentication/src/App.tsx +++ b/examples/query/react/authentication/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 ( - - - - - - + + } /> + }> + } /> + + ) } diff --git a/examples/query/react/authentication/src/features/auth/Login.tsx b/examples/query/react/authentication/src/features/auth/Login.tsx index 70cdaae016..9089dee33e 100644 --- a/examples/query/react/authentication/src/features/auth/Login.tsx +++ b/examples/query/react/authentication/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 { 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({ @@ -85,7 +85,7 @@ export const Login = () => { try { const user = await login(formState).unwrap() dispatch(setCredentials(user)) - push('/') + navigate('/') } catch (err) { toast({ status: 'error', diff --git a/examples/query/react/authentication/src/index.tsx b/examples/query/react/authentication/src/index.tsx index 7b3484cab8..b55e344e50 100644 --- a/examples/query/react/authentication/src/index.tsx +++ b/examples/query/react/authentication/src/index.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( - - - - - - - - - , - document.getElementById('root') - ) -) +worker + .start({ quiet: true }) + .then(() => { + const rootNode = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ) + + return rootNode.render( + + + + + + + + + + ) + }) + .catch(console.error) diff --git a/examples/query/react/authentication/src/utils/PrivateOutlet.tsx b/examples/query/react/authentication/src/utils/PrivateOutlet.tsx new file mode 100644 index 0000000000..7ef1120b4c --- /dev/null +++ b/examples/query/react/authentication/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 ? ( + + ) : ( + + ) +} diff --git a/examples/query/react/authentication/src/utils/PrivateRoute.tsx b/examples/query/react/authentication/src/utils/PrivateRoute.tsx deleted file mode 100644 index 71511ce1ee..0000000000 --- a/examples/query/react/authentication/src/utils/PrivateRoute.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Redirect, Route, RouteProps } from 'react-router-dom' -import { useAuth } from '../hooks/useAuth' - -export function PrivateRoute({ children, ...rest }: RouteProps) { - const { user } = useAuth() - return ( - - user ? ( - children - ) : ( - - ) - } - /> - ) -} diff --git a/examples/query/react/basic/package.json b/examples/query/react/basic/package.json index 22e037e05d..af887482d9 100644 --- a/examples/query/react/basic/package.json +++ b/examples/query/react/basic/package.json @@ -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", diff --git a/examples/query/react/basic/src/index.tsx b/examples/query/react/basic/src/index.tsx index e5db94fc4b..970d6ba2b4 100644 --- a/examples/query/react/basic/src/index.tsx +++ b/examples/query/react/basic/src/index.tsx @@ -1,4 +1,4 @@ -import { render } from 'react-dom' +import ReactDOM from 'react-dom/client' import { Provider } from 'react-redux' import App from './App' @@ -6,10 +6,11 @@ import { setupStore } from './store' const store = setupStore() -const rootElement = document.getElementById('root') -render( +const reactRoot = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +) +reactRoot.render( - , - rootElement + ) diff --git a/examples/query/react/conditional-fetching/src/index.tsx b/examples/query/react/conditional-fetching/src/index.tsx index ccb5944c13..1af4cef9e5 100644 --- a/examples/query/react/conditional-fetching/src/index.tsx +++ b/examples/query/react/conditional-fetching/src/index.tsx @@ -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( - , - rootElement + ) diff --git a/examples/query/react/deduping-queries/src/index.tsx b/examples/query/react/deduping-queries/src/index.tsx index ccb5944c13..0924558a7d 100644 --- a/examples/query/react/deduping-queries/src/index.tsx +++ b/examples/query/react/deduping-queries/src/index.tsx @@ -1,13 +1,15 @@ -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( - , - rootElement + ) diff --git a/examples/query/react/graphql-codegen/package.json b/examples/query/react/graphql-codegen/package.json index d538a58db2..d4c5c52bb5 100644 --- a/examples/query/react/graphql-codegen/package.json +++ b/examples/query/react/graphql-codegen/package.json @@ -20,7 +20,7 @@ "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": { @@ -36,7 +36,6 @@ "@types/faker": "^5.5.5", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "@types/webpack-env": "^1.16.0", "concurrently": "^6.2.0", "cross-env": "^7.0.3", diff --git a/examples/query/react/graphql-codegen/src/App.tsx b/examples/query/react/graphql-codegen/src/App.tsx index aaf8248328..d2c53f79bc 100644 --- a/examples/query/react/graphql-codegen/src/App.tsx +++ b/examples/query/react/graphql-codegen/src/App.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from 'react-router' +import { Route, Routes } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/graphql-codegen/src/index.tsx b/examples/query/react/graphql-codegen/src/index.tsx index 1f57e6134f..88e4ff607c 100644 --- a/examples/query/react/graphql-codegen/src/index.tsx +++ b/examples/query/react/graphql-codegen/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { api } from './app/services/baseApi' import { ChakraProvider } from '@chakra-ui/react' @@ -10,7 +10,9 @@ import { ApiProvider } from '@reduxjs/toolkit/query/react' // Initialize the msw worker, wait for the service worker registration to resolve, then mount worker.start({ quiet: true }).then(() => { - return ReactDOM.render( + return ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ).render( @@ -19,7 +21,6 @@ worker.start({ quiet: true }).then(() => { - , - document.getElementById('root') + ) }) diff --git a/examples/query/react/graphql/package.json b/examples/query/react/graphql/package.json index 7eab191775..a23e8179f7 100644 --- a/examples/query/react/graphql/package.json +++ b/examples/query/react/graphql/package.json @@ -21,14 +21,13 @@ "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/faker": "^5.5.5", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.5", - "@types/react-router-dom": "5.1.6", "typescript": "~4.2.4" }, "scripts": { diff --git a/examples/query/react/graphql/src/App.tsx b/examples/query/react/graphql/src/App.tsx index aaf8248328..d2c53f79bc 100644 --- a/examples/query/react/graphql/src/App.tsx +++ b/examples/query/react/graphql/src/App.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from 'react-router' +import { Route, Routes } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/graphql/src/index.tsx b/examples/query/react/graphql/src/index.tsx index 1e809ff67d..a7429fe087 100644 --- a/examples/query/react/graphql/src/index.tsx +++ b/examples/query/react/graphql/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { api } from './app/services/posts' import { ChakraProvider } from '@chakra-ui/react' @@ -10,7 +10,9 @@ import { ApiProvider } from '@reduxjs/toolkit/query/react' // Initialize the msw worker, wait for the service worker registration to resolve, then mount worker.start({ quiet: true }).then(() => { - return ReactDOM.render( + return ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ).render( @@ -19,8 +21,6 @@ worker.start({ quiet: true }).then(() => { - , - document.getElementById('root') + ) -} -) +}) diff --git a/examples/query/react/kitchen-sink/package.json b/examples/query/react/kitchen-sink/package.json index b454e2db82..1745300592 100644 --- a/examples/query/react/kitchen-sink/package.json +++ b/examples/query/react/kitchen-sink/package.json @@ -11,12 +11,12 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-redux": "^8.0.2", - "react-router-dom": "5.3.0", + "react-router-dom": "6.3.0", "react-scripts": "4.0.2" }, "devDependencies": { "@testing-library/jest-dom": "^5.11.5", - "@testing-library/react": "^12.0.0", + "@testing-library/react": "^13.3.0", "@types/jest": "^26.0.23", "@types/node": "^14.14.6", "@types/react": "^18.0.5", diff --git a/examples/query/react/kitchen-sink/src/App.tsx b/examples/query/react/kitchen-sink/src/App.tsx index 6d34d4e0eb..be5102d89f 100644 --- a/examples/query/react/kitchen-sink/src/App.tsx +++ b/examples/query/react/kitchen-sink/src/App.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import { Switch, Route, Link } from 'react-router-dom'; -import { PostsManager } from './features/posts/PostsManager'; -import { CounterList } from './features/counter/CounterList'; -import { TimeList } from './features/time/TimeList'; -import { PollingToggles } from './features/polling/PollingToggles'; -import { Lazy } from './features/bundleSplitting'; -import './App.css'; +import React from 'react' +import { Routes, Route, Link } from 'react-router-dom' +import { PostsManager } from './features/posts/PostsManager' +import { CounterList } from './features/counter/CounterList' +import { TimeList } from './features/time/TimeList' +import { PollingToggles } from './features/polling/PollingToggles' +import { Lazy } from './features/bundleSplitting' +import './App.css' function App() { return ( @@ -13,7 +13,8 @@ function App() {
- Times | Posts | Counter |{' '} + Times | Posts |{' '} + Counter |{' '} Bundle Splitting
@@ -23,15 +24,15 @@ function App() {
- - - - - - + + } /> + } /> + } /> + } /> +
- ); + ) } -export default App; +export default App diff --git a/examples/query/react/kitchen-sink/src/features/common/Container.tsx b/examples/query/react/kitchen-sink/src/features/common/Container.tsx index 00c639997c..ff3f2748d3 100644 --- a/examples/query/react/kitchen-sink/src/features/common/Container.tsx +++ b/examples/query/react/kitchen-sink/src/features/common/Container.tsx @@ -1,5 +1,7 @@ -import * as React from 'react'; +import { FC, ReactNode } from 'react' -export const Container: React.FC = ({ children }) => ( -
{children}
-); +export const Container: FC<{ children: ReactNode }> = ({ children }) => ( +
+ {children} +
+) diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx index ed35e7b11e..c7a1af36af 100644 --- a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx +++ b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx @@ -1,8 +1,12 @@ -import * as React from 'react'; -import { useHistory, useParams } from 'react-router-dom'; -import { useTypedSelector } from '../../app/store'; -import { useDeletePostMutation, useGetPostQuery, useUpdatePostMutation } from '../../app/services/posts'; -import { selectGlobalPollingEnabled } from '../polling/pollingSlice'; +import * as React from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import { useTypedSelector } from '../../app/store' +import { + useDeletePostMutation, + useGetPostQuery, + useUpdatePostMutation, +} from '../../app/services/posts' +import { selectGlobalPollingEnabled } from '../polling/pollingSlice' const EditablePostName = ({ name: initialName, @@ -10,21 +14,28 @@ const EditablePostName = ({ onCancel, loading = false, }: { - name: string; - onUpdate: (name: string) => void; - onCancel: () => void; - loading?: boolean; + name: string + onUpdate: (name: string) => void + onCancel: () => void + loading?: boolean }) => { - const [name, setName] = React.useState(initialName); + const [name, setName] = React.useState(initialName) - const handleChange = ({ target: { value } }: React.ChangeEvent) => setName(value); + const handleChange = ({ + target: { value }, + }: React.ChangeEvent) => setName(value) - const handleUpdate = () => onUpdate(name); - const handleCancel = () => onCancel(); + const handleUpdate = () => onUpdate(name) + const handleCancel = () => onCancel() return (
- + @@ -32,37 +43,41 @@ const EditablePostName = ({ Cancel
- ); -}; + ) +} const PostJsonDetail = ({ id }: { id: number }) => { - const { data: post } = useGetPostQuery(id); + const { data: post } = useGetPostQuery(id) return ( 
{JSON.stringify(post, null, 2)}
- ); -}; + ) +} export const PostDetail = () => { - const { id } = useParams<{ id: any }>(); - const { push } = useHistory(); - const globalPolling = useTypedSelector(selectGlobalPollingEnabled); + const { id } = useParams<{ id: any }>() + const navigate = useNavigate() + const globalPolling = useTypedSelector(selectGlobalPollingEnabled) - const [isEditing, setIsEditing] = React.useState(false); + const [isEditing, setIsEditing] = React.useState(false) - const { data: post, isFetching, isLoading } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 }); + const { + data: post, + isFetching, + isLoading, + } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 }) - const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation(); - const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation(); + const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation() + const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation() if (isLoading) { - return
Loading...
; + return
Loading...
} if (!post) { - return
Missing post!
; + return
Missing post!
} return ( @@ -74,8 +89,8 @@ export const PostDetail = () => { updatePost({ id, name }) .then((result) => { // handle the success! - console.log('Update Result', result); - setIsEditing(false); + console.log('Update Result', result) + setIsEditing(false) }) .catch((error) => console.error('Update Error', error)) } @@ -90,10 +105,16 @@ export const PostDetail = () => { {post.name} {isFetching ? '...refetching' : ''} - - @@ -101,5 +122,5 @@ export const PostDetail = () => { )} - ); -}; + ) +} diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx index 0bbd0b84e8..2ea7dcb822 100644 --- a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx +++ b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx @@ -1,35 +1,41 @@ -import React, { useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { Route, Switch, useHistory } from 'react-router-dom'; +import React, { useState } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { Route, Routes, useNavigate } from 'react-router-dom' import { Post, useAddPostMutation, useGetPostsQuery, useLoginMutation, useGetErrorProneQuery, -} from '../../app/services/posts'; -import { selectIsAuthenticated, logout } from '../auth/authSlice'; -import { PostDetail } from './PostDetail'; -import './PostsManager.css'; +} from '../../app/services/posts' +import { selectIsAuthenticated, logout } from '../auth/authSlice' +import { PostDetail } from './PostDetail' +import './PostsManager.css' const AddPost = () => { - const initialValue = { name: '' }; - const [post, setPost] = useState>(initialValue); - const [addPost, { isLoading }] = useAddPostMutation(); + const initialValue = { name: '' } + const [post, setPost] = useState>(initialValue) + const [addPost, { isLoading }] = useAddPostMutation() const handleChange = ({ target }: React.ChangeEvent) => { setPost((prev) => ({ ...prev, [target.name]: target.value, - })); - }; + })) + } - const handleAddPost = () => addPost(post).then(() => setPost(initialValue)); + const handleAddPost = () => addPost(post).then(() => setPost(initialValue)) return (
- +
- ); -}; + ) +} -const PostListItem = ({ data: { name, id }, onSelect }: { data: Post; onSelect: (id: number) => void }) => { +const PostListItem = ({ + data: { name, id }, + onSelect, +}: { + data: Post + onSelect: (id: number) => void +}) => { return (
  • onSelect(id)}> {name}
    • - ); -}; + ) +} const PostList = () => { - const { data: posts, isLoading } = useGetPostsQuery(); - const { push } = useHistory(); + const { data: posts, isLoading } = useGetPostsQuery() + const navigate = useNavigate() if (isLoading) { - return
    Loading
    ; + return
    Loading
    } if (!posts) { - return
    No posts :(
    ; + return
    No posts :(
    } return (
    {posts.map((post) => ( - push(`/posts/${id}`)} /> + navigate(`/posts/${id}`)} + /> ))}
    - ); -}; + ) +} export const PostsManager = () => { - const [login] = useLoginMutation(); - const [initRetries, setInitRetries] = useState(false); - const { data, error, isFetching } = useGetErrorProneQuery(undefined, { skip: !initRetries }); - const dispatch = useDispatch(); - const isAuthenticated = useSelector(selectIsAuthenticated); + const [login] = useLoginMutation() + const [initRetries, setInitRetries] = useState(false) + const { data, error, isFetching } = useGetErrorProneQuery(undefined, { + skip: !initRetries, + }) + const dispatch = useDispatch() + const isAuthenticated = useSelector(selectIsAuthenticated) return (

    Posts

    {!isAuthenticated ? ( - + ) : ( )} - +
    @@ -99,13 +123,13 @@ export const PostsManager = () => {
    - - - + + } /> +
    - ); -}; + ) +} -export default PostsManager; +export default PostsManager diff --git a/examples/query/react/kitchen-sink/src/index.tsx b/examples/query/react/kitchen-sink/src/index.tsx index af083b4b64..6df77c3e0a 100644 --- a/examples/query/react/kitchen-sink/src/index.tsx +++ b/examples/query/react/kitchen-sink/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ReactDOM from 'react-dom' +import ReactDOM from 'react-dom/client' import App from './App' import { store } from './app/store' import { Provider } from 'react-redux' @@ -11,15 +11,19 @@ async function render() { if (process.env.NODE_ENV === 'development') { await worker.start() } - ReactDOM.render( + + const rootNode = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ) + + rootNode.render( - , - document.getElementById('root') + ) } diff --git a/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx b/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx index 7bbca3f13e..899d316d61 100644 --- a/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx +++ b/examples/query/react/kitchen-sink/src/mocks/setupTests.tsx @@ -1,31 +1,46 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { store } from '../app/store'; -import { Router, Route } from 'react-router-dom'; -import { createMemoryHistory } from 'history'; -import { mockServer } from './mockServer'; -import 'whatwg-fetch'; +import React from 'react' +import { render } from '@testing-library/react' +import { Provider } from 'react-redux' +import { store } from '../app/store' +import { + unstable_HistoryRouter as HistoryRouter, + Route, + Routes, +} from 'react-router-dom' +import { createMemoryHistory } from 'history' +import { mockServer } from './mockServer' +import 'whatwg-fetch' export const setupTests = () => { - const { server, state: serverState } = mockServer(); + const { server, state: serverState } = mockServer() - beforeAll(() => server.listen({ onUnhandledRequest: 'warn' })); - afterEach(() => server.resetHandlers()); - afterAll(() => server.close()); + beforeAll(() => server.listen({ onUnhandledRequest: 'warn' })) + afterEach(() => server.resetHandlers()) + afterAll(() => server.close()) interface RenderOptions { - route: string; - path?: string; + route: string + path?: string } - function renderWithProvider(children: React.ReactChild, { route, path }: RenderOptions = { route: '/', path: '' }) { - const history = createMemoryHistory(); - history.push(route); + function renderWithProvider( + children: React.ReactChild, + { route, path }: RenderOptions = { route: '/', path: '' } + ) { + const history = createMemoryHistory() + history.push(route) return render( - {path ? {children} : children} + + {path ? ( + + {children} + + ) : ( + children + )} + - ); + ) } return { @@ -33,5 +48,5 @@ export const setupTests = () => { serverState, server, renderWithProvider, - }; -}; + } +} diff --git a/examples/query/react/mutations/package.json b/examples/query/react/mutations/package.json index 642c9e8b7c..0e001c1585 100644 --- a/examples/query/react/mutations/package.json +++ b/examples/query/react/mutations/package.json @@ -17,13 +17,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": { diff --git a/examples/query/react/mutations/src/App.tsx b/examples/query/react/mutations/src/App.tsx index 7754640ff4..a105e83a04 100644 --- a/examples/query/react/mutations/src/App.tsx +++ b/examples/query/react/mutations/src/App.tsx @@ -1,13 +1,13 @@ -import { Switch, Route } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom' import { PostsManager } from './features/posts/PostsManager' import { Box } from '@chakra-ui/react' function App() { return ( - - - + + } /> + ) } diff --git a/examples/query/react/mutations/src/features/posts/PostDetail.tsx b/examples/query/react/mutations/src/features/posts/PostDetail.tsx index 9855aa2607..5a55f1b15d 100644 --- a/examples/query/react/mutations/src/features/posts/PostDetail.tsx +++ b/examples/query/react/mutations/src/features/posts/PostDetail.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useHistory, useParams } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import { useDeletePostMutation, useGetPostQuery, @@ -73,7 +73,7 @@ const PostJsonDetail = ({ id }: { id: string }) => { export const PostDetail = () => { const { id } = useParams<{ id: any }>() - const { push } = useHistory() + const navigate = useNavigate() const toast = useToast() @@ -137,7 +137,7 @@ export const PostDetail = () => { {isUpdating ? 'Updating...' : 'Edit'}