Skip to content

Commit e307245

Browse files
markeriksonmarkerikson
authored
Merge pull request #2409 from FaberVitale/chore/upgrade-deps-react-#2404
2 parents c9e826f + 77bd929 commit e307245

File tree

106 files changed

+5579
-5150
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+5579
-5150
lines changed

‎.yarn/patches/react-scripts__npm_4.0.2.patch

-28
This file was deleted.

‎docs/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"@manaflair/redux-batch": "^1.0.0",
55
"@types/nanoid": "^2.1.0",
66
"@types/react": "^16.9.46",
7-
"@types/react-redux": "^7.1.9",
87
"@types/redux-logger": "^3.0.8",
98
"async-mutex": "^0.3.2",
109
"axios": "^0.20.0",

‎docs/rtk-query/usage/migrating-to-rtk-query.mdx

+9-3
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,8 @@ export const selectDataByName = (state: RootState, name: string) =>
210210
state.pokemon.dataByName[name]
211211

212212
// file: src/store.ts noEmit
213+
import { useDispatch } from 'react-redux'
214+
import { EnhancedStore } from '@reduxjs/toolkit'
213215
interface Pokemon {}
214216
type RequestState = 'pending' | 'fulfilled' | 'rejected'
215217

@@ -221,10 +223,14 @@ export type RootState = {
221223
pokemon: typeof initialPokemonSlice
222224
}
223225

