fix(map): legend layers order fixes [EP-2851, EP-2852]

packages/earth-map/src/components/layers/Layers.tsx

@@ -23,9 +23,9 @@ import InfiniteList from 'components/infinite-list';
 import ListItem from 'components/list-item';
 import SearchBox from 'components/searchbox';
 import SidebarLayoutSearch from 'components/sidebar/sidebar-layout-search';
-import { debounce } from 'lodash';
+import { debounce, sortBy } from 'lodash';
 import { EPanels } from 'modules/sidebar/model';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import './styles.scss';
 
@@ -92,11 +92,14 @@ const Layers = (props: IProps) => {
   } = props;
 
   const { loading, search, listActive, nextPageCursor } = layers;
+
   const hasSearchTerm = !!search.search;
   const showX = hasSearchTerm;
   const showFilter = !selected || panelExpanded;
   const showBack = selected && panelExpanded;
 
+  const sortedLayers = sortBy(listActive, 'name');
+
   const handleChange = (e) => {
     const newValue = e.target.value;
     setLayersSearch({ search: newValue });
@@ -177,7 +180,7 @@ const Layers = (props: IProps) => {
                   deselect all
                 </a>
               </div>
-              {listActive.map((layer) => {
+              {sortedLayers.map((layer) => {
                 return (
                   <ListItem
                     active={true}

packages/earth-map/src/modules/layers/reducers.tsx

@@ -49,7 +49,7 @@ export default {
     const layer = payload;
     const newActiveLayers = listActive.find((x) => x.slug === layer.slug)
       ? listActive.filter((x) => x.slug !== layer.slug)
-      : [...listActive, layer];
+      : [layer, ...listActive];
 
     return {
       ...state,
@@ -58,12 +58,21 @@ export default {
     };
   },
   [actions.setLayerOrder]: (state, { payload }) => {
-    const { active } = state;
+    const { active, listActive } = state;
     const { datasetIds } = payload;
 
     const activeFiltered = active.filter((a) => !datasetIds.includes(a));
 
-    return { ...state, active: [...datasetIds, ...activeFiltered] };
+    const activeSlugs = [...datasetIds, ...activeFiltered];
+    const listActiveFiltered = activeSlugs.map((slug: string) =>
+      listActive.find((layer) => layer.slug === slug)
+    );
+
+    return {
+      ...state,
+      active: activeSlugs,
+      listActive: listActiveFiltered,
+    };
   },
   [actions.setLayerOpacity]: (state, { payload }) => {
     const oldSettings = state.settings;