Using new Card API

src/components/CardStack.jsx

@@ -1,20 +1,24 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { timeFormat, timeParse } from 'd3'
 import * as selectors from '../selectors'
 
 // import Card from './Card.jsx'
 import { Card } from '@forensic-architecture/design-system/react'
 import copy from '../common/data/copy.json'
 
+const formatTime = timeFormat("%d %B %Y");
+const parseTimeUS = timeParse("%-m/%-d/%Y");
+
 class CardStack extends React.Component {
-  constructor () {
+  constructor() {
     super()
     this.refs = {}
     this.refCardStack = React.createRef()
     this.refCardStackContent = React.createRef()
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     const isNarrative = !!this.props.narrative
 
     if (isNarrative) {
@@ -22,7 +26,7 @@ class CardStack extends React.Component {
     }
   }
 
-  scrollToCard () {
+  scrollToCard() {
     const duration = 500
     const element = this.refCardStack.current
     const cardScroll = this.refs[this.props.narrative.current].current.offsetTop
@@ -52,7 +56,7 @@ class CardStack extends React.Component {
     animateScroll()
   }
 
-  renderCards (events, selections) {
+  renderCards(events, selections) {
     // if no selections provided, select all
     if (!selections) { selections = events.map(e => true) }
     this.refs = []
@@ -62,27 +66,61 @@ class CardStack extends React.Component {
       this.refs[idx] = thisRef
 
       return (<Card
-        event={event}
+        // event={event}
         ref={thisRef}
-        renderOrder={this.props.cardUI.order}
-        renderExtra={this.props.cardUI.extra}
-        sourceError={this.props.sourceError}
+        // sourceError={this.props.sourceError}
+        content={[
+          [
+            { kind: "date", title: "Incident Date", value: parseTimeUS(event.date) },
+            { kind: "text", title: "Location", value: event.location },
+          ],
+          [
+            {
+              kind: "button",
+              title: "Type of Violation",
+              value: event.associations.map(association => ({
+                text: association,
+                color: null,
+                onClick: () => console.log('hello')
+              })),
+            },
+          ],
+          [
+            {
+              kind: "text",
+              title: "Summary",
+              value: event.description,
+            },
+          ],
+          [
+            {
+              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: "text", title: "Category", value: "Press attack" }],
+        ]}
         language={this.props.language}
         isLoading={this.props.isLoading}
         isSelected={selections[idx]}
-        getCategoryGroup={this.props.getCategoryGroup}
-        getCategoryColor={this.props.getCategoryColor}
-        getCategoryLabel={this.props.getCategoryLabel}
-        onViewSource={this.props.onViewSource}
-        onHighlight={this.props.onHighlight}
-        onSelect={this.props.onSelect}
-        idx={idx}
-        features={this.props.features}
+      // 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}
       />)
     })
   }
 
-  renderSelectedCards () {
+  renderSelectedCards() {
     const { selected } = this.props
 
     if (selected.length > 0) {
@@ -91,7 +129,7 @@ class CardStack extends React.Component {
     return null
   }
 
-  renderNarrativeCards () {
+  renderNarrativeCards() {
     const { narrative } = this.props
     const showing = narrative.steps
 
@@ -101,7 +139,7 @@ class CardStack extends React.Component {
     return this.renderCards(showing, selections)
   }
 
-  renderCardStackHeader () {
+  renderCardStackHeader() {
     const headerLang = copy[this.props.language].cardstack.header
 
     return (
@@ -118,7 +156,7 @@ class CardStack extends React.Component {
     )
   }
 
-  renderCardStackContent () {
+  renderCardStackContent() {
     return (
       <div id='card-stack-content' className='card-stack-content'>
         <ul>
@@ -128,7 +166,7 @@ class CardStack extends React.Component {
     )
   }
 
-  renderNarrativeContent () {
+  renderNarrativeContent() {
     return (
       <div id='card-stack-content' className='card-stack-content'
         ref={this.refCardStackContent}
@@ -140,7 +178,7 @@ class CardStack extends React.Component {
     )
   }
 
-  render () {
+  render() {
     const { isCardstack, selected, narrative, timelineDims } = this.props
     // TODO: make '237px', which is the narrative header, less hard-coded
     const height = `calc(100% - 237px - ${timelineDims.height}px)`
@@ -177,7 +215,7 @@ class CardStack extends React.Component {
   }
 }
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   return {
     narrative: selectors.selectActiveNarrative(state),
     selected: selectors.selectSelected(state),