Added generators for card layouts. (#182)

* Added generators for card layouts. These are optionally defined in the timemap config

* Removed US2020-specific layout generation - now it's being specified in the config

src/components/CardStack.jsx

@@ -1,11 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import * as selectors from '../selectors'
-import {
-  // calculateColorPercentages,
-  getFilterIdxFromColorSet
-} from '../common/utilities'
 
+import * as selectors from '../selectors'
+import { getFilterIdxFromColorSet } from '../common/utilities'
 // import Card from './Card.jsx'
 import { Card } from '@forensic-architecture/design-system/react'
 import copy from '../common/data/copy.json'
@@ -29,7 +26,8 @@ class CardStack extends React.Component {
   scrollToCard () {
     const duration = 500
     const element = this.refCardStack.current
-    const cardScroll = this.refs[this.props.narrative.current].current.offsetTop
+    const cardScroll = this.refs[this.props.narrative.current].current
+      .offsetTop
 
     let start = element.scrollTop
     let change = cardScroll - start
@@ -42,9 +40,9 @@ class CardStack extends React.Component {
     // d = duration
     Math.easeInOutQuad = function (t, b, c, d) {
       t /= d / 2
-      if (t < 1) return c / 2 * t * t + b
+      if (t < 1) return (c / 2) * t * t + b
       t -= 1
-      return -c / 2 * (t * (t - 2) - 1) + b
+      return (-c / 2) * (t * (t - 2) - 1) + b
     }
 
     const animateScroll = function () {
@@ -58,104 +56,29 @@ class CardStack extends React.Component {
 
   renderCards (events, selections) {
     // if no selections provided, select all
-    if (!selections) { selections = events.map(e => true) }
+    if (!selections) {
+      selections = events.map((e) => true)
+    }
     this.refs = []
 
     return events.map((event, idx) => {
       const thisRef = React.createRef()
       this.refs[idx] = thisRef
 
-      let precision
-      switch (event.location_precision) {
-        case `Generalised`:
-          precision = `No location data`
-          break
-        case `Estimated`:
-          precision = `Precise location estimated`
-          break
-        case `Self-reported`:
-          precision = `Location reported by witness`
-          break
-        case `Confirmed`:
-        default:
-          precision = null
-          break
-      }
-
-      return (<Card
-        // event={event}
-        ref={thisRef}
-        // sourceError={this.props.sourceError}
-        content={[
-          [{ kind: 'tag', align: 'end', value: `Incident #${event.incident_id}` }],
-          [{ kind: 'line' }],
-          [
-            { kind: 'date', title: 'Incident Date', value: event.datetime },
-            { kind: 'text', title: 'Location', hoverValue: precision, value: event.location }
-          ],
-          [{ kind: 'line-break', times: 0.4 }],
-          [
-            {
-              kind: 'text',
-              title: 'Summary',
-              value: event.description,
-              scaleFont: 1.1
-            }
-          ],
-          [{ kind: 'line-break', times: 0.4 }],
-          [
-            {
-              kind: 'button',
-              title: 'Type of Violation',
-              value: event.associations.slice(0, -1).map(association => ({
-                text: association,
-                color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null,
-                normalCursor: true
-              }))
-            },
-            {
-              kind: 'button',
-              title: 'Against',
-              value: event.associations.slice(-1).map(category => ({
-                text: category,
-                color: null,
-                normalCursor: true
-              }))
-            }
-          ],
-          [{ kind: 'line-break', times: 0.2 }],
-          [
-            {
-              kind: 'list',
-              title: 'Law Enforcement Agencies',
-              value: event.le_agencys
-            }
-          ],
-          [
-            { kind: 'text', title: 'Name of reporter(s)', value: event.journalist_name },
-            { kind: 'text', title: 'Network', value: event.news_organisation }
-          ],
-          [
-            {
-              kind: event.hide_source === 'FALSE' ? 'button' : 'markdown',
-              title: 'Sources',
-              value: event.hide_source === 'FALSE' ? event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href, color: null, onClick: () => window.open(href, '_blank') })) : 'Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf).'
-            }
-          ]
-          // [{ kind: "text", title: "Category", value: "Press attack" }],
-        ]}
-        language={this.props.language}
-        isLoading={this.props.isLoading}
-        isSelected={selections[idx]}
-      // getNarrativeLinks={this.props.getNarrativeLinks}
-      // getCategoryGroup={this.props.getCategoryGroup}
-      // getCategoryColor={this.props.getCategoryColor}
-      // getCategoryLabel={this.props.getCategoryLabel}
-      // onViewSource={this.props.onViewSource}
-      // onHighlight={this.props.onHighlight}
-      // onSelect={this.props.onSelect}
-      // features={this.props.features}
-      />)
+      return (
+        <Card
+          ref={thisRef}
+          content={this.props.cardUI.layout({
+            event,
+            colors: this.props.colors,
+            coloringSet: this.props.coloringSet,
+            getFilterIdxFromColorSet
+          })}
+          language={this.props.language}
+          isLoading={this.props.isLoading}
+          isSelected={selections[idx]}
+        />
+      )
     })
   }
 
@@ -172,8 +95,7 @@ class CardStack extends React.Component {
     const { narrative } = this.props
     const showing = narrative.steps
 
-    const selections = showing
-      .map((_, idx) => (idx === narrative.current))
+    const selections = showing.map((_, idx) => idx === narrative.current)
 
     return this.renderCards(showing, selections)
   }
@@ -187,7 +109,9 @@ class CardStack extends React.Component {
         className='card-stack-header'
         onClick={() => this.props.onToggleCardstack()}
       >
-        <button className='side-menu-burg is-active'><span /></button>
+        <button className='side-menu-burg is-active'>
+          <span />
+        </button>
         <p className='header-copy top'>
           {`${this.props.selected.length} ${headerLang}`}
         </p>
@@ -198,21 +122,19 @@ class CardStack extends React.Component {
   renderCardStackContent () {
     return (
       <div id='card-stack-content' className='card-stack-content'>
-        <ul>
-          {this.renderSelectedCards()}
-        </ul>
+        <ul>{this.renderSelectedCards()}</ul>
       </div>
     )
   }
 
   renderNarrativeContent () {
     return (
-      <div id='card-stack-content' className='card-stack-content'
+      <div
+        id='card-stack-content'
+        className='card-stack-content'
         ref={this.refCardStackContent}
       >
-        <ul>
-          {this.renderNarrativeCards()}
-        </ul>
+        <ul>{this.renderNarrativeCards()}</ul>
       </div>
     )
   }
@@ -227,8 +149,7 @@ class CardStack extends React.Component {
           <div
             id='card-stack'
             className={`card-stack
-            ${isCardstack ? '' : ' folded'}`
-            }
+            ${isCardstack ? '' : ' folded'}`}
           >
             {this.renderCardStackHeader()}
             {this.renderCardStackContent()}
@@ -240,8 +161,7 @@ class CardStack extends React.Component {
             id='card-stack'
             ref={this.refCardStack}
             className={`card-stack narrative-mode
-            ${isCardstack ? '' : ' folded'}`
-            }
+            ${isCardstack ? '' : ' folded'}`}
             style={{ height }}
           >
             {this.renderNarrativeContent()}