move the conversion of monitor record to monitor component proptypes to the monitor container

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}
             />
         ))}

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,

src/containers/monitor.jsx

 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;

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};
 };

src/lib/monitor-record.js

-const {Record} = require('immutable');
-
-const MonitorRecord = Record({
-    id: null,
-    label: null,
-    value: null,
-    category: null,
-    x: null,
-    y: null
-});
-
-module.exports = MonitorRecord;

src/reducers/monitors.js

-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;
     }