From f345b76e576527878ab7a84f2574e3d3189d27e3 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Tue, 27 Nov 2018 13:15:23 -0500
Subject: [PATCH] Some further cleanup of presentational stuff

---
 src/components/CardStack.jsx                  |  4 +-
 src/components/Dashboard.jsx                  | 42 +++++++++----------
 src/components/TagFilter.jsx                  |  2 +-
 src/components/TagListPanel.jsx               |  2 +-
 src/components/Viewport.jsx                   | 37 ++--------------
 .../{Checkbox.jsx => Checkbox.js}             |  0
 .../LoadingOverlay.js}                        |  6 +--
 src/js/map/map.js                             |  8 ++--
 8 files changed, 33 insertions(+), 68 deletions(-)
 rename src/components/presentational/{Checkbox.jsx => Checkbox.js} (100%)
 rename src/components/{LoadingOverlay.jsx => presentational/LoadingOverlay.js} (74%)

diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index b616132..7326bd4 100644
--- a/src/components/CardStack.jsx
+++ b/src/components/CardStack.jsx
@@ -33,9 +33,8 @@ class CardStack extends React.Component {
           />
         );
       });
-    } else {
-        return '';
     }
+    return '';
   }
 
   renderLocation() {
@@ -77,6 +76,7 @@ class CardStack extends React.Component {
 
     if (this.props.isFetchingEvents) {
       return this.renderIsLoading();
+      
     } else if (this.props.selected.length > 0) {
       return (
         <div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 123c9c5..420e37f 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
 
-import LoadingOverlay from './LoadingOverlay.jsx';
+import LoadingOverlay from './presentational/LoadingOverlay';
 import Viewport from './Viewport.jsx';
 import Toolbar from './Toolbar.jsx';
 import CardStack from './CardStack.jsx';
@@ -37,16 +37,8 @@ class Dashboard extends React.Component {
 
   handleSelect(selected) {
     if (selected) {
-      //let eventsToSelect = selected.map(eventId => this.props.domain.events[eventId]);
       const parser = this.props.ui.tools.parser;
 
-      //eventsToSelect = eventsToSelect.sort((a, b) => {
-      //  return parser(a.timestamp) - parser(b.timestamp);
-      //});
-
-      //if (eventsToSelect.every(event => (event))) {
-      //  this.props.actions.updateSelected(eventsToSelect);
-      //}
       const enhanceEvent = (ev) => {
         return Object.assign({}, ev, this.props.domain.events[ev.id]);
       }
@@ -120,15 +112,19 @@ class Dashboard extends React.Component {
     return (
       <div>
         <Viewport
-          locations={this.props.domain.locations}
-          narratives={this.props.domain.narratives}
-          sites={this.props.domain.sites}
-          categoryGroups={this.props.domain.categoryGroups}
+          domain={{
+            locations: this.props.domain.locations,
+            narratives: this.props.domain.narratives,
+            sites: this.props.domain.sites,
+            categoryGroups: this.props.domain.categoryGroups
+          }}
 
-          views={this.props.app.filters.views}
-          selected={this.props.app.selected}
-          highlighted={this.props.app.highlighted}
-          mapAnchor={this.props.app.mapAnchor}
+          app={{
+            views: this.props.app.filters.views,
+            selected: this.props.app.selected,
+            highlighted: this.props.app.highlighted,
+            mapAnchor: this.props.app.mapAnchor,
+          }}
 
           ui={{
             dom: this.props.ui.dom,
@@ -136,15 +132,16 @@ class Dashboard extends React.Component {
             groupColors: this.props.ui.style.groupColors
           }}
 
-          select={this.handleSelect}
-          highlight={this.handleHighlight}
-          getCategoryGroup={category => this.getCategoryGroup(category)}
-          getCategoryGroupColor={category => this.getCategoryGroupColor(category)}
+          methods={{
+            select: this.handleSelect,
+            highlight: this.handleHighlight,
+            getCategoryGroup: category => this.getCategoryGroup(category),
+            getCategoryGroupColor: category => this.getCategoryGroupColor(category)
+          }}
         />
         <Toolbar
           tags={this.props.domain.tags}
           categories={this.props.domain.categories}
-
           language={this.props.app.language}
           tagFilters={this.props.app.filters.tags}
           categoryFilter={this.props.app.filters.categories}
@@ -158,7 +155,6 @@ class Dashboard extends React.Component {
         <CardStack
           selected={this.props.app.selected}
           language={this.props.app.language}
-
           tools={this.props.ui.tools}
           isCardstack={this.props.ui.flags.isCardstack}
           isFetchingEvents={this.props.ui.flags.isFetchingEvents}
diff --git a/src/components/TagFilter.jsx b/src/components/TagFilter.jsx
index cf68eb4..316c339 100644
--- a/src/components/TagFilter.jsx
+++ b/src/components/TagFilter.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Checkbox from './presentational/Checkbox.jsx';
+import Checkbox from './presentational/Checkbox';
 
 class TagFilter extends React.Component {
   constructor(props) {
diff --git a/src/components/TagListPanel.jsx b/src/components/TagListPanel.jsx
index 4e45d52..b834545 100644
--- a/src/components/TagListPanel.jsx
+++ b/src/components/TagListPanel.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Checkbox from './presentational/Checkbox.jsx';
+import Checkbox from './presentational/Checkbox';
 
 class TagListPanel extends React.Component {
 
diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx
index 9c10de8..4f86650 100644
--- a/src/components/Viewport.jsx
+++ b/src/components/Viewport.jsx
@@ -8,43 +8,12 @@ class Viewport extends React.Component {
   }
 
   componentDidMount() {
-    const domain = {
-      locations: this.props.locations,
-      narratives: this.props.narratives,
-      sites: this.props.sites,
-      categoryGroups: this.props.categoryGroups
-    }
-    const app = {
-      views: this.props.views,
-      selected: this.props.selected,
-      highlighted: this.props.highlighted,
-      getCategoryGroup: this.props.getCategoryGroup,
-      getCategoryGroupColor: this.props.getCategoryGroupColor,
-      select: this.props.select,
-      mapAnchor: this.props.mapAnchor
-    }
-
-    this.map = new Map(app, this.props.ui);
-    this.map.update(domain, app);
+    this.map = new Map(this.props.app, this.props.ui, this.props.methods);
+    this.map.update(this.props.domain, this.props.app);
   }
 
   componentWillReceiveProps(nextProps) {
-    const domain = {
-      locations: nextProps.locations,
-      narratives: nextProps.narratives,
-      sites: nextProps.sites,
-      categoryGroups: nextProps.categoryGroups
-    }
-    const app = {
-      views: nextProps.views,
-      selected: nextProps.selected,
-      highlighted: nextProps.highlighted,
-      getCategoryGroup: nextProps.getCategoryGroup,
-      getCategoryGroupColor: nextProps.getCategoryGroupColor,
-      mapAnchor: this.props.mapAnchor
-    }
-
-    this.map.update(domain, app);
+    this.map.update(this.props.domain, this.props.app);
   }
 
   render() {
diff --git a/src/components/presentational/Checkbox.jsx b/src/components/presentational/Checkbox.js
similarity index 100%
rename from src/components/presentational/Checkbox.jsx
rename to src/components/presentational/Checkbox.js
diff --git a/src/components/LoadingOverlay.jsx b/src/components/presentational/LoadingOverlay.js
similarity index 74%
rename from src/components/LoadingOverlay.jsx
rename to src/components/presentational/LoadingOverlay.js
index ad455f3..bb1d0b7 100644
--- a/src/components/LoadingOverlay.jsx
+++ b/src/components/presentational/LoadingOverlay.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import copy from '../js/data/copy.json';
+import copy from '../../js/data/copy.json';
 
-const LoadingOverlay = ({ isFetchingDomain, language }) => {
+const LoadingOverlay = ({ isLoading, language }) => {
   let classes = 'loading-overlay';
-  classes += (!isFetchingDomain) ? ' hidden' : '';
+  classes += (!isLoading) ? ' hidden' : '';
 
   return (
     <div id="loading-overlay" className={classes}>
diff --git a/src/js/map/map.js b/src/js/map/map.js
index 87ae8d0..13a15f0 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -5,7 +5,7 @@ import {
 import hash from 'object-hash';
 import 'leaflet-polylinedecorator';
 
-export default function(newApp, ui) {
+export default function(newApp, ui, methods) {
   let svg, g, defs;
 
   let categoryColorGroups = {};
@@ -22,9 +22,9 @@ export default function(newApp, ui) {
     views: Object.assign({}, newApp.views),
   }
 
-  const getCategoryGroup = newApp.getCategoryGroup;
-  const getCategoryGroupColor = newApp.getCategoryGroupColor;
-  const select = newApp.select;
+  const getCategoryGroup = methods.getCategoryGroup;
+  const getCategoryGroupColor = methods.getCategoryGroupColor;
+  const select = methods.select;
   const groupColors = ui.groupColors;
   const narrativeProps = ui.narratives;