Deprecated usage of env constants USE_ASSOCIATION_DESCRIPTIONS, USE_NARRATIVESand FILTERS_AS_NARRATIVES to instead check for existence of narratives; deprecated usage of unused components such as CardFilters, CardNarrative, and NarrativeLink

example.config.js

@@ -24,11 +24,8 @@ module.exports = {
     },
     features: {
       USE_CATEGORIES: true,
-      USE_NARRATIVES: true,
-      FILTERS_AS_NARRATIVES: true,
       CATEGORIES_AS_FILTERS: true,
       USE_ASSOCIATIONS: true,
-      USE_ASSOCIATION_DESCRIPTIONS: false,
       USE_SOURCES: true,
       USE_COVER: true,
       USE_SEARCH: false,

src/components/Card.jsx

@@ -5,10 +5,8 @@ import CardCustomField from './presentational/Card/CustomField'
 import CardTime from './presentational/Card/Time'
 import CardLocation from './presentational/Card/Location'
 import CardCaret from './presentational/Card/Caret'
-import CardFilters from './presentational/Card/Filters'
 import CardSummary from './presentational/Card/Summary'
 import CardSource from './presentational/Card/Source'
-import CardNarrative from './presentational/Card/Narrative'
 import { makeNiceDate } from '../common/utilities'
 
 class Card extends React.Component {
@@ -39,18 +37,6 @@ class Card extends React.Component {
     )
   }
 
-  renderFilters () {
-    if (!this.props.filters || (this.props.filters && this.props.filters.length === 0)) {
-      return null
-    }
-    return (
-      <CardFilters
-        filters={this.props.filters || []}
-        language={this.props.language}
-      />
-    )
-  }
-
   renderLocation () {
     return (
       <CardLocation
@@ -107,21 +93,6 @@ class Card extends React.Component {
     )
   }
 
-  renderNarrative () {
-    // const links = this.props.getNarrativeLinks(this.props.event)
-
-    if (links !== null) {
-      return (
-        <CardNarrative
-          select={(event) => this.props.onSelect([event])}
-          makeTimelabel={(timestamp) => this.makeTimelabel(timestamp)}
-          next={links.next}
-          prev={links.prev}
-        />
-      )
-    }
-  }
-
   renderCustomFields () {
     return this.props.features.CUSTOM_EVENT_FIELDS
       .map(field => {

src/components/Layout.js

@@ -303,7 +303,7 @@ class Dashboard extends React.Component {
           getCategoryColor={this.getCategoryColor}
         />
         <StateOptions
-          showing={features.FILTERS_AS_NARRATIVES && !app.associations.narrative && app.associations.filters.length > 0}
+          showing={this.props.narratives && this.props.narratives.length !== 0 && !app.associations.narrative && app.associations.filters.length > 0}
           timelineDims={app.timeline.dimensions}
           onClickHandler={this.setNarrativeFromFilters}
         />

src/components/Toolbar/Layout.js

@@ -113,13 +113,13 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarPanels () {
-    const { features } = this.props
+    const { features, narratives } = this.props
     let classes = (this.state._selected >= 0) ? 'toolbar-panels' : 'toolbar-panels folded'
     return (
       <div className={classes}>
         {this.renderClosePanel()}
         <Tabs selectedIndex={this.state._selected}>
-          {features.USE_NARRATIVES ? this.renderToolbarNarrativePanel() : null}
+          {narratives && narratives.length !== 0 ? this.renderToolbarNarrativePanel() : null}
           {features.CATEGORIES_AS_FILTERS ? this.renderToolbarCategoriesPanel() : null}
           {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
         </Tabs>
@@ -145,7 +145,8 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTabs () {
-    const { features } = this.props
+    const { features, narratives } = this.props
+    const narrativesExist = narratives && narratives.length !== 0
     let title = copy[this.props.language].toolbar.title
     if (process.env.display_title) title = process.env.display_title
     const narrativesLabel = copy[this.props.language].toolbar.narratives_label
@@ -153,15 +154,15 @@ class Toolbar extends React.Component {
     const categoriesLabel = 'Categories' // TODO:
 
     const narrativesIdx = 0
-    const categoriesIdx = features.USE_NARRATIVES ? 1 : 0
-    const filtersIdx = (features.USE_NARRATIVES && features.CATEGORIES_AS_FILTERS) ? 2 : (
-      features.USE_NARRATIVES || features.CATEGORIES_AS_FILTERS ? 1 : 0
+    const categoriesIdx = narrativesExist ? 1 : 0
+    const filtersIdx = (narrativesExist && features.CATEGORIES_AS_FILTERS) ? 2 : (
+      narrativesExist || features.CATEGORIES_AS_FILTERS ? 1 : 0
     )
     return (
       <div className='toolbar'>
         <div className='toolbar-header'onClick={this.props.methods.onTitle}><p>{title}</p></div>
         <div className='toolbar-tabs'>
-          {features.USE_NARRATIVES ? this.renderToolbarTab(narrativesIdx, narrativesLabel, 'timeline') : null}
+          {narrativesExist ? this.renderToolbarTab(narrativesIdx, narrativesLabel, 'timeline') : null}
           {features.CATEGORIES_AS_FILTERS ? this.renderToolbarTab(categoriesIdx, categoriesLabel, 'widgets') : null}
           {features.USE_ASSOCIATIONS ? this.renderToolbarTab(filtersIdx, filtersLabel, 'filter_list') : null}
         </div>

src/components/presentational/Card/Filters.js

@@ -1,36 +0,0 @@
-import React from 'react'
-
-import copy from '../../../common/data/copy.json'
-
-const CardFilters = ({ filters, language }) => {
-  const filtersLang = copy[language].cardstack.filters
-  const noFiltersLang = copy[language].cardstack.nofilters
-
-  if (filters.length > 0) {
-    return (
-      <div className='card-row card-cell filters'>
-        <h4>{filtersLang}:</h4>
-        <p>
-          {filters.map((filter, idx) => {
-            return (
-              <span className='filter'>
-                <small>{filter.name}</small>
-                {(idx < filters.length - 1)
-                  ? ','
-                  : ''}
-              </span>
-            )
-          })}
-        </p>
-      </div>
-    )
-  }
-  return (
-    <div className='card-row card-cell filters'>
-      <h4>{filtersLang}</h4>
-      <p><small>{noFiltersLang}</small></p>
-    </div>
-  )
-}
-
-export default CardFilters

src/components/presentational/Card/Narrative.js

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import CardNarrativeLink from './NarrativeLink'
-
-const CardNarrative = (props) => (
-  <div className='card-row'>
-    <h4>Connected events</h4>
-    <div className='card-cell'>
-      <p>&larr; <CardNarrativeLink {...props} event={props.next} /></p>
-      <p>&rarr; <CardNarrativeLink {...props} event={props.prev} /></p>
-    </div>
-  </div>
-)
-
-export default CardNarrative

src/components/presentational/Card/NarrativeLink.js

@@ -1,17 +0,0 @@
-import React from 'react'
-
-const CardNarrativeLink = ({ event, makeTimelabel, select }) => {
-  if (event !== null) {
-    const timelabel = makeTimelabel(event.timestamp)
-
-    return (
-      <a onClick={() => select(event)}>
-        <small>{`${timelabel} / ${event.location}`}</small>
-      </a>
-    )
-  }
-
-  return (<a className='disabled'><small>None</small></a>)
-}
-
-export default CardNarrativeLink

src/components/presentational/Map/Narratives.js

@@ -26,6 +26,8 @@ function MapNarratives ({
     return styles[styleName]
   }
 
+  const narrativesExist = narratives && narratives.length !== 0
+
   function hasNoLocation (step) {
     return (step.latitude === '' || step.longitude === '')
   }
@@ -141,7 +143,7 @@ function MapNarratives ({
 
     let lastMarked = null
 
-    if (features.FILTERS_AS_NARRATIVES) {
+    if (narrativesExist) {
       for (let idx = 0; idx < n.steps.length; idx += 1) {
         const step = n.steps[idx]
         if (lastMarked) {
@@ -174,7 +176,7 @@ function MapNarratives ({
   function renderNarrative (n) {
     const narrativeId = `narrative-${n.id.replace(/ /g, '_')}`
 
-    const body = features.FILTERS_AS_NARRATIVES
+    const body = narrativesExist
       ? renderBetweenMarked(n)
       : (features.NARRATIVE_STEP_STYLES
         ? renderBetweenMarked(n)

src/selectors/index.js

@@ -76,7 +76,7 @@ export const selectEvents = createSelector(
 export const selectNarratives = createSelector(
   [getEvents, getNarratives, getSources, getFeatures],
   (events, narrativesMeta, sources, features) => {
-    if (!features.USE_NARRATIVES) {
+    if (Array.isArray(narrativesMeta) && narrativesMeta.length === 0) {
       return []
     }
     const narratives = {}