Apply better naming and cleanup

src/components/Card.jsx

@@ -58,30 +58,6 @@ class Card extends React.Component {
     </div>);
   }
 
-  // NB: is this function for a future feature?
-  renderIncidents() {
-    const incident_type_lang = copy[this.props.language].cardstack.incident_type;
-    const incidentTags = []; //this.props.event.tags.filter(tag => tag.type === 'incident_type');
-
-    return (<div className="event-card-section event-type">
-      <h4>{incident_type_lang}</h4>
-      {
-        incidentTags.map((tag, idx) => {
-          return (<span className={(
-              tag.name === 'contradicción' || tag.name === 'declaración con sospecha de tortura')
-              ? ' flagged'
-              : ''}>
-            {tag.name}{
-              (idx < incidentTags.length - 1)
-                ? ','
-                : ''
-            }
-          </span>);
-        })
-      }
-    </div>);
-  }
-
   renderSummary() {
     const summary = copy[this.props.language].cardstack.description;
     const desc = this.props.event.description;
@@ -162,15 +138,6 @@ class Card extends React.Component {
     }
   }
 
-  renderHeader() {
-    return (<div className="card-collapsed">
-      {this.renderWarning()}
-      {this.renderCategory()}
-      {this.renderTimestamp()}
-      {this.renderSummary()}
-    </div>);
-  }
-
   renderCardLink(event, direction) {
     if (event !== null) {
       const timelabel = this.getTimeLabel();
@@ -183,6 +150,7 @@ class Card extends React.Component {
 
   renderNarrative() {
     const links = this.props.getNarrativeLinks(this.props.event);
+
     if (links !== null) {
       return (<div className="event-card-section">
         <h4>Connected events</h4>
@@ -192,6 +160,22 @@ class Card extends React.Component {
     }
   }
 
+  renderSpinner() {
+    return (<div className="spinner">
+      <div className="double-bounce1"></div>
+      <div className="double-bounce2"></div>
+    </div>);
+  }
+
+  renderHeader() {
+    return (<div className="card-collapsed">
+      {this.renderWarning()}
+      {this.renderCategory()}
+      {this.renderTimestamp()}
+      {this.renderSummary()}
+    </div>);
+  }
+
   renderContent() {
     if (this.state.isFolded) {
       return (<div className="card-bottomhalf folded"></div>);
@@ -200,31 +184,15 @@ class Card extends React.Component {
         {this.renderSpinner()}
       </div>);
     } else {
-      if (!this.props.event.hasOwnProperty('receiver') && !this.props.event.hasOwnProperty('transmitter')) {
-        return (<div className="card-bottomhalf">
-          {this.renderLocation()}
-          {this.renderTags()}
-          {this.renderSource()}
-          {this.renderNarrative()}
-        </div>);
-      } else {
-        return (<div className="card-bottomhalf">
-          {this.renderTags()}
-          {this.renderSource()}
-          {this.renderNarrative()}
-        </div>);
-      }
+      return (<div className="card-bottomhalf">
+        {this.renderLocation()}
+        {this.renderTags()}
+        {this.renderSource()}
+        {this.renderNarrative()}
+      </div>);
     }
   }
 
-
-  renderSpinner() {
-    return (<div className="spinner">
-      <div className="double-bounce1"></div>
-      <div className="double-bounce2"></div>
-    </div>);
-  }
-
   renderArrow() {
     let classes = (this.state.isFolded)
       ? 'arrow-down folded'

src/components/Dashboard.jsx

@@ -38,11 +38,11 @@ class Dashboard extends React.Component {
 
     handleSelect(selected) {
       if (selected) {
-        // attacks are not susceptible to tag filters, so make sure this happens only when they are found
-        // in the domain
         let eventsToSelect = selected.map(eventId => this.props.domain.events[eventId]);
+        const parser = this.props.ui.tools.parser;
+
         eventsToSelect = eventsToSelect.sort((a, b) => {
-          return this.props.ui.tools.parser(a.timestamp) - this.props.ui.tools.parser(b.timestamp);
+          return parser(a.timestamp) - parser(b.timestamp);
         });
 
         if (eventsToSelect.every(event => (event))) {
@@ -58,7 +58,7 @@ class Dashboard extends React.Component {
             });
 
             eventsSelected = eventsSelected.sort((a, b) => {
-              return this.props.ui.tools.parser(a.timestamp) - this.props.ui.tools.parser(b.timestamp);
+              return parser(a.timestamp) - parser(b.timestamp);
             });
 
             this.props.actions.updateSelected(eventsSelected);
@@ -105,8 +105,8 @@ class Dashboard extends React.Component {
     }
 
     getCategoryLabel(category) {
-      const label = this.props.domain.categories.find(t => t.category === category).category_label;
-      return label;
+      const categories = this.props.domain.categories;
+      return categories.find(t => t.category === category).category_label;
     }
 
     getNarrativeLinks(event) {
@@ -176,7 +176,7 @@ class Dashboard extends React.Component {
           narratives={this.props.domain.narratives}
           categoryGroups={this.props.domain.categoryGroups}
 
-          range={this.props.app.filters.range}
+          timerange={this.props.app.filters.timerange}
           selected={this.props.app.selected}
           language={this.props.app.language}
 
@@ -202,7 +202,7 @@ class Dashboard extends React.Component {
           toggle={() => this.handleToggle('TOGGLE_NOTIFICATIONS')}
         />
         <LoadingOverlay
-          ui={this.props.ui}
+          ui={this.props.ui.flags.isFetchingDomain}
           language={this.props.app.language}
         />
       </div>
@@ -218,21 +218,23 @@ function mapStateToProps(state) {
   return Object.assign({}, state, {
     domain: Object.assign({}, state.domain, {
 
-      events: selectors.getFilteredEvents(state),
-      locations: selectors.getFilteredLocations(state),
-      categories: selectors.getFilteredCategories(state),
-      categoryGroups: selectors.getCategoryGroups(state),
-      sites: selectors.getSites(state),
-      tags: selectors.getAllTags(state),
-      narratives: selectors.getFilteredNarratives(state),
+      // These items are affected by app selectionFilters
+      events: selectors.selectEvents(state),
+      locations: selectors.selectLocations(state),
+      categories: selectors.selectCategories(state),
+      categoryGroups: selectors.selectCategoryGroups(state),
+      narratives: selectors.selectNarratives(state),
 
-      notifications: state.domain.notifications,
+      // These items are not affected by selectionFilters
+      sites: selectors.getSites(state),
+      tags: selectors.getTagTree(state),
+      notifications: selectors.getNotifications(state)
     }),
     app: Object.assign({}, state.app, {
       error: state.app.error,
       filters: Object.assign({}, state.app.filters, {
-        range: selectors.getRangeFilter(state),
-        tags: selectors.getTagFilters(state)
+        timerange: selectors.getTimeRange(state),
+        tags: selectors.selectTagList(state)
       })
     }),
     ui: state.ui

src/components/LoadingOverlay.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import copy from '../js/data/copy.json';
 
-const LoadingOverlay = ({ ui, language }) => {
+const LoadingOverlay = ({ isFetchingDomain, language }) => {
   let classes = 'loading-overlay';
-  classes += (!ui.flags.isFetchingDomain) ? ' hidden' : '';
+  classes += (!isFetchingDomain) ? ' hidden' : '';
 
   return (
     <div id="loading-overlay" className={classes}>

src/components/Timeline.jsx

@@ -16,7 +16,7 @@ class Timeline extends React.Component {
         categoryGroups: this.props.categoryGroups
       }
       const app = {
-        range: this.props.range,
+        timerange: this.props.timerange,
         selected: this.props.selected,
         language: this.props.language,
         select: this.props.select,
@@ -43,7 +43,7 @@ class Timeline extends React.Component {
     }
 
     const app = {
-      range: nextProps.range,
+      timerange: nextProps.timerange,
       selected: nextProps.selected,
       language: nextProps.language,
       select: nextProps.select,
@@ -75,8 +75,8 @@ class Timeline extends React.Component {
     const labels_title_lang = copy[this.props.language].timeline.labels_title;
     const info_lang = copy[this.props.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
-    const date0 = this.props.tools.formatterWithYear(this.props.range[0]);
-    const date1 = this.props.tools.formatterWithYear(this.props.range[1]);
+    const date0 = this.props.tools.formatterWithYear(this.props.timerange[0]);
+    const date1 = this.props.tools.formatterWithYear(this.props.timerange[1]);
     return (
       <div className={classes}>
         <div className="timeline-header">

src/components/View2D.jsx

@@ -1,63 +0,0 @@
-import '../scss/main.scss';
-import React from 'react';
-import Map from '../js/map/map.js';
-import { areEqual } from '../js/data/utilities.js';
-
-class View2D extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  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,
-      mapAnchor: this.props.mapAnchor
-    }
-    const ui = {
-      style: this.props.uiStyle,
-      dom: this.props.dom
-    }
-
-    this.map = new Map(app, ui, this.props.select);
-    this.map.update(domain, 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);
-  }
-
-  render() {
-    return (
-      <div className='map-wrapper'>
-        <div id="map" />
-      </div>
-    );
-  }
-}
-
-export default View2D;

src/components/Viewport.jsx

@@ -1,36 +1,62 @@
 import '../scss/main.scss';
 import React from 'react';
-import View2D from './View2D.jsx';
+import Map from '../js/map/map.js';
+import { areEqual } from '../js/data/utilities.js';
 
 class Viewport extends React.Component {
   constructor(props) {
     super(props);
   }
 
-  render() {
-    if( this.props.isView2d ) {
-      return (
-        <View2D
-          locations={this.props.locations}
-          narratives={this.props.narratives}
-          sites={this.props.sites}
-          categoryGroups={this.props.categoryGroups}
-
-          views={this.props.views}
-          selected={this.props.selected}
-          highlighted={this.props.highlighted}
-          mapAnchor={this.props.mapAnchor}
-
-          uiStyle={this.props.uiStyle}
-          dom={this.props.dom}
-
-          select={this.props.select}
-          highlight={this.props.highlight}
-          getCategoryGroupColor={category => this.props.getCategoryGroupColor(category)}
-          getCategoryGroup={category => this.props.getCategoryGroup(category)}
-        />
-      );
+  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,
+      mapAnchor: this.props.mapAnchor
+    }
+    const ui = {
+      style: this.props.uiStyle,
+      dom: this.props.dom
+    }
+
+    this.map = new Map(app, ui, this.props.select);
+    this.map.update(domain, 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);
+  }
+
+  render() {
+    return (
+      <div className='map-wrapper'>
+        <div id="map" />
+      </div>
+    );
   }
 }