Skip to content

Commit 74084cd

Browse files
lindapaistelindapaiste
committed
Merge remote-tracking branch 'upstream/develop' into refactor/overlay
# Conflicts: # client/modules/App/components/Overlay.jsx
2 parents ca50c84 + 31e64d5 commit 74084cd

Some content is hidden

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

56 files changed

+1049
-840
lines changed

‎.babelrc

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,16 @@
5151
"development": {
5252
"plugins": [
5353
"babel-plugin-styled-components",
54-
"react-hot-loader/babel"
54+
"react-refresh/babel"
55+
],
56+
"presets": [
57+
[
58+
"@babel/preset-react",
59+
{
60+
"development": true,
61+
"runtime": "automatic"
62+
}
63+
]
5564
]
5665
}
5766
},

‎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: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { Suspense } from 'react';
22
import { render } from 'react-dom';
3-
import { hot } from 'react-hot-loader/root';
43
import { Provider } from 'react-redux';
5-
import { Router, browserHistory } from 'react-router';
4+
import { Router } from 'react-router-dom';
65

6+
import browserHistory from './browserHistory';
77
import configureStore from './store';
8-
import routes from './routes';
8+
import Routing from './routes';
99
import ThemeProvider from './modules/App/components/ThemeProvider';
1010
import Loader from './modules/App/components/loader';
1111
import './i18n';
@@ -15,24 +15,23 @@ require('./styles/main.scss');
1515
// Load the p5 png logo, so that webpack will use it
1616
require('./images/p5js-square-logo.png');
1717

18-
const history = browserHistory;
1918
const initialState = window.__INITIAL_STATE__;
2019

2120
const store = configureStore(initialState);
2221

2322
const App = () => (
2423
<Provider store={store}>
2524
<ThemeProvider>
26-
<Router history={history} routes={routes(store)} />
25+
<Router history={browserHistory}>
26+
<Routing />
27+
</Router>
2728
</ThemeProvider>
2829
</Provider>
2930
);
3031

31-
const HotApp = hot(App);
32-
3332
render(
3433
<Suspense fallback={<Loader />}>
35-
<HotApp />
34+
<App />
3635
</Suspense>,
3736
document.getElementById('root')
3837
);

‎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: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React, { useCallback, useRef } from 'react';
33
import { useSelector } from 'react-redux';
4-
import { browserHistory } from 'react-router';
4+
import { useHistory } from 'react-router-dom';
55
import { useTranslation } from 'react-i18next';
66
import useModalClose from '../../../common/useModalClose';
77

@@ -21,6 +21,8 @@ const Overlay = ({
2121

2222
const ref = useRef(null);
2323

24+
const browserHistory = useHistory();
25+
2426
const close = useCallback(() => {
2527
const node = ref.current;
2628
if (!node) return;

‎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/Editor.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,10 @@ class Editor extends React.Component {
500500
<button
501501
aria-label={this.props.t('Editor.OpenSketchARIA')}
502502
className="sidebar__contract"
503-
onClick={this.props.collapseSidebar}
503+
onClick={() => {
504+
this.props.collapseSidebar();
505+
this.props.closeProjectOptions();
506+
}}
504507
>
505508
<LeftArrowIcon focusable="false" aria-hidden="true" />
506509
</button>
@@ -588,6 +591,7 @@ Editor.propTypes = {
588591
).isRequired,
589592
isExpanded: PropTypes.bool.isRequired,
590593
collapseSidebar: PropTypes.func.isRequired,
594+
closeProjectOptions: PropTypes.func.isRequired,
591595
expandSidebar: PropTypes.func.isRequired,
592596
clearConsole: PropTypes.func.isRequired,
593597
hideRuntimeErrorWarning: PropTypes.func.isRequired,

‎client/modules/IDE/components/ErrorModal.jsx

Lines changed: 8 additions & 3 deletions
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 }) => {
@@ -69,9 +69,14 @@ const ErrorModal = ({ type, service, closeModal }) => {
6969
};
7070

7171
ErrorModal.propTypes = {
72-
type: PropTypes.string.isRequired,
72+
type: PropTypes.oneOf([
73+
'forceAuthentication',
74+
'staleSession',
75+
'staleProject',
76+
'oauthError'
77+
]).isRequired,
7378
closeModal: PropTypes.func.isRequired,
74-
service: PropTypes.string
79+
service: PropTypes.oneOf(['google', 'github'])
7580
};
7681

7782
ErrorModal.defaultProps = {

0 commit comments

Comments
 (0)