226+
export declare const store: EnhancedStore<RootState>
227+
export type AppDispatch = typeof store.dispatch
228+
export declare const useAppDispatch: () => (...args: any[])=> any;
229+
224230
// file: src/hooks.ts
225231
import { useEffect } from 'react'
226-
import { useDispatch, useSelector } from 'react-redux'
227-
import { RootState } from './store'
232+
import { useSelector } from 'react-redux'
233+
import { RootState, useAppDispatch } from './store'
228234
import {
229235
fetchPokemonByName,
230236
selectStatusByName,
@@ -233,7 +239,7 @@ import {
233239

234240
// highlight-start
235241
export function useGetPokemonByNameQuery(name: string) {
236-
const dispatch = useDispatch()
242+
const dispatch = useAppDispatch()
237243
// select the current status from the store state for the provided name
238244
const status = useSelector((state: RootState) =>
239245
selectStatusByName(state, name)

‎examples/action-listener/counter/.env

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
SKIP_PREFLIGHT_CHECK=true
1+
SKIP_PREFLIGHT_CHECK=true
2+
# https://github.com/facebook/create-react-app/issues/11940
3+
DISABLE_ESLINT_PLUGIN=true

‎examples/action-listener/counter/package.json

+14-9
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"dependencies": {
66
"@reduxjs/toolkit": "^1.8.0",
77
"@types/node": "^12.0.0",
8-
"@types/react": "^17.0.0",
9-
"@types/react-dom": "^17.0.0",
8+
"@types/react": "^18.0.12",
9+
"@types/react-dom": "^18.0.5",
1010
"clsx": "1.1.1",
11-
"react": "^17.0.2",
12-
"react-dom": "^17.0.2",
13-
"react-redux": "7.2.2",
14-
"react-scripts": "4.0.3",
11+
"react": "^18.1.0",
12+
"react-dom": "^18.1.0",
13+
"react-redux": "^8.0.2",
14+
"react-scripts": "5.0.1",
1515
"typescript": "~4.2.4"
1616
},
1717
"scripts": {
@@ -22,9 +22,11 @@
2222
},
2323
"eslintConfig": {
2424
"extends": [
25-
"react-app",
26-
"react-app/jest"
27-
]
25+
"react-app"
26+
],
27+
"rules": {
28+
"react/react-in-jsx-scope": "off"
29+
}
2830
},
2931
"browserslist": {
3032
"production": [
@@ -37,5 +39,8 @@
3739
"last 1 firefox version",
3840
"last 1 safari version"
3941
]
42+
},
43+
"devDependencies": {
44+
"jest-watch-typeahead": "^1.1.0"
4045
}
4146
}

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { FormEvent } from 'react'
2-
import { ChangeEvent } from 'react-redux/node_modules/@types/react'
1+
import { FormEvent, ChangeEvent } from 'react'
32
import { useAppDispatch, useAppSelector } from '../../store'
43
import { themeActions, ThemeState } from '../../services/theme/slice'
54
import styles from './changeThemeForm.module.css'

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ReactDOM from 'react-dom'
1+
import ReactDOM from 'react-dom/client'
22
import './index.css'
33
import { store } from './store'
44
import { themeActions } from './services/theme/slice'
@@ -8,4 +8,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
88
store.dispatch(themeActions.changeColorScheme('dark'))
99
}
1010

11-
ReactDOM.render(<App />, document.getElementById('root'))
11+
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
12+
13+
root.render(<App />)

‎examples/query/react/advanced/.env

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
SKIP_PREFLIGHT_CHECK=true
1+
SKIP_PREFLIGHT_CHECK=true
2+
DISABLE_ESLINT_PLUGIN=true

‎examples/query/react/advanced/package.json

+6-7
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@
77
"main": "src/index.tsx",
88
"dependencies": {
99
"@reduxjs/toolkit": "^1.6.0-rc.1",
10-
"react": "17.0.0",
11-
"react-dom": "17.0.0",
12-
"react-redux": "7.2.2",
13-
"react-scripts": "4.0.2"
10+
"react": "^18.1.0",
11+
"react-dom": "^18.1.0",
12+
"react-redux": "^8.0.2",
13+
"react-scripts": "5.0.1"
1414
},
1515
"devDependencies": {
16-
"@types/react": "17.0.0",
17-
"@types/react-dom": "17.0.0",
18-
"@types/react-redux": "7.1.9",
16+
"@types/react": "^18.0.5",
17+
"@types/react-dom": "^18.0.5",
1918
"typescript": "~4.2.4"
2019
},
2120
"eslintConfig": {

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { render } from 'react-dom'
1+
import ReactDOM from 'react-dom/client'
22
import { ApiProvider } from '@reduxjs/toolkit/query/react'
3-
43
import App from './App'
54
import { pokemonApi } from './services/pokemon'
65

76
const rootElement = document.getElementById('root')
8-
render(
7+
8+
const reactRoot = ReactDOM.createRoot(rootElement as HTMLElement)
9+
10+
reactRoot.render(
911
<ApiProvider api={pokemonApi}>
1012
<App />
11-
</ApiProvider>,
12-
rootElement
13+
</ApiProvider>
1314
)

‎examples/query/react/authentication-with-extrareducers/.env

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
SKIP_PREFLIGHT_CHECK=true
1+
SKIP_PREFLIGHT_CHECK=true
2+
# https://github.com/facebook/create-react-app/issues/11940
3+
DISABLE_ESLINT_PLUGIN=true

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

+7-9
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,16 @@
1212
"@reduxjs/toolkit": "^1.6.0-rc.1",
1313
"framer-motion": "^2.9.5",
1414
"msw": "^0.41.1",
15-
"react": "17.0.2",
16-
"react-dom": "17.0.2",
15+
"react": "^18.1.0",
16+
"react-dom": "^18.1.0",
1717
"react-icons": "3.11.0",
18-
"react-redux": "^7.2.4",
19-
"react-router-dom": "5.2.0",
20-
"react-scripts": "4.0.2"
18+
"react-redux": "^8.0.2",
19+
"react-router-dom": "6.3.0",
20+
"react-scripts": "5.0.1"
2121
},
2222
"devDependencies": {
23-
"@types/react": "17.0.0",
24-
"@types/react-dom": "17.0.0",
25-
"@types/react-redux": "7.1.9",
26-
"@types/react-router-dom": "5.1.6",
23+
"@types/react": "^18.0.5",
24+
"@types/react-dom": "^18.0.5",
2725
"typescript": "~4.2.4"
2826
},
2927
"scripts": {

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Switch, Route } from 'react-router-dom'
1+
import { Routes, Route } from 'react-router-dom'
22
import { Box, Center, VStack } from '@chakra-ui/react'
33

44
import { Login } from './features/auth/Login'
5-
import { PrivateRoute } from './utils/PrivateRoute'
5+
import { PrivateOutlet } from './utils/PrivateOutlet'
66
import { ProtectedComponent } from './features/auth/ProtectedComponent'
77

88
function Hooray() {
@@ -21,12 +21,12 @@ function Hooray() {
2121
function App() {
2222
return (
2323
<Box>
24-
<Switch>
25-
<Route exact path="/login" component={Login} />
26-
<PrivateRoute path="/">
27-
<Hooray />
28-
</PrivateRoute>
29-
</Switch>
24+
<Routes>
25+
<Route path="/login" element={<Login />} />
26+
<Route path="/" element={<PrivateOutlet />}>
27+
<Route index element={<Hooray />} />
28+
</Route>
29+
</Routes>
3030
</Box>
3131
)
3232
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Box,
1111
useToast,
1212
} from '@chakra-ui/react'
13-
import { useHistory } from 'react-router-dom'
13+
import { useNavigate } from 'react-router-dom'
1414
import { useDispatch } from 'react-redux'
1515

1616
import { ProtectedComponent } from './ProtectedComponent'
@@ -47,7 +47,7 @@ function PasswordInput({
4747

4848
export const Login = () => {
4949
const dispatch = useDispatch()
50-
const { push } = useHistory()
50+
const navigate = useNavigate()
5151
const toast = useToast()
5252

5353
const [formState, setFormState] = React.useState<LoginRequest>({
@@ -86,7 +86,7 @@ export const Login = () => {
8686
// Being that the result is handled in extraReducers in authSlice,
8787
// we know that we're authenticated after this, so the user
8888
// and token will be present in the store
89-
push('/')
89+
navigate('/')
9090
} catch (err) {
9191
toast({
9292
status: 'error',

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import ReactDOM from 'react-dom'
2+
import ReactDOM from 'react-dom/client'
33
import { BrowserRouter } from 'react-router-dom'
44
import { ChakraProvider } from '@chakra-ui/react'
55

@@ -11,7 +11,7 @@ import { Provider } from 'react-redux'
1111

1212
// Initialize the msw worker, wait for the service worker registration to resolve, then mount
1313
worker.start({ quiet: true }).then(() =>
14-
ReactDOM.render(
14+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
1515
<React.StrictMode>
1616
<Provider store={store}>
1717
<ChakraProvider>
@@ -20,7 +20,6 @@ worker.start({ quiet: true }).then(() =>
2020
</BrowserRouter>
2121
</ChakraProvider>
2222
</Provider>
23-
</React.StrictMode>,
24-
document.getElementById('root')
23+
</React.StrictMode>
2524
)
2625
)

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Navigate, Outlet, useLocation } from 'react-router-dom'
2+
import { useAuth } from '../hooks/useAuth'
3+
4+
export function PrivateOutlet() {
5+
const auth = useAuth()
6+
const location = useLocation()
7+
8+
return auth.user ? (
9+
<Outlet />
10+
) : (
11+
<Navigate to="/login" state={{ from: location }} />
12+
)
13+
}

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

-23
This file was deleted.

‎examples/query/react/authentication/.env

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
SKIP_PREFLIGHT_CHECK=true
1+
SKIP_PREFLIGHT_CHECK=true
2+
# https://github.com/facebook/create-react-app/issues/11940
3+
DISABLE_ESLINT_PLUGIN=true

‎examples/query/react/authentication/package.json

+7-9
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,16 @@
1212
"@reduxjs/toolkit": "^1.6.0-rc.1",
1313
"framer-motion": "^2.9.5",
1414
"msw": "^0.41.1",
15-
"react": "17.0.2",
16-
"react-dom": "17.0.2",
15+
"react": "^18.1.0",
16+
"react-dom": "^18.1.0",
1717
"react-icons": "3.11.0",
18-
"react-redux": "^7.2.4",
19-
"react-router-dom": "5.2.0",
20-
"react-scripts": "4.0.2"
18+
"react-redux": "^8.0.2",
19+
"react-router-dom": "6.3.0",
20+
"react-scripts": "5.0.1"
2121
},
2222
"devDependencies": {
23-
"@types/react": "17.0.0",
24-
"@types/react-dom": "17.0.0",
25-
"@types/react-redux": "7.1.9",
26-
"@types/react-router-dom": "5.1.6",
23+
"@types/react": "^18.0.5",
24+
"@types/react-dom": "^18.0.5",
2725
"typescript": "~4.2.4"
2826
},
2927
"scripts": {

0 commit comments

Comments
 (0)