Skip to content

Commit 270dfe9

Browse files
michaelmiormichaelmior
committed
Upgrade Redux and React Router
1 parent 38bac05 commit 270dfe9

11 files changed

Lines changed: 208 additions & 177 deletions

File tree

flow-typed/npm/react-router-dom_v5.x.x.js renamed to flow-typed/npm/react-router-dom_v6.x.x.js

Lines changed: 130 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// flow-typed signature: a619baa45c5e804d22612d501f770766
2-
// flow-typed version: c1a3d567a9/react-router-dom_v5.x.x/flow_>=v0.104.x
1+
// flow-typed signature: 78dc7c448940b4fd3611832c7db0db62
2+
// flow-typed version: df736c39bb/react-router-dom_v6.x.x/flow_>=v0.104.x
33

44
declare module "react-router-dom" {
55
declare export var BrowserRouter: React$ComponentType<{|
@@ -128,31 +128,40 @@ declare module "react-router-dom" {
128128
children?: React$Node
129129
|}>
130130

131+
declare export var Route: React$ComponentType<{|
132+
caseSensitive?: boolean,
133+
children?: React$Node,
134+
element?: React$Element<any> | null,
135+
index?: boolean,
136+
path?: string,
137+
|}>
138+
131139
declare export var Prompt: React$ComponentType<{|
132140
message: string | ((location: Location) => string | boolean),
133141
when?: boolean
134142
|}>
135143

136-
declare export var Redirect: React$ComponentType<{|
137-
to: string | LocationShape,
138-
push?: boolean,
139-
from?: string,
140-
exact?: boolean,
141-
strict?: boolean
144+
declare export var Outlet: React$ComponentType<{|
145+
context?: mixed;
142146
|}>
143147

144-
declare export var Route: React$ComponentType<{|
145-
component?: React$ComponentType<*>,
146-
render?: (router: ContextRouter) => React$Node,
147-
children?: React$ComponentType<ContextRouter> | React$Node,
148-
path?: string | Array<string>,
149-
exact?: boolean,
150-
strict?: boolean,
151-
location?: LocationShape,
152-
sensitive?: boolean
153-
|}>
148+
declare export var useNavigate: () => (
149+
& ((
150+
to: To,
151+
options?: {|
152+
replace?: boolean, state?: any,
153+
|},
154+
) => void)
155+
& ((delta: number) => void)
156+
);
154157

155-
declare export var Switch: React$ComponentType<{|
158+
declare export var Navigate: (props: {|
159+
to: To;
160+
replace?: boolean;
161+
state?: any;
162+
|}) => null;
163+
164+
declare export var Routes: React$ComponentType<{|
156165
children?: React$Node,
157166
location?: Location
158167
|}>
@@ -177,8 +186,110 @@ declare module "react-router-dom" {
177186

178187
declare export function useHistory(): $PropertyType<ContextRouter, 'history'>;
179188
declare export function useLocation(): $PropertyType<ContextRouter, 'location'>;
189+
declare export function useOutletContext<T>(): T;
180190
declare export function useParams<Params = $PropertyType<$PropertyType<ContextRouter, 'match'>, 'params'>>(): Params;
181191
declare export function useRouteMatch(path?: MatchPathOptions | string | string[]): $PropertyType<ContextRouter, 'match'>;
182192

183193
declare export function generatePath(pattern?: string, params?: { +[string]: mixed, ... }): string;
194+
195+
declare type RouteObject = {|
196+
caseSensitive?: boolean,
197+
children?: Array<RouteObject>,
198+
element?: React$Node,
199+
index?: boolean,
200+
path?: string,
201+
|};
202+
203+
declare export function createRoutesFromChildren(
204+
children: React$Node,
205+
): Array<RouteObject>;
206+
207+
declare type Params<Key: string> = {
208+
+[key: Key]: string | void;
209+
};
210+
211+
declare type RouteMatch<ParamKey: string> = {|
212+
params: Params<ParamKey>,
213+
pathname: string,
214+
route: RouteObject,
215+
|};
216+
217+
declare export function matchRoutes(
218+
routes: Array<RouteObject>,
219+
location: LocationShape | string,
220+
basename?: string,
221+
): Array<RouteMatch<string>> | null;
222+
223+
declare export function renderMatches(
224+
matches: Array<RouteMatch<string>> | null,
225+
): React$Element<any> | null;
226+
227+
declare type PathPattern = {|
228+
path: string,
229+
caseSensitive?: boolean,
230+
end?: boolean,
231+
|};
232+
233+
declare type PathMatch<ParamKey: string = string> = {|
234+
params: Params<ParamKey>,
235+
pathname: string,
236+
pattern: PathPattern,
237+
|};
238+
239+
declare export function matchPath<ParamKey: string = string>(
240+
pattern: PathPattern | string,
241+
pathname: string,
242+
): PathMatch<ParamKey> | null;
243+
244+
declare type To = LocationShape | string;
245+
246+
declare type Path = {|
247+
pathname: string,
248+
search: string,
249+
hash: string,
250+
|};
251+
252+
declare export function resolvePath(
253+
to: To,
254+
fromPathname?: string
255+
): Path;
256+
257+
declare export function useHref(to: To): string;
258+
259+
declare export function useInRouterContext(): boolean;
260+
261+
declare export function useNavigationType(): 'POP' | 'PUSH' | 'REPLACE';
262+
263+
declare export function useMatch<ParamKey: string = string>(
264+
pattern: PathPattern | string
265+
): PathMatch<ParamKey> | null;
266+
267+
declare export function useOutlet<T = any>(): React$Element<T> | null;
268+
269+
declare export function useRoutes<T = any>(
270+
routes: Array<RouteObject>,
271+
location?: LocationShape | string,
272+
): React$Element<T> | null;
273+
274+
declare export function useSearchParams(
275+
defaultInit?: URLSearchParamsInit
276+
): [URLSearchParams, SetURLSearchParams];
277+
278+
declare type URLSearchParamsInit =
279+
| string
280+
| Array<[string, string]>
281+
| { [key: string]: string | Array<string>, ... }
282+
| URLSearchParams;
283+
284+
declare type SetURLSearchParams = (
285+
nextInit?: URLSearchParamsInit,
286+
navigateOpts?: {|
287+
replace?: boolean,
288+
state?: any,
289+
|}
290+
) => void;
291+
292+
declare export function createSearchParams(
293+
init?: URLSearchParamsInit,
294+
): URLSearchParams;
184295
}

‎package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
"bugs": "https://github.com/michaelmior/relational-playground/issues",
99
"dependencies": {
1010
"@michaelmior/js-sql-parser": "^1.3.0",
11-
"@reduxjs/toolkit": "^1.8.5",
11+
"@reduxjs/toolkit": "^1.8.6",
1212
"@sentry/browser": "^7.12.1",
1313
"@sentry/cli": "^2.7.0",
1414
"@testing-library/jest-dom": "^5.16.5",
1515
"connected-react-router": "^6.9.3",
1616
"fast-equals": "^4.0.1",
1717
"fromentries": "^1.3.2",
18-
"history": "^4.10.1",
18+
"history": "^5.3.0",
1919
"immer": "^9.0.15",
2020
"prismjs": "^1.29.0",
2121
"react": "^17.0.2",
@@ -24,16 +24,15 @@
2424
"react-dom": "^17.0.2",
2525
"react-ga": "^3.3.1",
2626
"react-joyride": "^2.5.2",
27-
"react-redux": "^7.2.9",
28-
"react-router": "^5.1.0",
29-
"react-router-dom": "^5.3.0",
27+
"react-redux": "^8.0.4",
28+
"react-router": "^6.4.2",
29+
"react-router-dom": "^6.4.2",
3030
"react-scripts": "5.0.1",
3131
"react-simple-code-editor": "^0.11.3",
3232
"react-simple-tree-menu": "^1.1.18",
3333
"react-split-pane": "^0.1.92",
3434
"react-table": "^6.11.5",
3535
"redux": "^4.2.0",
36-
"redux-thunk": "^2.4.1",
3736
"typescript": "*",
3837
"uuid": "^9.0.0"
3938
},

‎src/App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react';
2-
import {Route} from 'react-router-dom';
2+
import {Route, Routes} from 'react-router-dom';
33
import Home from './Home';
44

55
/** A container for all routes in the app (currently only one) */
66
function App() {
77
return (
88
<div className="App">
99
<main>
10-
<Route path={process.env.PUBLIC_URL} component={Home} />
10+
<Routes>
11+
<Route path={process.env.PUBLIC_URL} element={<Home />} />
12+
</Routes>
1113
</main>
1214
</div>
1315
);

‎src/EditorContainer.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import React from 'react';
33
import {useDispatch, useSelector} from 'react-redux';
4+
import {useNavigate} from 'react-router-dom';
45
import fromEntries from 'fromentries';
56
import SqlEditor from './SqlEditor';
67
import {exprFromSql} from './modules/relexp';
@@ -9,7 +10,6 @@ import {resetAction} from './modules/data';
910
import type {StatelessFunctionalComponent} from 'react';
1011

1112
type Props = {
12-
history: {...},
1313
ReactGA: any,
1414
};
1515

@@ -23,10 +23,11 @@ const EditorContainer: StatelessFunctionalComponent<Props> = (props) => {
2323
)
2424
);
2525
const dispatch = useDispatch();
26+
const navigate = useNavigate();
2627

2728
return (
2829
<SqlEditor
29-
history={props.history}
30+
navigate={navigate}
3031
ReactGA={props.ReactGA}
3132
defaultText="SELECT * FROM Doctor"
3233
exprFromSql={(sql, types) => dispatch(exprFromSql(sql, types))}

‎src/Home.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// @flow
22
import * as React from 'react';
33
import {connect} from 'react-redux';
4-
import {withRouter} from 'react-router-dom';
54
import CurrentRelExpr from './CurrentRelExpr';
65
import DataContainer from './DataContainer';
76
import EditorContainer from './EditorContainer';
@@ -16,13 +15,10 @@ import './Home.css';
1615
import Tutorial from './Tutorial';
1716

1817
import type {ComponentType} from 'react';
19-
import type {RouterHistory} from 'react-router-dom';
2018

2119
type State = {};
2220

23-
type Props = {
24-
history: RouterHistory,
25-
};
21+
type Props = {};
2622

2723
/** Container for all components on the main page */
2824
class Home extends React.Component<Props, State> {
@@ -50,7 +46,7 @@ class Home extends React.Component<Props, State> {
5046
<h2>Relational Playground</h2>
5147
<div>
5248
{/* SQL query input */}
53-
<EditorContainer ReactGA={ReactGA} history={this.props.history} />
49+
<EditorContainer ReactGA={ReactGA} />
5450
<CurrentRelExpr ReactGA={ReactGA} />
5551
</div>
5652
</div>
@@ -115,5 +111,5 @@ const mapDispatchToProps = (dispatch: (any) => void) => {
115111
const ConnectedHome: ComponentType<Props> = connect<_, {||}, _, _, _, _>(
116112
mapStateToProps,
117113
mapDispatchToProps
118-
)(withRouter(Home));
114+
)(Home);
119115
export default ConnectedHome;

‎src/SqlEditor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type {Node} from 'react';
1414
const parser = require('@michaelmior/js-sql-parser');
1515

1616
type Props = {
17-
history: any,
17+
navigate: any,
1818
defaultText: string,
1919
exprFromSql: typeof exprFromSql,
2020
resetAction: typeof resetAction,
@@ -80,7 +80,7 @@ class SqlEditor extends React.Component<Props, State> {
8080

8181
// Parse the query
8282
this.props.exprFromSql(sql.value, this.props.types);
83-
this.props.history.push('/?query=' + text);
83+
this.props.navigate('/?query=' + text);
8484

8585
if (!firstLoad) {
8686
this.setState({error: null});

‎src/SqlEditor.test.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import {shallow} from 'enzyme';
3+
import {MemoryRouter} from 'react-router';
34

45
import Editor from 'react-simple-code-editor';
56
import SqlEditor from './SqlEditor';
6-
import {history} from './store';
77

88
it('can parse the initial query', () => {
99
const types = {foo: ['bar', 'baz']};
@@ -25,7 +25,6 @@ it('can parse the initial query', () => {
2525
exprFromSql={mockAction}
2626
types={types}
2727
resetAction={mockResetAction}
28-
history={history}
2928
/>
3029
);
3130

‎src/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// @flow
22
import './wydr';
33

4-
import {ConnectedRouter} from 'connected-react-router';
4+
import {BrowserRouter} from 'react-router-dom';
55
import {Provider} from 'react-redux';
66
import React from 'react';
77
import ReactDOM from 'react-dom';
88
import * as Sentry from '@sentry/browser';
99
import './index.css';
10-
import store, {history} from './store';
10+
import store from './store';
1111
import App from './App';
1212

1313
let sentryConfig = {
@@ -24,11 +24,11 @@ Sentry.init(sentryConfig);
2424

2525
ReactDOM.render(
2626
<Provider store={store}>
27-
<ConnectedRouter history={history}>
27+
<BrowserRouter>
2828
<div>
2929
<App />
3030
</div>
31-
</ConnectedRouter>
31+
</BrowserRouter>
3232
</Provider>,
3333
((document.getElementById('root'): any): HTMLElement)
3434
);

0 commit comments

Comments
 (0)