use maps in gui

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-react": "^6.10.0",
     "gh-pages": "^0.12.0",
     "html-webpack-plugin": "2.28.0",
+    "immutable": "3.8.1",
     "lodash.bindall": "4.4.0",
     "lodash.defaultsdeep": "4.6.0",
     "lodash.isequal": "4.5.0",

src/components/monitor-list/monitor-list.jsx

@@ -2,6 +2,8 @@ const React = require('react');
 const Box = require('../box/box.jsx');
 const Monitor = require('../../containers/monitor.jsx');
 const PropTypes = require('prop-types');
+const {Map} = require('immutable');
+
 
 const styles = require('./monitor-list.css');
 
@@ -9,10 +11,14 @@ const MonitorList = props => (
     <Box
         className={styles.monitorList}
     >
-        {props.monitors.map(monitorData => (
+        {props.monitors.valueSeq().map(monitorData => (
             <Monitor
-                {...monitorData}
-                key={monitorData.id}
+                color={monitorData.get('color')}
+                key={monitorData.get('id')}
+                label={monitorData.get('label')}
+                value={monitorData.get('value')}
+                x={monitorData.get('x')}
+                y={monitorData.get('y')}
                 onDragEnd={props.onMonitorChange}
             />
         ))}
@@ -20,13 +26,7 @@ const MonitorList = props => (
 );
 
 MonitorList.propTypes = {
-    monitors: PropTypes.arrayOf(PropTypes.shape({
-        color: PropTypes.string,
-        label: PropTypes.string.isRequired,
-        value: PropTypes.string.isRequired,
-        x: PropTypes.number,
-        y: PropTypes.number
-    })),
+    monitors: PropTypes.instanceOf(Map),
     onMonitorChange: PropTypes.func.isRequired
 };
 

src/reducers/monitors.js

 const UPDATE_MONITORS = 'scratch-gui/monitors/UPDATE_MONITORS';
+const {Map} = require('immutable');
 
-const initialState = [];
+const initialState = Map();
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
     case UPDATE_MONITORS:
-        return [...action.monitors];
+        return action.monitors;
     default:
         return state;
     }