I. #32 sorting working with single layers

Sorting is working with single layer services. It is not working yet
with multi layer services such as coastal habitats or protected areas.

Scrolling on drag is also not set up yet

map-viewer/src/Map.jsx

@@ -18,6 +18,8 @@ import mapLayers from './LayerDefinitions';
 import { coastalHabitats } from './ScaleDefinitions';
 import { protectedLayers } from './ScaleDefinitions';
 
+import {arrayMoveImmutable} from 'array-move';
+
 
 // import MyComponent from './components/MyComponent';
 
@@ -550,7 +552,8 @@ const Map = () => {
       setLayers({...visibleLayersUpdate});
     }
     else {
-      selectedServicesUpdate.push(serviceResult);
+      //Using concat because we want newly added things in front of array 
+      selectedServicesUpdate = [serviceResult].concat(selectedServicesUpdate);
       //You're calling setNumbers and passing it the array it already has.
       //You've changed one of its values but it's still the same array, and
       //I suspect React doesn't see any reason to re-render because state
@@ -562,6 +565,7 @@ const Map = () => {
         // Check 'all' for coastal protection case where we want this one 
         // layer visible across all scales
         if((layer.scaleID === scale.current || layer.scaleID === 'all') && layer.serviceType === serviceResult) {
+          map.moveLayer(layer.layerID);
           map.setLayoutProperty(layer.layerID, 'visibility', 'visible');
           visibleLayersUpdate[serviceResult] = {...layer};
 
@@ -601,6 +605,31 @@ const Map = () => {
     setMap(map);
   }
 
+  const changeLayerOrder = (servicesSorted, oldIndex, newIndex) => {
+    console.log("change order");
+    console.log(selectedServices);
+    console.log(oldIndex + " : " + newIndex);
+    const reversedServices = servicesSorted.slice().reverse();
+    reversedServices.forEach((serviceType, i) => {
+      const zbackId = visibleLayers[serviceType].layerID;
+      if(reversedServices.length < i+1) {
+        const nextService = reversedServices[i+1];
+        const zfrontId = visibleLayers[nextService].layerID;
+        map.moveLayer(zbackId, zfrontId);
+      }
+      else {
+        map.moveLayer(zbackId);
+      }
+    });
+
+    setServices(() => {
+        return arrayMoveImmutable(selectedServices, oldIndex, newIndex);
+    });
+    console.log("servicesSorted ", servicesSorted);
+    console.log("selectedServices: after order change ", [...selectedServices]);
+    setMap(map);
+  };
+
   return (
       <Col className="map-container" ref={mapContainer} >
         <VerticalMenu
@@ -612,6 +641,7 @@ const Map = () => {
         <Legend
           layers={visibleLayers}
           services={selectedServices}
+          changeLayerOrder={changeLayerOrder}
         />
         <BasemapControl className="basemap-control"
           basemaps={basemaps}

map-viewer/src/components/Legend.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import ListGroup from 'react-bootstrap/ListGroup';
@@ -138,12 +138,10 @@ const SortableContainer = sortableContainer(({children}) => {
 
 
 const Legend = (props) => {
-  const [items, setItems] = useState(props.services);
 
   function handleDragEnd({oldIndex, newIndex}) {
-    setItems(() => {
-        return arrayMoveImmutable(items, oldIndex, newIndex);
-    });
+    const sortedServices = arrayMoveImmutable(props.services, oldIndex, newIndex);
+    props.changeLayerOrder(sortedServices, oldIndex, newIndex);
   }
 
   const renderLegend = (serviceType, i) => {
@@ -180,6 +178,7 @@ const Legend = (props) => {
 Legend.propTypes = {
   layers: PropTypes.object.isRequired,
   services: PropTypes.array.isRequired,
+  changeLayerOrder: PropTypes.func.isRequired,
 }
 
 export default Legend;