add optional thumbnail to source

src/components/presentational/CardSource.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Spinner from './Spinner'
+import Img from 'react-image'
 
 import copy from '../../js/data/copy.json'
 
 const CardSource = ({ source, isLoading, onClickHandler }) => {
-
   function renderIconText(type) {
     switch(type) {
       case 'Eyewitness Testimony':
@@ -34,16 +34,31 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
       </div>
     )
   }
+
+  let thumbnail = source.thumbnail
+  if (!thumbnail || thumbnail === '') {
+    // default to first image in paths, null if no images
+    const imgs = source.paths.filter(p => p.match(/\.(jpg|png)$/))
+    thumbnail = imgs.length > 0 ? imgs[0] : null
+  }
+
+  console.log(!!thumbnail)
+  console.log(thumbnail)
+
   return (
     <div className="card-source">
       {isLoading
           ? <Spinner/>
           : (
             <div className="source-row" onClick={() => onClickHandler(source)}>
-              <i className="material-icons source-icon">
-                {renderIconText(source.type)}
-              </i>
-              <p>{source.id}</p>
+              {!!thumbnail ? (
+                <img className="source-icon" src={thumbnail} width={30} height={30} />
+              ) : (
+                <i className="material-icons source-icon">
+                  {renderIconText(source.type)}
+                </i>
+              )}
+             <p>{source.id}</p>
             </div>
           )}
     </div>

src/reducers/schema/sourceSchema.js

@@ -2,6 +2,7 @@ import Joi from 'joi';
 
 const sourceSchema = Joi.object().keys({
   id:             Joi.string().required(),
+  thumbnail:      Joi.string().allow(''),
   paths:          Joi.array().required(),
   type:           Joi.string().allow(''),
   affil_1:        Joi.string().allow(''),