fix(remove-compare): keep main layer when compare globe is removed (#197

)

* feat(url): sync selected layers state to url

* feat(url): sync selected layers state to url

* fix(remove-compare): keep selected main layer when compare globe is removed

* refactor(remove-compare): add conditional path

src/scripts/components/remove-compare/remove-compare.tsx

@@ -1,17 +1,26 @@
 import React, {FunctionComponent} from 'react';
 import {useIntl} from 'react-intl';
-import {Link} from 'react-router-dom';
+import {Link, matchPath, useLocation} from 'react-router-dom';
 
 import {RemoveIcon} from '../icons/remove-icon';
 
 import styles from './remove-compare.styl';
 
 const RemoveCompare: FunctionComponent = () => {
   const intl = useIntl();
+  const location = useLocation();
+  const match = matchPath(location.pathname, {
+    path: '(/|/layers)/:mainLayerId?/:compareLayerId?',
+    exact: true
+  });
+
+  const params = match && match.params;
+  const mainLayerId = (params && (params as any).mainLayerId) || '';
+  const newPath = mainLayerId ? `/layers/${mainLayerId}` : '/';
 
   return (
     <div className={styles.removeCompare}>
-      <Link to="/">
+      <Link to={newPath}>
         <button
           className={styles.icon}
           title={intl.formatMessage({id: 'remove-compare'})}>