From f41cf59aa5e7790b5e159767985c69b3031da9e1 Mon Sep 17 00:00:00 2001
From: Doug <dcdenu4@gmail.com>
Date: Thu, 23 Sep 2021 15:40:03 -0400
Subject: [PATCH] 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               | 32 +++++++++++++++++++++++++++-
 map-viewer/src/components/Legend.jsx |  9 ++++----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/map-viewer/src/Map.jsx b/map-viewer/src/Map.jsx
index 09f7733..ab7def2 100644
--- a/map-viewer/src/Map.jsx
+++ b/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}
diff --git a/map-viewer/src/components/Legend.jsx b/map-viewer/src/components/Legend.jsx
index d63e7e1..ed699b8 100644
--- a/map-viewer/src/components/Legend.jsx
+++ b/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;