Remove Immutable JS

src/components/layers/LayerEditor.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Immutable from 'immutable'
 
 import Toolbar from 'rebass/dist/Toolbar'
 import NavItem from 'rebass/dist/NavItem'
@@ -29,8 +28,8 @@ class UnsupportedLayer extends React.Component {
 export default class LayerEditor extends React.Component {
   static propTypes = {
     layer: React.PropTypes.object.isRequired,
-    sources: React.PropTypes.instanceOf(Immutable.Map),
-    vectorLayers: React.PropTypes.instanceOf(Immutable.Map),
+    sources: React.PropTypes.object,
+    vectorLayers: React.PropTypes.object,
     onLayerChanged: React.PropTypes.func,
     onLayerDestroyed: React.PropTypes.func,
   }
@@ -94,7 +93,7 @@ export default class LayerEditor extends React.Component {
       return <PropertyGroup
         key={this.props.group}
         layer={this.props.layer}
-        groupFields={Immutable.OrderedSet(group.fields)}
+        groupFields={group.fields}
         onChange={this.onPropertyChange.bind(this)}
       />
     })
@@ -119,19 +118,20 @@ export default class LayerEditor extends React.Component {
         </NavItem>
       </Toolbar>
         {propertyGroups}
+           {this.props.layer.type !== 'background' && <div>
           <FilterEditor
             filter={this.props.layer.filter}
-            properties={this.props.vectorLayers.get(this.props.layer['source-layer'])}
-            onChange={f => this.onFilterChange(Immutable.fromJS(f))}
+            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+            onChange={f => this.onFilterChange(f)}
           />
-           {this.props.layer.type !== 'background'
-             && <SourceEditor
-              source={this.props.layer.source}
-              sourceLayer={this.props.layer['source-layer']}
-              sources={this.props.sources}
-              onSourceChange={console.log}
-              onSourceLayerChange={console.log}
-            />}
+          <SourceEditor
+            source={this.props.layer.source}
+            sourceLayer={this.props.layer['source-layer']}
+            sources={this.props.sources}
+            onSourceChange={console.log}
+            onSourceLayerChange={console.log}
+          />
+          </div>}
     </div>
   }
 }

src/components/layers/LayerList.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Immutable from 'immutable'
 
 import Heading from 'rebass/dist/Heading'
 import Toolbar from 'rebass/dist/Toolbar'
@@ -15,7 +14,7 @@ import { margins } from '../../config/scales.js'
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
-  layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
+  layers: React.PropTypes.array.isRequired,
   onLayersChanged: React.PropTypes.func.isRequired,
   onLayerSelected: React.PropTypes.func,
 }
@@ -34,23 +33,18 @@ class LayerListContainer extends React.Component {
   }
 
   onLayerDestroyed(deletedLayer) {
-    const remainingLayers = this.props.layers.delete(deletedLayer.get('id'))
+    const remainingLayers = this.props.layers.delete(deletedLayer.id)
     this.props.onLayersChanged(remainingLayers)
   }
 
-  onLayerChanged(layer) {
-    const changedLayers = this.props.layers.set(layer.get('id'), layer)
-    this.props.onLayersChanged(changedLayers)
-  }
-
   render() {
-    const layerPanels = this.props.layers.toIndexedSeq().map((layer, index) => {
-      const layerId = layer.get('id')
+    const layerPanels = this.props.layers.map((layer, index) => {
+      const layerId = layer.id
       return <LayerListItem
         index={index}
         key={layerId}
         layerId={layerId}
-        layerType={layer.get('type')}
+        layerType={layer.type}
         onLayerSelected={this.props.onLayerSelected}
       />
     })
@@ -73,13 +67,8 @@ export default class LayerList extends React.Component {
   onSortEnd(move) {
     const { oldIndex, newIndex } = move
     if(oldIndex === newIndex) return
-
-    //TODO: Implement this more performant for immutable collections
-    // instead of converting back and forth
-    let layers = this.props.layers.toArray()
+    let layers = this.props.layers.slice(0)
     layers = arrayMove(layers, oldIndex, newIndex)
-    layers = Immutable.OrderedMap(layers.map(l => [l.get('id'), l]))
-
     this.props.onLayersChanged(layers)
   }
 

src/components/layers/LayerListItem.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import PureRenderMixin from 'react-addons-pure-render-mixin'
 import Radium from 'radium'
-import Immutable from 'immutable'
 import Color from 'color'
 
 import Heading from 'rebass/dist/Heading'
@@ -38,11 +36,6 @@ class LayerListItem extends React.Component {
     onLayerSelected: React.PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props)
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-  }
-
   render() {
     return <li
       key={this.props.layerId}

src/components/layers/SourceEditor.jsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Immutable from 'immutable'
 
 import PropertyGroup from '../fields/PropertyGroup'
 import input from '../../config/input.js'
@@ -16,23 +14,18 @@ export default class SourceEditor extends React.Component {
 
     /** List of available sources in the style
      * https://www.mapbox.com/mapbox-gl-style-spec/#root-sources */
-    sources: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    sources: React.PropTypes.object.isRequired,
   }
 
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
   render() {
-		const options = this.props.sources.map((source, sourceId)=> {
+		const options = Object.keys(this.props.sources).map(sourceId => {
 			return <option key={sourceId} value={sourceId}>{sourceId}</option>
-		}).toIndexedSeq()
+		})
 
-    const layerOptions = this.props.sources.get(this.props.source, Immutable.Set()).map(vectorLayerId => {
+    const layerOptions = this.props.sources[this.props.source].map(vectorLayerId => {
       const id = vectorLayerId
 			return <option key={id} value={id}>{id}</option>
-		}).toIndexedSeq()
+		})
 
 	  return <div>
       <div style={input.property}>