Fix UI when loading invalid style with duplicate layer ids.

Also fix for throwing error when 2 layers exist with empty strings as ids.

src/components/layers/LayerEditor.jsx

@@ -107,7 +107,10 @@ export default class LayerEditor extends React.Component {
   }
 
   changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
+    this.props.onLayerChanged(
+      this.props.layerIndex,
+      changeProperty(this.props.layer, group, property, newValue)
+    )
   }
 
   onGroupToggle(groupTitle, active) {
@@ -151,13 +154,16 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
           error={errorData.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
         <LayerTypeBlock
           disabled={true}
           error={errorData.type}
           value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+          onChange={newType => this.props.onLayerChanged(
+            this.props.layerIndex,
+            changeType(this.props.layer, newType)
+          )}
         />
         {this.props.layer.type !== 'background' && <LayerSourceBlock
           error={errorData.sources}
@@ -209,7 +215,12 @@ export default class LayerEditor extends React.Component {
       />
       case 'jsoneditor': return <JSONEditor
         layer={this.props.layer}
-        onChange={this.props.onLayerChanged}
+        onChange={(layer) => {
+          this.props.onLayerChanged(
+            this.props.layerIndex,
+            layer
+          );
+        }}
       />
     }
   }
@@ -242,15 +253,15 @@ export default class LayerEditor extends React.Component {
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layer.id)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex)
       },
       hide: {
         text: (layout.visibility === "none") ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
       },
       moveLayerUp: {
         text: "Move layer up",

src/components/layers/LayerList.jsx

@@ -165,12 +165,15 @@ class LayerListContainer extends React.Component {
 
     const listItems = []
     let idx = 0
-    this.groupedLayers().forEach(layers => {
+    const layerIdCount = new Map();
+
+    const layersByGroup = this.groupedLayers();
+    layersByGroup.forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={[groupPrefix, idx].join('-')}
+          key={`group-${groupPrefix}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
@@ -189,6 +192,10 @@ class LayerListContainer extends React.Component {
           );
         });
 
+        layerIdCount.set(layer.id,
+          layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
+        );
+        const key = `${layer.id}-${layerIdCount.get(layer.id)}`;
         const listItem = <LayerListItem
           className={classnames({
             'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
@@ -196,8 +203,9 @@ class LayerListContainer extends React.Component {
             'maputnik-layer-list-item--error': !!layerError
           })}
           index={idx}
-          key={layer.id}
+          key={key}
           layerId={layer.id}
+          layerIndex={idx}
           layerType={layer.type}
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}

src/components/layers/LayerListItem.jsx

@@ -62,6 +62,7 @@ class IconAction extends React.Component {
 
 class LayerListItem extends React.Component {
   static propTypes = {
+    layerIndex: PropTypes.number.isRequired,
     layerId: PropTypes.string.isRequired,
     layerType: PropTypes.string.isRequired,
     isSelected: PropTypes.bool,
@@ -97,7 +98,7 @@ class LayerListItem extends React.Component {
 
     return <li
       key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerId)}
+      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}
       className={classnames({
         "maputnik-layer-list-item": true,
@@ -110,20 +111,20 @@ class LayerListItem extends React.Component {
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
           classBlockName="delete"
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
+          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
           classBlockName="duplicate"
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
+          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={visibilityAction}
           classBlockName="visibility"
           classBlockModifier={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
+          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
         />
     </li>
   }