feat(url): sync selected layers state to url (#196)

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

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

* refactor(layers): rename selectors

src/scripts/components/app/app.tsx

@@ -45,7 +45,7 @@ const TranslatedApp: FunctionComponent = () => {
         <div className={styles.app}>
           <div className={styles.layout}>
             <Switch>
-              <Route path="/" exact>
+              <Route path="(/|/layers)/:mainLayerId?/:compareLayerId?">
                 <TimeSlider />
                 <StoriesButton />
                 <div className={styles.nav}>
@@ -54,6 +54,7 @@ const TranslatedApp: FunctionComponent = () => {
                   <ProjectionMenu />
                   <LayerSelector />
                 </div>
+                <LayerLoader />
               </Route>
 
               <Route path="/present">
@@ -70,13 +71,12 @@ const TranslatedApp: FunctionComponent = () => {
 
               <Route
                 path="/stories/:storyId"
-                exact
                 render={props => (
                   <Redirect to={`${props.match.url}/0`} />
                 )}></Route>
+              <Redirect to="/" />
             </Switch>
           </div>
-
           <div className={styles.story}>
             <Globes />
             <Route path="/stories/:storyId/:page">
@@ -85,9 +85,7 @@ const TranslatedApp: FunctionComponent = () => {
           </div>
         </div>
       </IntlProvider>
-
       <UrlSync />
-      <LayerLoader />
       <Init />
     </Router>
   );

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

@@ -1,30 +1,24 @@
 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';
+import {LayerListItem} from '../../types/layer-list';
 
 interface Props {
   isMain?: boolean;
+  layer: LayerListItem | null;
 }
 
-const DataSetInfo: FunctionComponent<Props> = ({isMain}) => {
-  const {main, compare} = useSelector(selectedLayersSelector);
-  const layer = isMain ? main : compare;
-
-  return (
-    <div className={styles.dataSetInfo}>
-      <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>
+const DataSetInfo: FunctionComponent<Props> = ({layer, isMain}) => (
+  <div className={styles.dataSetInfo}>
+    <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>
+);
 
 export default DataSetInfo;

src/scripts/components/globe/globe.tsx

@@ -14,6 +14,8 @@ import {GlobeProjection} from '../../types/globe-projection';
 import 'cesium/Source/Widgets/widgets.css';
 import 'cesium/Build/Cesium/Cesium';
 
+import {LayerListItem} from '../../types/layer-list';
+
 import styles from './globe.styl';
 
 const Cesium = window.Cesium;
@@ -44,6 +46,7 @@ const cesiumOptions = {
 
 interface Props {
   active: boolean;
+  layer: LayerListItem | null;
   isMain?: boolean;
   view: GlobeView;
   projection: GlobeProjection;
@@ -59,6 +62,7 @@ const Globe: FunctionComponent<Props> = ({
   projection,
   imageUrl,
   active,
+  layer,
   isMain,
   flyTo,
   onMouseEnter,
@@ -177,7 +181,7 @@ const Globe: FunctionComponent<Props> = ({
 
   return (
     <div className={styles.globe} onMouseEnter={() => onMouseEnter()} ref={ref}>
-      <DataSetInfo isMain={isMain} />
+      <DataSetInfo layer={layer} isMain={isMain} />
     </div>
   );
 };

src/scripts/components/globes/globes.tsx

@@ -5,30 +5,41 @@ import React, {
   useCallback
 } from 'react';
 import {useSelector, useDispatch} from 'react-redux';
+import {matchPath, useLocation} from 'react-router';
 
-import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
-import {activeLayersSelector} from '../../selectors/layers/active';
+import {layerListItemSelector} from '../../selectors/layers/list-item';
 import {globeViewSelector} from '../../selectors/globe/view';
 import {timeSelector} from '../../selectors/globe/time';
 import {projectionSelector} from '../../selectors/globe/projection';
 import setGlobeViewAction from '../../actions/set-globe-view';
 import Globe from '../globe/globe';
 import {getLayerTileUrl} from '../../libs/get-layer-tile-url';
 import {flyToSelector} from '../../selectors/fly-to';
+import {State} from '../../reducers';
 
 import {GlobeView} from '../../types/globe-view';
 
 import styles from './globes.styl';
+import {layerDetailsSelector} from '../../selectors/layers/layer-details';
 
 const Globes: FunctionComponent = () => {
+  const location = useLocation();
+  const match = matchPath(location.pathname, {
+    path: '(/|/layers)/:mainLayerId?/:compareLayerId?',
+    exact: true
+  });
   const dispatch = useDispatch();
   const projection = useSelector(projectionSelector);
   const globalGlobeView = useSelector(globeViewSelector);
-  const activeLayers = useSelector(activeLayersSelector);
+  const {main, compare} = useSelector((state: State) =>
+    layerListItemSelector(state, match && match.params)
+  );
+  const {mainLayerDetails, compareLayerDetails} = useSelector((state: State) =>
+    layerDetailsSelector(state, match && match.params)
+  );
   const time = useSelector(timeSelector);
   const [currentView, setCurrentView] = useState(globalGlobeView);
   const [isMainActive, setIsMainActive] = useState(true);
-  const selectedLayerIds = useSelector(selectedLayerIdsSelector);
   const flyTo = useSelector(flyToSelector);
   const onChangeHandler = useCallback(
     (view: GlobeView) => setCurrentView(view),
@@ -39,8 +50,8 @@ const Globes: FunctionComponent = () => {
     [dispatch]
   );
 
-  const mainImageUrl = getLayerTileUrl(activeLayers.main, time);
-  const compareImageUrl = getLayerTileUrl(activeLayers.compare, time);
+  const mainImageUrl = getLayerTileUrl(mainLayerDetails, time);
+  const compareImageUrl = getLayerTileUrl(compareLayerDetails, time);
 
   // apply changes in the app state view to our local view copy
   // we don't use the app state view all the time to keep store updates low
@@ -51,6 +62,7 @@ const Globes: FunctionComponent = () => {
   return (
     <div className={styles.globes}>
       <Globe
+        layer={main}
         active={isMainActive}
         isMain
         view={currentView}
@@ -62,8 +74,9 @@ const Globes: FunctionComponent = () => {
         onMoveEnd={onMoveEndHandler}
       />
 
-      {selectedLayerIds.compare && (
+      {compare && (
         <Globe
+          layer={compare}
           active={!isMainActive}
           view={currentView}
           projection={projection}

src/scripts/components/info-button/info-button.tsx

@@ -3,9 +3,10 @@ import {useIntl} from 'react-intl';
 
 import {InfoIcon} from '../icons/info-icon';
 
-import styles from './info-button.styl';
 import {LayerListItem} from '../../types/layer-list';
 
+import styles from './info-button.styl';
+
 interface Props {
   layer: LayerListItem | null;
 }