diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx index 78a895d051c3233dc47076cb2bc4edbfb153b3c5..fd9631e23fa06939794773814e8114d447cfc65f 100644 --- a/src/components/monitor-list/monitor-list.jsx +++ b/src/components/monitor-list/monitor-list.jsx @@ -11,14 +11,14 @@ const MonitorList = props => ( <Box className={styles.monitorList} > - {props.monitors.valueSeq().map(monitorData => ( + {props.monitors.valueSeq().map((monitorData, index) => ( <Monitor - category={monitorData.category} + id={monitorData.id} + index={index} key={monitorData.id} - label={monitorData.label} + opcode={monitorData.opcode} + params={monitorData.params} value={monitorData.value} - x={monitorData.x} - y={monitorData.y} onDragEnd={props.onMonitorChange} /> ))} diff --git a/src/components/monitor/monitor.jsx b/src/components/monitor/monitor.jsx index 54b1ebe8a6cb6e3a20b78dadfc8fe7fd3a477bb7..9973d801e8174094a580b605e4d9c5653a090b7f 100644 --- a/src/components/monitor/monitor.jsx +++ b/src/components/monitor/monitor.jsx @@ -40,6 +40,7 @@ MonitorComponent.categories = categories; MonitorComponent.propTypes = { category: PropTypes.oneOf(Object.keys(categories)), + index: PropTypes.number, label: PropTypes.string.isRequired, onDragEnd: PropTypes.func.isRequired, value: PropTypes.string.isRequired, diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 4ec8681572efc567f9a54443f86d5199a8754f60..9bed328d40542625e0634961fb7729669269931e 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -1,6 +1,8 @@ const bindAll = require('lodash.bindall'); const React = require('react'); +const PropTypes = require('prop-types'); +const monitorAdapter = require('../lib/monitor-adapter.js'); const MonitorComponent = require('../components/monitor/monitor.jsx'); class Monitor extends React.Component { @@ -18,15 +20,23 @@ class Monitor extends React.Component { ); } render () { + const monitorProps = monitorAdapter(this.props); return ( <MonitorComponent - {...this.props} + {...monitorProps} onDragEnd={this.handleDragEnd} /> ); } } -Monitor.propTypes = MonitorComponent.propTypes; +Monitor.propTypes = { + id: PropTypes.string.isRequired, + index: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types + onDragEnd: PropTypes.func.isRequired, + opcode: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types + params: PropTypes.object, // eslint-disable-line react/no-unused-prop-types, react/forbid-prop-types + value: PropTypes.string.isRequired // eslint-disable-line react/no-unused-prop-types +}; module.exports = Monitor; diff --git a/src/lib/monitor-adapter.js b/src/lib/monitor-adapter.js index 60afdc3e500624917df1f6a7b53a8c29cfb030fd..dc66fd0b88c8273624ef0a07b30767add579ef51 100644 --- a/src/lib/monitor-adapter.js +++ b/src/lib/monitor-adapter.js @@ -4,14 +4,13 @@ * - Add missing XY position data if needed */ const OpcodeLabels = require('./opcode-labels.js'); -const MonitorRecord = require('./monitor-record'); const PADDING = 5; const MONITOR_HEIGHT = 23; const isUndefined = a => typeof a === 'undefined'; -module.exports = function ([key, {id, opcode, params, value, x, y}], index) { +module.exports = function ({id, index, opcode, params, value, x, y}) { let {label, category, labelFn} = OpcodeLabels(opcode); // Use labelFn if provided for dynamic labelling (e.g. variables) @@ -23,5 +22,5 @@ module.exports = function ([key, {id, opcode, params, value, x, y}], index) { if (isUndefined(x)) x = PADDING; if (isUndefined(y)) y = PADDING + (index * (PADDING + MONITOR_HEIGHT)); - return [key, MonitorRecord({id, label, category, value, x, y})]; + return {id, label, category, value, x, y}; }; diff --git a/src/lib/monitor-record.js b/src/lib/monitor-record.js deleted file mode 100644 index e468a7ac04224fd2e8f64ccf7b8aa9979a500315..0000000000000000000000000000000000000000 --- a/src/lib/monitor-record.js +++ /dev/null @@ -1,12 +0,0 @@ -const {Record} = require('immutable'); - -const MonitorRecord = Record({ - id: null, - label: null, - value: null, - category: null, - x: null, - y: null -}); - -module.exports = MonitorRecord; diff --git a/src/reducers/monitors.js b/src/reducers/monitors.js index b2a74ec5e3811c0d6e2b78b176ffa9a509a5601a..e21e67a0193a5a1d40a9690a877d05cd75ca0aa4 100644 --- a/src/reducers/monitors.js +++ b/src/reducers/monitors.js @@ -1,5 +1,3 @@ -const monitorAdapter = require('../lib/monitor-adapter.js'); - const UPDATE_MONITORS = 'scratch-gui/monitors/UPDATE_MONITORS'; const {OrderedMap} = require('immutable'); @@ -9,7 +7,7 @@ const reducer = function (state, action) { if (typeof state === 'undefined') state = initialState; switch (action.type) { case UPDATE_MONITORS: - return action.monitors.mapEntries(monitorAdapter); + return action.monitors; default: return state; }