feat(remove-compare): add remove compare data set button (#193)

* feat(data-set-info): display data set info in data mode

* refactor(data-set-info): use reduce instead of forEach

* style(data-set-info): remove console.log

* refactor(data-set-info): add layer selector, rename selectedLayerSelector to selectedLayerIdsSelector

* style(layer-selector): remove curly braces

* refactor(selectors): move all selectors to separate folder

* refactor(globes): rename selector const

* refactor(layer-loader): rename selector const

* feat(remove-compare): add remove compare-globe button

i18n/de.json

@@ -14,5 +14,6 @@
   "share": "Inhalt teilen",
   "export": "Daten exportieren",
   "info": "Weitere Informationen",
+  "remove-compare": "Vergleich entfernen",
   "data-info": "Dateninformation"
 }

i18n/en.json

@@ -14,5 +14,6 @@
   "share": "Share Content",
   "export": "Export Data",
   "info": "More Information",
+  "remove-compare": "Remove Compare",
   "data-info": "Data Information"
 }

src/scripts/components/data-set-info/data-set-info.styl

@@ -15,3 +15,8 @@
   margin-top: 0
   color: #fff
   font-size: 1em
+
+.buttons
+  display: flex
+  flex-direction: row
+  align-self: center

src/scripts/components/data-set-info/data-set-info.tsx

@@ -2,6 +2,7 @@ import React, {FunctionComponent} from 'react';
 import {useSelector} from 'react-redux';
 
 import {selectedLayersSelector} from '../../selectors/layers/selected';
+import RemoveCompare from '../remove-compare/remove-compare';
 import InfoButton from '../info-button/info-button';
 
 import styles from './data-set-info.styl';
@@ -12,16 +13,16 @@ interface Props {
 
 const DataSetInfo: FunctionComponent<Props> = ({isMain}) => {
   const {main, compare} = useSelector(selectedLayersSelector);
+  const layer = isMain ? main : compare;
 
   return (
     <div className={styles.dataSetInfo}>
-      <h1 className={styles.title}>
-        {isMain ? main && main.name : compare && compare.name}
-      </h1>
-      <h2 className={styles.description}>
-        {isMain ? main && main.description : compare && compare.description}
-      </h2>
-      <InfoButton layer={main || compare} />
+      <h1 className={styles.title}>{layer && layer.name}</h1>
+      <h2 className={styles.description}>{layer && layer.description}</h2>
+      <div className={styles.buttons}>
+        <InfoButton layer={layer} />
+        {!isMain && <RemoveCompare />}
+      </div>
     </div>
   );
 };

src/scripts/components/icons/remove-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const RemoveIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+);

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

@@ -0,0 +1,15 @@
+.removeCompare
+  display: flex
+  flex-direction: column
+
+.icon
+  padding: 2px
+  outline: 0
+  border: none
+  border-radius: 50%
+  background-color: transparent
+  line-height: 50%
+  cursor: pointer
+
+  svg
+    fill: #fff

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

@@ -0,0 +1,30 @@
+import React, {FunctionComponent} from 'react';
+import {useDispatch} from 'react-redux';
+import {useIntl} from 'react-intl';
+
+import setSelectedLayerIdsAction from '../../actions/set-selected-layer-ids';
+import {RemoveIcon} from '../icons/remove-icon';
+
+import styles from './remove-compare.styl';
+
+const RemoveCompare: FunctionComponent = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const onButtonClick = () => {
+    dispatch(setSelectedLayerIdsAction(null, false));
+  };
+
+  return (
+    <div className={styles.removeCompare}>
+      <button
+        className={styles.icon}
+        title={intl.formatMessage({id: 'remove-compare'})}
+        onClick={onButtonClick}>
+        <RemoveIcon />
+      </button>
+    </div>
+  );
+};
+
+export default RemoveCompare;

storage/layers/layers-de.json

@@ -33,6 +33,12 @@
     "link": "http://...",
     "subLayers": []
   },
+  {
+    "id": "layer3",
+    "name": "Layer 3",
+    "description": "Das ist der dritte Layer",
+    "subLayers": []
+  },
   {
     "id": "layer3",
     "name": "Layer 3",

storage/layers/layers-en.json

@@ -33,6 +33,12 @@
     "link": "http://...",
     "subLayers": []
   },
+  {
+    "id": "layer3",
+    "name": "Layer 3",
+    "description": "This is the third layer",
+    "subLayers": []
+  },
   {
     "id": "layer3",
     "name": "Layer 3",

storage/layers/layers-es.json

@@ -33,6 +33,12 @@
     "link": "http://...",
     "subLayers": []
   },
+  {
+    "id": "layer3",
+    "name": "Layer 3",
+    "description": "Das ist der dritte Layer",
+    "subLayers": []
+  },
   {
     "id": "layer3",
     "name": "Layer 3",