Skip to content

Commit baec197

Browse files
authored
Merge pull request #2294 from lindapaiste/chore/react-router-v4
Upgrade react-router from v3 to v4
2 parents 7b71ad7 + bdd61df commit baec197

Some content is hidden

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

43 files changed

+400
-272
lines changed

client/browserHistory.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createBrowserHistory } from 'history';
2+
3+
const browserHistory = createBrowserHistory();
4+
5+
export default browserHistory;

client/common/Button.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
4-
import { Link } from 'react-router';
4+
import { Link } from 'react-router-dom';
55

66
import { remSize, prop } from '../theme';
77

client/common/ButtonOrLink.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33
import PropTypes from 'prop-types';
44

55
/**

client/components/Nav.jsx

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import React from 'react';
44
import { withTranslation } from 'react-i18next';
55
import { connect } from 'react-redux';
6-
import { Link, withRouter } from 'react-router';
6+
import { Link } from 'react-router-dom';
77
import { availableLanguages, languageKeyToLabel } from '../i18n';
88
import * as IDEActions from '../modules/IDE/actions/ide';
99
import * as toastActions from '../modules/IDE/actions/toast';
@@ -37,12 +37,12 @@ class Nav extends React.PureComponent {
3737
}
3838

3939
handleNew() {
40-
const { unsavedChanges, warnIfUnsavedChanges } = this.props;
40+
const { unsavedChanges } = this.props;
4141
if (!unsavedChanges) {
4242
this.props.showToast(1500);
4343
this.props.setToastText('Toast.OpenedNewSketch');
4444
this.props.newProject();
45-
} else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
45+
} else if (window.confirm(this.props.t('Nav.WarningUnsavedChanges'))) {
4646
this.props.showToast(1500);
4747
this.props.setToastText('Toast.OpenedNewSketch');
4848
this.props.newProject();
@@ -73,11 +73,10 @@ class Nav extends React.PureComponent {
7373
}
7474

7575
handleShare() {
76-
const { username } = this.props.params;
7776
this.props.showShareModal(
7877
this.props.project.id,
7978
this.props.project.name,
80-
username
79+
this.props.project.owner.username
8180
);
8281
}
8382

@@ -351,14 +350,14 @@ Nav.propTypes = {
351350
id: PropTypes.string,
352351
name: PropTypes.string,
353352
owner: PropTypes.shape({
354-
id: PropTypes.string
353+
id: PropTypes.string,
354+
username: PropTypes.string
355355
})
356356
}),
357357
logoutUser: PropTypes.func.isRequired,
358358
showShareModal: PropTypes.func.isRequired,
359359
showErrorModal: PropTypes.func.isRequired,
360360
unsavedChanges: PropTypes.bool.isRequired,
361-
warnIfUnsavedChanges: PropTypes.func,
362361
showKeyboardShortcutModal: PropTypes.func.isRequired,
363362
cmController: PropTypes.shape({
364363
tidyCode: PropTypes.func,
@@ -374,9 +373,6 @@ Nav.propTypes = {
374373
rootFile: PropTypes.shape({
375374
id: PropTypes.string.isRequired
376375
}).isRequired,
377-
params: PropTypes.shape({
378-
username: PropTypes.string
379-
}),
380376
t: PropTypes.func.isRequired,
381377
setLanguage: PropTypes.func.isRequired,
382378
language: PropTypes.string.isRequired,
@@ -391,10 +387,6 @@ Nav.defaultProps = {
391387
},
392388
cmController: {},
393389
layout: 'project',
394-
warnIfUnsavedChanges: undefined,
395-
params: {
396-
username: undefined
397-
},
398390
editorLink: '/'
399391
};
400392

@@ -420,6 +412,6 @@ const mapDispatchToProps = {
420412
};
421413

422414
export default withTranslation()(
423-
withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav))
415+
connect(mapStateToProps, mapDispatchToProps)(Nav)
424416
);
425417
export { Nav as NavComponent };

client/components/PreviewNav.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { Link } from 'react-router';
3+
import { Link } from 'react-router-dom';
44
import { useTranslation } from 'react-i18next';
55

66
import LogoIcon from '../images/p5js-logo-small.svg';

client/components/__snapshots__/Nav.unit.test.jsx.snap

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ exports[`Nav renders correctly 1`] = `
5757
<li
5858
class="nav__dropdown-item"
5959
>
60-
<a />
60+
<a
61+
href="/new-user/sketches"
62+
/>
6163
</li>
6264
</ul>
6365
</li>
@@ -195,7 +197,9 @@ exports[`Nav renders correctly 1`] = `
195197
<li
196198
class="nav__dropdown-item"
197199
>
198-
<a />
200+
<a
201+
href="/about"
202+
/>
199203
</li>
200204
</ul>
201205
</li>
@@ -229,6 +233,7 @@ exports[`Nav renders dashboard version 1`] = `
229233
>
230234
<a
231235
class="nav__back-link"
236+
href="/"
232237
>
233238
<test-file-stub
234239
aria-hidden="true"
@@ -447,7 +452,9 @@ exports[`Nav renders editor version 1`] = `
447452
<li
448453
class="nav__dropdown-item"
449454
>
450-
<a>
455+
<a
456+
href="/about"
457+
>
451458
About
452459
</a>
453460
</li>

client/components/createRedirectWithUsername.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { connect } from 'react-redux';
3-
import { browserHistory } from 'react-router';
3+
import browserHistory from '../browserHistory';
44

55
const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
66
React.useEffect(() => {

client/components/mobile/Tab.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33
import { prop, remSize } from '../../theme';
44

55
export default styled(Link)`

client/index.integration.test.jsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { setupServer } from 'msw/node';
22
import { rest } from 'msw';
33
import React from 'react';
4-
import { Router, browserHistory } from 'react-router';
4+
import Routing from './routes';
55

66
import { reduxRender, act, waitFor, screen, within } from './test-utils';
77
import configureStore from './store';
8-
import routes from './routes';
98
import * as Actions from './modules/User/actions';
109
import { userResponse } from './testData/testServerResponses';
1110

1211
// setup for the app
13-
const history = browserHistory;
1412
const initialState = window.__INITIAL_STATE__;
1513
const store = configureStore(initialState);
1614

@@ -56,8 +54,7 @@ document.createRange = () => {
5654
// start testing
5755
describe('index.jsx integration', () => {
5856
// the subject under test
59-
const subject = () =>
60-
reduxRender(<Router history={history} routes={routes(store)} />, { store });
57+
const subject = () => reduxRender(<Routing />, { store });
6158

6259
// spy on this function and wait for it to be called before making assertions
6360
const spy = jest.spyOn(Actions, 'getUser');

client/index.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import React, { Suspense } from 'react';
22
import { render } from 'react-dom';
33
import { hot } from 'react-hot-loader/root';
44
import { Provider } from 'react-redux';
5-
import { Router, browserHistory } from 'react-router';
5+
import { Router } from 'react-router-dom';
66

7+
import browserHistory from './browserHistory';
78
import configureStore from './store';
8-
import routes from './routes';
9+
import Routing from './routes';
910
import ThemeProvider from './modules/App/components/ThemeProvider';
1011
import Loader from './modules/App/components/loader';
1112
import './i18n';
@@ -15,15 +16,16 @@ require('./styles/main.scss');
1516
// Load the p5 png logo, so that webpack will use it
1617
require('./images/p5js-square-logo.png');
1718

18-
const history = browserHistory;
1919
const initialState = window.__INITIAL_STATE__;
2020

2121
const store = configureStore(initialState);
2222

2323
const App = () => (
2424
<Provider store={store}>
2525
<ThemeProvider>
26-
<Router history={history} routes={routes(store)} />
26+
<Router history={browserHistory}>
27+
<Routing />
28+
</Router>
2729
</ThemeProvider>
2830
</Provider>
2931
);

client/modules/App/App.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
4+
import { withRouter } from 'react-router-dom';
45
import getConfig from '../../utils/getConfig';
56
import DevTools from './components/DevTools';
67
import { setPreviousPath } from '../IDE/actions/ide';
@@ -87,4 +88,4 @@ const mapStateToProps = (state) => ({
8788

8889
const mapDispatchToProps = { setPreviousPath, setLanguage };
8990

90-
export default connect(mapStateToProps, mapDispatchToProps)(App);
91+
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

client/modules/App/components/Overlay.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { browserHistory } from 'react-router';
43
import { withTranslation } from 'react-i18next';
54

5+
import browserHistory from '../../../browserHistory';
66
import ExitIcon from '../../../images/exit.svg';
77

88
class Overlay extends React.Component {

client/modules/IDE/actions/collections.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { browserHistory } from 'react-router';
1+
import browserHistory from '../../../browserHistory';
22
import apiClient from '../../../utils/apiClient';
33
import * as ActionTypes from '../../../constants';
44
import { startLoader, stopLoader } from './loader';

client/modules/IDE/actions/project.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { browserHistory } from 'react-router';
21
import objectID from 'bson-objectid';
32
import each from 'async/each';
43
import isEqual from 'lodash/isEqual';
4+
import browserHistory from '../../../browserHistory';
55
import apiClient from '../../../utils/apiClient';
66
import getConfig from '../../../utils/getConfig';
77
import * as ActionTypes from '../../../constants';

client/modules/IDE/components/About.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { useSelector } from 'react-redux';
33
import { Helmet } from 'react-helmet';
44
import { useTranslation } from 'react-i18next';
5-
import { Link } from 'react-router';
5+
import { Link } from 'react-router-dom';
66
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
77
// import PlayIcon from '../../../images/play.svg';
88
import AsteriskIcon from '../../../images/p5-asterisk.svg';

client/modules/IDE/components/AssetList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
44
import { bindActionCreators } from 'redux';
5-
import { Link } from 'react-router';
5+
import { Link } from 'react-router-dom';
66
import { Helmet } from 'react-helmet';
77
import prettyBytes from 'pretty-bytes';
88
import { withTranslation } from 'react-i18next';

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
4-
import { Link } from 'react-router';
4+
import { Link } from 'react-router-dom';
55
import { bindActionCreators } from 'redux';
66
import { withTranslation } from 'react-i18next';
77
import * as ProjectActions from '../../actions/project';

client/modules/IDE/components/ErrorModal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { Link } from 'react-router';
3+
import { Link } from 'react-router-dom';
44
import { useTranslation } from 'react-i18next';
55

66
const ErrorModal = ({ type, service, closeModal }) => {

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Link } from 'react-router';
3+
import { Link } from 'react-router-dom';
44
import { useTranslation } from 'react-i18next';
55

66
import Icons from './Icons';

client/modules/IDE/components/SketchList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import { Helmet } from 'react-helmet';
44
import { withTranslation } from 'react-i18next';
55
import { connect } from 'react-redux';
6-
import { Link } from 'react-router';
6+
import { Link } from 'react-router-dom';
77
import { bindActionCreators } from 'redux';
88
import classNames from 'classnames';
99
import slugify from 'slugify';

client/modules/IDE/components/Toolbar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
4-
import { Link } from 'react-router';
4+
import { Link } from 'react-router-dom';
55
import classNames from 'classnames';
66
import { withTranslation } from 'react-i18next';
77
import * as IDEActions from '../actions/ide';

client/modules/IDE/components/UploadFileModal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
3-
import { Link } from 'react-router';
3+
import { Link } from 'react-router-dom';
44
import { useTranslation } from 'react-i18next';
55
import prettyBytes from 'pretty-bytes';
66
import getConfig from '../../../utils/getConfig';

client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,9 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
7070
<th
7171
scope="row"
7272
>
73-
<a>
73+
<a
74+
href="/happydog/sketches/testid1"
75+
>
7476
testsketch1
7577
</a>
7678
</th>
@@ -100,7 +102,9 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
100102
<th
101103
scope="row"
102104
>
103-
<a>
105+
<a
106+
href="/happydog/sketches/testid2"
107+
>
104108
testsketch2
105109
</a>
106110
</th>

0 commit comments

Comments
 (0)