Skip to content

Commit 75b90e7

Browse files
authored
Merge branch 'develop' into code-coverage
2 parents 3deef8a + 2255bf1 commit 75b90e7

File tree

7 files changed

+68
-69
lines changed

7 files changed

+68
-69
lines changed

client/components/Nav.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@ class Nav extends React.PureComponent {
278278
onClick={this.toggleDropdownForFile}
279279
onBlur={this.handleBlur}
280280
onFocus={this.clearHideTimeout}
281+
title="File"
281282
onMouseOver={() => {
282283
if (this.state.dropdownOpen !== 'none') {
283284
this.setDropdown('file');
@@ -396,6 +397,7 @@ class Nav extends React.PureComponent {
396397
onClick={this.toggleDropdownForEdit}
397398
onBlur={this.handleBlur}
398399
onFocus={this.clearHideTimeout}
400+
title="Edit"
399401
onMouseOver={() => {
400402
if (this.state.dropdownOpen !== 'none') {
401403
this.setDropdown('edit');
@@ -454,6 +456,7 @@ class Nav extends React.PureComponent {
454456
onClick={this.toggleDropdownForSketch}
455457
onBlur={this.handleBlur}
456458
onFocus={this.clearHideTimeout}
459+
title="Sketch"
457460
onMouseOver={() => {
458461
if (this.state.dropdownOpen !== 'none') {
459462
this.setDropdown('sketch');
@@ -539,6 +542,7 @@ class Nav extends React.PureComponent {
539542
onClick={this.toggleDropdownForHelp}
540543
onBlur={this.handleBlur}
541544
onFocus={this.clearHideTimeout}
545+
title="Help"
542546
onMouseOver={() => {
543547
if (this.state.dropdownOpen !== 'none') {
544548
this.setDropdown('help');
@@ -600,6 +604,7 @@ class Nav extends React.PureComponent {
600604
onClick={this.toggleDropdownForLang}
601605
onBlur={this.handleBlur}
602606
onFocus={this.clearHideTimeout}
607+
title="Language"
603608
onMouseOver={() => {
604609
if (this.state.dropdownOpen !== 'none') {
605610
this.setDropdown('lang');
@@ -760,15 +765,15 @@ class Nav extends React.PureComponent {
760765
this.renderLanguageMenu(navDropdownState)}
761766
<li className="nav__item">
762767
<Link to="/login" className="nav__auth-button">
763-
<span className="nav__item-header">
768+
<span className="nav__item-header" title="Login">
764769
{this.props.t('Nav.Login')}
765770
</span>
766771
</Link>
767772
</li>
768773
<span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
769774
<li className="nav__item">
770775
<Link to="/signup" className="nav__auth-button">
771-
<span className="nav__item-header">
776+
<span className="nav__item-header" title="SignUp">
772777
{this.props.t('Nav.SignUp')}
773778
</span>
774779
</Link>

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ exports[`Nav renders correctly 1`] = `
2222
<li
2323
class="nav__item"
2424
>
25-
<button>
25+
<button
26+
title="File"
27+
>
2628
<span
2729
class="nav__item-header"
2830
/>
@@ -65,7 +67,9 @@ exports[`Nav renders correctly 1`] = `
6567
<li
6668
class="nav__item"
6769
>
68-
<button>
70+
<button
71+
title="Edit"
72+
>
6973
<span
7074
class="nav__item-header"
7175
/>
@@ -116,7 +120,9 @@ exports[`Nav renders correctly 1`] = `
116120
<li
117121
class="nav__item"
118122
>
119-
<button>
123+
<button
124+
title="Sketch"
125+
>
120126
<span
121127
class="nav__item-header"
122128
/>
@@ -166,7 +172,9 @@ exports[`Nav renders correctly 1`] = `
166172
<li
167173
class="nav__item"
168174
>
169-
<button>
175+
<button
176+
title="Help"
177+
>
170178
<span
171179
class="nav__item-header"
172180
/>

client/modules/IDE/components/Console.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@ const Console = () => {
267267
style={{ fontSize }}
268268
>
269269
<ConsoleFeed
270+
variant={theme === 'light' ? 'light' : 'dark'}
270271
styles={getConsoleFeedStyle(theme, fontSize)}
271272
logs={consoleEvents}
272273
key={`${theme}-${fontSize}`}

client/modules/IDE/components/Editor.jsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
5151
import RightArrowIcon from '../../../images/right-arrow.svg';
5252
import LeftArrowIcon from '../../../images/left-arrow.svg';
5353
import { getHTMLFile } from '../reducers/files';
54-
import { getIsUserOwner } from '../selectors/users';
5554

5655
import * as FileActions from '../actions/files';
5756
import * as IDEActions from '../actions/ide';
@@ -420,10 +419,7 @@ class Editor extends React.Component {
420419
) : null}
421420
</span>
422421
</span>
423-
<Timer
424-
projectSavedTime={this.props.projectSavedTime}
425-
isUserOwner={this.props.isUserOwner}
426-
/>
422+
<Timer />
427423
</div>
428424
</header>
429425
<article
@@ -474,7 +470,6 @@ Editor.propTypes = {
474470
isPlaying: PropTypes.bool.isRequired,
475471
theme: PropTypes.string.isRequired,
476472
unsavedChanges: PropTypes.bool.isRequired,
477-
projectSavedTime: PropTypes.string.isRequired,
478473
files: PropTypes.arrayOf(
479474
PropTypes.shape({
480475
id: PropTypes.string.isRequired,
@@ -485,7 +480,6 @@ Editor.propTypes = {
485480
isExpanded: PropTypes.bool.isRequired,
486481
collapseSidebar: PropTypes.func.isRequired,
487482
expandSidebar: PropTypes.func.isRequired,
488-
isUserOwner: PropTypes.bool.isRequired,
489483
clearConsole: PropTypes.func.isRequired,
490484
// showRuntimeErrorWarning: PropTypes.func.isRequired,
491485
hideRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -516,9 +510,7 @@ function mapStateToProps(state) {
516510
...state.ide,
517511
...state.project,
518512
...state.editorAccessibility,
519-
isExpanded: state.ide.sidebarIsExpanded,
520-
projectSavedTime: state.project.updatedAt,
521-
isUserOwner: getIsUserOwner(state)
513+
isExpanded: state.ide.sidebarIsExpanded
522514
};
523515
}
524516

client/modules/IDE/components/Preferences/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@ class Preferences extends React.Component {
5959
}
6060

6161
decreaseFontSize() {
62-
const newValue = this.state.fontSize - 2;
62+
const newValue = Number(this.state.fontSize) - 2;
6363
this.setFontSize(newValue);
6464
}
6565

6666
increaseFontSize() {
67-
const newValue = this.state.fontSize + 2;
67+
const newValue = Number(this.state.fontSize) + 2;
6868
this.setFontSize(newValue);
6969
}
7070

Lines changed: 38 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,46 @@
11
import classNames from 'classnames';
2-
import PropTypes from 'prop-types';
3-
import React from 'react';
4-
import { withTranslation } from 'react-i18next';
2+
import React, { useEffect, useState } from 'react';
3+
import { useTranslation } from 'react-i18next';
4+
import { useSelector } from 'react-redux';
55

66
import dates from '../../../utils/formatDate';
7+
import useInterval from '../hooks/useInterval';
8+
import { getIsUserOwner } from '../selectors/users';
79

8-
class Timer extends React.Component {
9-
constructor(props) {
10-
super(props);
11-
this.showSavedTime = this.showSavedTime.bind(this);
12-
}
13-
14-
componentDidMount() {
15-
this.interval = setInterval(() => this.forceUpdate(), 10000);
16-
}
17-
18-
componentWillUnmount() {
19-
if (this.interval) {
20-
clearInterval(this.interval);
21-
}
22-
}
23-
24-
showSavedTime() {
25-
const timeAgo = dates.distanceInWordsToNow(this.props.projectSavedTime);
26-
return this.props.t('Timer.SavedAgo', { timeAgo });
27-
}
28-
29-
render() {
30-
const timerClass = classNames({
31-
'timer__saved-time': true,
32-
'timer__saved-time--notOwner': !this.props.isUserOwner
33-
});
34-
return (
35-
<span className={timerClass}>
36-
{this.props.projectSavedTime !== '' ? this.showSavedTime() : null}
37-
</span>
38-
);
39-
}
40-
}
10+
const Timer = () => {
11+
const projectSavedTime = useSelector((state) => state.project.updatedAt);
12+
const isUserOwner = useSelector(getIsUserOwner);
4113

42-
Timer.propTypes = {
43-
projectSavedTime: PropTypes.string.isRequired,
44-
isUserOwner: PropTypes.bool,
45-
t: PropTypes.func.isRequired
46-
};
14+
const { t } = useTranslation();
4715

48-
Timer.defaultProps = {
49-
isUserOwner: false
16+
const [timeAgo, setTimeAgo] = useState('');
17+
18+
// Update immediately upon saving.
19+
useEffect(() => {
20+
setTimeAgo(
21+
projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
22+
);
23+
}, [projectSavedTime]);
24+
25+
// Update every 10 seconds.
26+
useInterval(
27+
() =>
28+
setTimeAgo(
29+
projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
30+
),
31+
10000
32+
);
33+
34+
const timerClass = classNames({
35+
'timer__saved-time': true,
36+
'timer__saved-time--notOwner': !isUserOwner
37+
});
38+
39+
return (
40+
<span className={timerClass}>
41+
{timeAgo ? t('Timer.SavedAgo', { timeAgo }) : null}
42+
</span>
43+
);
5044
};
5145

52-
export default withTranslation()(Timer);
46+
export default Timer;

client/utils/p5-javascript.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,14 +158,12 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
158158
} else if (wordRE.test(ch)) {
159159
stream.eatWhile(wordRE);
160160
var word = stream.current()
161-
if (state.lastType != ".") {
162-
if (keywords.propertyIsEnumerable(word)) {
163-
var kw = keywords[word]
164-
return ret(kw.type, kw.style, word)
165-
}
166-
if (word == "async" && stream.match(/^(\s|\/\*.*?\*\/)*[\[\(\w]/, false))
167-
return ret("async", "keyword", word)
161+
if (keywords.propertyIsEnumerable(word)) {
162+
var kw = keywords[word]
163+
return ret(kw.type, kw.style, word)
168164
}
165+
if (state.lastType != "." && word == "async" && stream.match(/^(\s|\/\*.*?\*\/)*[\[\(\w]/, false))
166+
return ret("async", "keyword", word)
169167
return ret("variable", "variable", word)
170168
}
171169
}
@@ -285,6 +283,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
285283
if (combinator(type, content)) {
286284
while(cc.length && cc[cc.length - 1].lex)
287285
cc.pop()();
286+
if (style?.slice(0, 2) === "p5") return style;
288287
if (cx.marked) return cx.marked;
289288
if (type == "variable" && inScope(state, content)) return "variable-2";
290289
return style;

0 commit comments

Comments
 (0)