factor sources map to Card from CardSource

src/components/Card.jsx

@@ -86,19 +86,17 @@ class Card extends React.Component {
     )
   }
 
-  renderSource() {
-    return (
+  renderSources() {
+    return this.props.event.sources.map(source => (
       <CardSource
         isLoading={this.props.isLoading}
         language={this.props.language}
-        sources={[
-          ...this.props.event.sources.map(s => ({
-            ...s,
-            error: this.props.sourceError
-          })),
-        ]}
+        source={{
+          ...source,
+          error: this.props.sourceError
+        }}
       />
-    )
+    ))
   }
 
   // NB: should be internaionalized.
@@ -147,7 +145,7 @@ class Card extends React.Component {
       return (
         <div className="card-bottomhalf">
           {this.renderTags()}
-          {this.renderSource()}
+          {this.renderSources()}
           {this.renderNarrative()}
         </div>
       )

src/components/presentational/CardSource.js

@@ -3,23 +3,21 @@ import Spinner from './Spinner'
 
 import copy from '../../js/data/copy.json'
 
-const CardSource = ({ sources, language, isLoading, error }) => {
-  const source_lang = copy[language].cardstack.source
+function renderSource(source) {
+  return source.error ? (
+    <div><small>{source.error}</small></div>
+  ) : (
+    <div><p>TODO: display source properly.</p></div>
+  )
+}
 
-  function renderSource(source) {
-    return source.error ? (
-      <div><small>{source.error}</small></div>
-    ) : (
-      <div><p>TODO: display source properly.</p></div>
-    )
-  }
+const CardSource = ({ source, language, isLoading, error }) => {
+  const source_lang = copy[language].cardstack.source
 
   function renderContent() {
     return isLoading
       ? <Spinner/>
-      : sources.map(
-        source => renderSource(source)
-      )
+      : renderSource(source)
   }
 
   return (