From 292bf3e54e03ae56f7c75cc2d93351f39a7e59e7 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Tue, 30 May 2017 12:23:59 -0400
Subject: [PATCH] move the conversion of monitor record to monitor component
proptypes to the monitor container
---
src/components/monitor-list/monitor-list.jsx | 10 +++++-----
src/components/monitor/monitor.jsx | 1 +
src/containers/monitor.jsx | 14 ++++++++++++--
src/lib/monitor-adapter.js | 5 ++---
src/lib/monitor-record.js | 12 ------------
src/reducers/monitors.js | 4 +---
6 files changed, 21 insertions(+), 25 deletions(-)
delete mode 100644 src/lib/monitor-record.js
diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index 78a895d05..fd9631e23 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 54b1ebe8a..9973d801e 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 4ec868157..9bed328d4 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 60afdc3e5..dc66fd0b8 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 e468a7ac0..000000000
--- 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 b2a74ec5e..e21e67a01 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;
}
--
GitLab