fmt source display: photo

src/components/Dashboard.jsx

@@ -155,13 +155,13 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(
-  // state => ({
-  //   ...state,
-  //   app: {
-  //     ...state.app,
-  //     source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
-  //   }
-  // }),
-  state => state,
+  state => ({
+    ...state,
+    app: {
+      ...state.app,
+      source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
+    }
+  }),
+  // state => state,
   mapDispatchToProps,
 )(Dashboard);

src/components/SourceOverlay.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import Img from 'react-image'
+import Spinner from './presentational/Spinner'
+import NoSource from './presentational/NoSource'
 
 class SourceOverlay extends React.Component {
   constructor(props) {
@@ -24,9 +26,11 @@ class SourceOverlay extends React.Component {
     const imageExts = ['.jpg', '.png']
     const possibleUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
     return (
-      <div>
-        <Img src={possibleUrls} />
-      </div>
+      <Img
+        src={possibleUrls}
+        loader={<Spinner />}
+        unloader={<NoSource failedUrls={possibleUrls} />}
+      />
     )
   }
 
@@ -56,6 +60,7 @@ class SourceOverlay extends React.Component {
   }
 
   render() {
+    const {id, url, title, date, type, affil_1, affil_2} = this.props.source
     return (
       <div className="mo-overlay">
         <div className="mo-container" onClick={this.props.onCancel}>
@@ -68,6 +73,17 @@ class SourceOverlay extends React.Component {
           <div className="mo-media-container">
             {this._renderSwitch()}
           </div>
+          <div className="mo-meta-container">
+            <div className="mo-box">
+              {id ? <div><b>{id}</b></div> : null}
+              {title? <div><b>{title}</b></div> : null}
+              <hr/>
+              {type ? <div>Type: <span className="indent">{type}</span></div> : null}
+              {date ? <div>Date:<span className="indent">{date}</span></div> : null}
+              <hr/>
+              {url ? <div><a href={url} target="_blank">Link to original webpage</a></div> : null}
+            </div>
+          </div>
         </div>
       </div>
     )

src/components/presentational/NoSource.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const NoSource = ({ failedUrls  }) => {
+  return (
+    <div className="no-source-container">
+      <div className="no-source-row">
+        <i className="material-icons no-source-icon">
+          error
+        </i>
+        <div>No media found.</div>
+      </div>
+      <div className="no-source-row">
+        The following URLs were tried:
+      </div>
+      <ul>
+        {failedUrls.map((url, idx) => <li key={idx}>{url}</li>)}
+      </ul>
+    </div>
+  )
+}
+
+export default NoSource;