Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React: Remove uses of React.createClass in netsim #17630

Merged
merged 4 commits into from Sep 8, 2017
Merged

React: Remove uses of React.createClass in netsim #17630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1dab544
ES6ify NetSimLogBrowser
islemaster Sep 8, 2017
0ce4db3
ES6ify NetSimLogBrowserFilters
islemaster Sep 8, 2017
d11693f
ES6ify NetSimLogBrowserTable
islemaster Sep 8, 2017
0705e1c
ES6ify NetSimView
islemaster Sep 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 12 additions & 20 deletions apps/src/netsim/NetSimLogBrowser.jsx
View file
Open in desktop
Expand Up @@ -14,8 +14,9 @@ const style = {
}
};

const NetSimLogBrowser = React.createClass({
propTypes: Object.assign({}, Dialog.propTypes, {
export default class NetSimLogBrowser extends React.Component {
static propTypes = {
...Dialog.propTypes,
i18n: PropTypes.objectOf(PropTypes.func).isRequired,
canSetRouterLogMode: PropTypes.bool,
isAllRouterLogMode: PropTypes.bool,
Expand All @@ -28,14 +29,12 @@ const NetSimLogBrowser = React.createClass({
senderNames: PropTypes.arrayOf(PropTypes.string).isRequired,
renderedRowLimit: PropTypes.number,
teacherView: PropTypes.bool
}),
};

getDefaultProps() {
return {
isAllRouterLogMode: true,
currentTrafficFilter: 'none'
};
},
static defaultProps = {
isAllRouterLogMode: true,
currentTrafficFilter: 'none'
};

dialogTitle() {
const {i18n, teacherView, isAllRouterLogMode, currentTrafficFilter} = this.props;
Expand Down Expand Up @@ -63,17 +62,11 @@ const NetSimLogBrowser = React.createClass({
}
}
return header;
},
}

getInitialState() {
return {
currentSentByFilter: 'none'
};
},
state = {currentSentByFilter: 'none'};

setSentByFilter(newFilter) {
this.setState({ currentSentByFilter: newFilter});
},
setSentByFilter = (currentSentByFilter) => this.setState({currentSentByFilter});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we cool with using (still-experimental) class properties for this and state?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! We've been using the Class properties transform for six months now and at least on starlabs we've been really into it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Yeah, they're so much cleaner than manual binding. I'mma start doing the same


render() {
return (
Expand Down Expand Up @@ -107,5 +100,4 @@ const NetSimLogBrowser = React.createClass({
</Dialog>
);
}
});
export default NetSimLogBrowser;
}
45 changes: 19 additions & 26 deletions apps/src/netsim/NetSimLogBrowserFilters.jsx
View file
Open in desktop
Expand Up @@ -21,8 +21,8 @@ const style = {
/**
* Filter controls for Log Browser Modal
*/
const NetSimLogBrowserFilters = React.createClass({
propTypes: {
export default class NetSimLogBrowserFilters extends React.Component {
static propTypes = {
i18n: PropTypes.objectOf(PropTypes.func).isRequired,
canSetRouterLogMode: PropTypes.bool,
isAllRouterLogMode: PropTypes.bool,
Expand All @@ -34,7 +34,7 @@ const NetSimLogBrowserFilters = React.createClass({
setSentByFilter: PropTypes.func.isRequired,
teacherView: PropTypes.bool,
senderNames: PropTypes.arrayOf(PropTypes.string).isRequired
},
};

render() {
return (
Expand Down Expand Up @@ -63,19 +63,16 @@ const NetSimLogBrowserFilters = React.createClass({
</div>
);
}
});
export default NetSimLogBrowserFilters;
}

const RouterLogModeDropdown = React.createClass({
propTypes: {
class RouterLogModeDropdown extends React.Component {
static propTypes = {
i18n: PropTypes.objectOf(PropTypes.func).isRequired,
isAllRouterLogMode: PropTypes.bool,
setRouterLogMode: PropTypes.func.isRequired
},
};

onChange(event) {
this.props.setRouterLogMode(event.target.value);
},
onChange = (event) => this.props.setRouterLogMode(event.target.value);

render() {
return (
Expand All @@ -95,19 +92,17 @@ const RouterLogModeDropdown = React.createClass({
</select>
);
}
});
}

const TrafficFilterDropdown = React.createClass({
propTypes: {
class TrafficFilterDropdown extends React.Component {
static propTypes = {
i18n: PropTypes.objectOf(PropTypes.func).isRequired,
localAddress: PropTypes.string,
currentTrafficFilter: PropTypes.string.isRequired,
setTrafficFilter: PropTypes.func.isRequired
},
};

onChange(event) {
this.props.setTrafficFilter(event.target.value);
},
onChange = (event) => this.props.setTrafficFilter(event.target.value);

render() {
return (
Expand All @@ -133,19 +128,17 @@ const TrafficFilterDropdown = React.createClass({
</select>
);
}
});
}

export const SentByDropdown = React.createClass({
propTypes: {
export class SentByDropdown extends React.Component {
static propTypes = {
i18n: PropTypes.objectOf(PropTypes.func).isRequired,
currentSentByFilter: PropTypes.string.isRequired,
setSentByFilter: PropTypes.func.isRequired,
senderNames: PropTypes.arrayOf(PropTypes.string).isRequired
},
};

onChange(event) {
this.props.setSentByFilter(event.target.value);
},
onChange = (event) => this.props.setSentByFilter(event.target.value);

render() {
return (
Expand All @@ -168,4 +161,4 @@ export const SentByDropdown = React.createClass({
</select>
);
}
});
}
29 changes: 12 additions & 17 deletions apps/src/netsim/NetSimLogBrowserTable.jsx
View file
Open in desktop
Expand Up @@ -32,29 +32,25 @@ style.prewrapTd = Object.assign({}, style.td, style.prewrap);
* Wraps configuration and sorting behavior around a Reactabular table.
* @see http://reactabular.js.org
*/
const NetSimLogBrowserTable = React.createClass({
propTypes: {
export default class NetSimLogBrowserTable extends React.Component {
static propTypes = {
logRows: PropTypes.arrayOf(PropTypes.object).isRequired,
headerFields: PropTypes.arrayOf(PropTypes.string).isRequired,
renderedRowLimit: PropTypes.number,
teacherView: PropTypes.bool,
currentSentByFilter: PropTypes.string.isRequired
},
};

getInitialState() {
return {
sortingColumns: {
0: {direction: 'desc', position: 0}
}
};
},
state = {
sortingColumns: {
0: {direction: 'desc', position: 0}
}
};

getSortingColumns() {
return this.state.sortingColumns || {};
},
getSortingColumns = () => this.state.sortingColumns || {};

// The user requested sorting, adjust the sorting state accordingly.
onSort(selectedColumn) {
onSort = (selectedColumn) => {
this.setState({
sortingColumns: sort.byColumn({
sortingColumns: this.state.sortingColumns,
Expand All @@ -67,7 +63,7 @@ const NetSimLogBrowserTable = React.createClass({
selectedColumn
})
});
},
};

render() {
const headerFields = this.props.headerFields;
Expand Down Expand Up @@ -210,8 +206,7 @@ const NetSimLogBrowserTable = React.createClass({
</Table.Provider>
);
}
});
export default NetSimLogBrowserTable;
}

function timeFormatter(timestamp) {
return moment(timestamp).format('h:mm:ss.SSS A');
Expand Down
20 changes: 9 additions & 11 deletions apps/src/netsim/NetSimView.jsx
View file
Open in desktop
@@ -1,27 +1,25 @@

import React, {PropTypes} from 'react';
var ProtectedStatefulDiv = require('../templates/ProtectedStatefulDiv');
var StudioAppWrapper = require('../templates/StudioAppWrapper');
import ProtectedStatefulDiv from '../templates/ProtectedStatefulDiv';
import StudioAppWrapper from '../templates/StudioAppWrapper';

/**
* Top-level React wrapper for our NetSim app.
*/
var NetSimView = React.createClass({
propTypes: {
export default class NetSimView extends React.Component {
static propTypes = {
generateCodeAppHtml: PropTypes.func.isRequired,
onMount: PropTypes.func.isRequired
},
};

componentDidMount: function () {
componentDidMount() {
this.props.onMount();
},
}

render: function () {
render() {
return (
<StudioAppWrapper>
<ProtectedStatefulDiv contentFunction={this.props.generateCodeAppHtml} />
</StudioAppWrapper>
);
}
});
module.exports = NetSimView;
}