Merge pull request #637 from orangemug/fix/console-errors-2020-04-06

Fix a bunch of errors/warnings from the console

package-lock.json

@@ -2490,6 +2490,11 @@
         "is-string": "^1.0.5"
       }
     },
+    "array-move": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.2.1.tgz",
+      "integrity": "sha512-qQpEHBnVT6HAFgEVUwRdHVd8TYJThrZIT5wSXpEUTPwBaYhPLclw12mEpyUvRWVdl1VwPOqnIy6LqTFN3cSeUQ=="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mapbox-gl-style-spec": "^13.12.0",
     "@mdi/react": "^1.3.0",
+    "array-move": "^2.2.1",
     "classnames": "^2.2.6",
     "codemirror": "^5.52.0",
     "color": "^3.1.2",

src/components/App.jsx

@@ -4,7 +4,7 @@ import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import get from 'lodash.get'
 import {unset} from 'lodash'
-import {arrayMove} from 'react-sortable-hoc'
+import arrayMove from 'array-move'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -353,7 +353,7 @@ export default class App extends React.Component {
           parsed: {
             type: "layer",
             data: {
-              index,
+              index: parseInt(index, 10),
               key: "id",
               message,
             }
@@ -371,7 +371,7 @@ export default class App extends React.Component {
           parsed: {
             type: "layer",
             data: {
-              index,
+              index: parseInt(index, 10),
               key,
               message
             }

src/components/fields/DocLabel.jsx

@@ -9,8 +9,8 @@ export default class DocLabel extends React.Component {
       PropTypes.object,
       PropTypes.string
     ]).isRequired,
-    fieldSpec: PropTypes.object.isRequired,
-    onToggleDoc: PropTypes.func.isRequired,
+    fieldSpec: PropTypes.object,
+    onToggleDoc: PropTypes.func,
   }
 
   constructor (props) {

src/components/filter/FilterEditor.jsx

@@ -223,7 +223,7 @@ export default class CombiningFilterEditor extends React.Component {
         const error = errors[`filter[${idx+1}]`];
 
         return (
-          <>
+          <div key={`block-${idx}`}>
             <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
               <SingleFilterEditor
                 properties={this.props.properties}
@@ -232,9 +232,9 @@ export default class CombiningFilterEditor extends React.Component {
               />
             </FilterEditorBlock>
             {error &&
-              <div className="maputnik-inline-error">{error.message}</div>
+              <div key="error" className="maputnik-inline-error">{error.message}</div>
             }
-          </>
+          </div>
         );
       })
 

src/components/inputs/StringInput.jsx

@@ -33,6 +33,7 @@ class StringInput extends React.Component {
         value: props.value
       };
     }
+    return {};
   }
 
   render() {

src/components/layers/LayerIdBlock.jsx

@@ -10,7 +10,7 @@ class LayerIdBlock extends React.Component {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-    error: PropTypes.object.isRequired,
+    error: PropTypes.object,
   }
 
   render() {

src/components/layers/LayerList.jsx

@@ -165,10 +165,12 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
-  componentDidUpdate () {
-    const selectedItemNode = this.selectedItemRef.current;
-    if (selectedItemNode && selectedItemNode.node) {
-      selectedItemNode.node.scrollIntoView();
+  componentDidUpdate (prevProps) {
+    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
+      const selectedItemNode = this.selectedItemRef.current;
+      if (selectedItemNode && selectedItemNode.node) {
+        selectedItemNode.node.scrollIntoView();
+      }
     }
   }
 
@@ -184,7 +186,7 @@ class LayerListContainer extends React.Component {
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={`group-${groupPrefix}`}
+          key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}