diff --git a/src/components/Card.jsx b/src/components/Card.jsx index cae770c..d53bc31 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -41,17 +41,15 @@ class Card extends React.Component { } renderCategory() { - const eventCat = this.props.event.category || 'other'; const categoryTitle = copy[this.props.language].cardstack.category; - const colorType = this.props.style.categories[eventCat] || this.props.style.categories['other']; - console.log(eventCat, this.props.event.category, this.props.style.categories) const categoryLabel = this.props.event.category; + const color = this.props.getCategoryColor(this.props.event.category); return ( ); } diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 6520cc0..84ae9aa 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -22,11 +22,10 @@ class CardStack extends React.Component { event={event} language={this.props.language} tools={this.props.tools} - style={this.props.style} isLoading={this.props.isLoading} getNarrativeLinks={this.props.getNarrativeLinks} getCategoryGroup={this.props.getCategoryGroup} - getCategoryGroupColor={this.props.getCategoryGroupColor} + getCategoryColor={this.props.getCategoryColor} getCategoryLabel={this.props.getCategoryLabel} highlight={this.props.highlight} select={this.props.select} @@ -99,7 +98,6 @@ function mapStateToProps(state) { selected: state.app.selected, language: state.app.language, tools: state.ui.tools, - style: state.ui.style, isCardstack: state.ui.flags.isCardstack, isLoading: state.ui.flags.isFetchingEvents } diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 19100dc..1c6d4bf 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -92,8 +92,8 @@ class Dashboard extends React.Component { } } - getCategoryColor(category) { - return this.props.ui.style.categories[category]; + getCategoryColor(category='other') { + return this.props.ui.style.categories[category] || this.props.style.categories['other'] } getNarrativeLinks(event) { diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx index e886422..363a652 100644 --- a/src/components/Viewport.jsx +++ b/src/components/Viewport.jsx @@ -43,8 +43,7 @@ function mapStateToProps(state) { }, ui: { dom: state.ui.dom, - narratives: state.ui.style.narratives, - categories: state.ui.style.narratives + narratives: state.ui.style.narratives } } } diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js index 082252c..43dd010 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/CardCategory.js @@ -1,10 +1,10 @@ import React from 'react'; -const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => ( +const CardCategory = ({ categoryTitle, categoryLabel, color }) => (

{categoryTitle}

- + {categoryLabel}

diff --git a/src/js/map/map.js b/src/js/map/map.js index 2b9e71b..d05e555 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -8,8 +8,6 @@ import 'leaflet-polylinedecorator'; export default function(newApp, ui, methods) { let svg, g, defs; - let categoryColorGroups = {}; - const domain = { locations: [], narratives: [], @@ -22,10 +20,8 @@ export default function(newApp, ui, methods) { views: Object.assign({}, newApp.views), } - // const getCategoryGroup = methods.getCategoryGroup; - // const getCategoryColor = methods.getCategoryColor; + const getCategoryColor = methods.getCategoryColor; const select = methods.select; - const categoryColors = ui.categories; const narrativeProps = ui.narratives; // Map Settings @@ -296,7 +292,7 @@ Stop and start the development process in terminal after you have added your tok eventsDom .enter().append('circle') .attr('class', 'location-event-marker') - .style('fill', (d, i) => categoryColors[domain.categories[i]]) + .style('fill', (d, i) => getCategoryColor(domain.categories[i])) .transition() .duration(500) .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);