add support for markdown text files

package.json

@@ -16,6 +16,7 @@
     "es6-promise": "^4.1.1",
     "joi": "^14.0.1",
     "leaflet": "^1.0.3",
+    "marked": "^0.6.0",
     "normalizr": "^3.2.3",
     "object-hash": "^1.3.0",
     "react": "^16.6.3",

src/components/Dashboard.jsx

@@ -166,6 +166,5 @@ function injectSource(id) {
 
 export default connect(
   state => state,
-  // injectSource('src7'),
   mapDispatchToProps,
 )(Dashboard);

src/components/Md.jsx

@@ -0,0 +1,41 @@
+import React  from 'react'
+import PropTypes from 'prop-types'
+import marked from 'marked'
+
+class Md extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { md: null, error: null }
+  }
+
+  componentDidMount() {
+    fetch(this.props.path)
+      .then(resp => resp.text())
+      .then(text => {
+        this.setState({ md: marked(text) })
+      })
+      .catch(err => {
+        this.setState({ error: true })
+      })
+  }
+
+  render() {
+    if (this.state.md && !this.state.error) {
+      return (
+        <div dangerouslySetInnerHTML={{ __html: this.state.md }} />
+      )
+    } else if (this.state.error) {
+      return this.props.unloader || <div>Error: couldn't load source</div>
+    } else {
+      return this.props.loader
+    }
+  }
+}
+
+Md.propTypes = {
+  loader: PropTypes.func,
+  unloader: PropTypes.func,
+  path: PropTypes.string.isRequired
+}
+
+export default Md

src/components/SourceOverlay.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import Img from 'react-image'
 import { Player } from 'video-react'
+import Md from './Md.jsx'
 import Spinner from './presentational/Spinner'
 import NoSource from './presentational/NoSource'
+// TODO: move render functions into presentational components
 
 function SourceOverlay ({ source, onCancel }) {
   function renderImage(path) {
@@ -32,26 +34,17 @@ function SourceOverlay ({ source, onCancel }) {
   }
 
   function renderText(path) {
-    return (<div>{path}</div>)
+    return (
+      <div className='source-text-container'>
+        <Md
+          path={path}
+          loader={<Spinner />}
+          unloader={renderError()}
+        />
+      </div>
+    )
   }
 
-  // renderImagebook() {
-  //   return (
-  //     <div className='source-image-container'>
-  //       {source.paths.map((url, idx) => (
-  //         <Img
-  //           key={idx}
-  //           className='source-image'
-  //           src={url}
-  //           loader={<Spinner />}
-  //           unloader={<NoSource failedUrls={[source.path]} />}
-  //         />
-  //
-  //       ))}
-  //     </div>
-  //   )
-  // }
-
   function renderError() {
     return (
       <NoSource failedUrls={["NOT ALL SOURCES AVAILABLE IN APPLICATION YET"]} />

src/js/utilities.js

@@ -72,3 +72,18 @@ export function formatterWithYear(datetime) {
 export function formatter(datetime) {
   return d3.timeFormat("%d %b, %H:%M")(datetime);
 }
+
+/**
+ * Debugging function: put in place of a mapStateToProps function to
+ * view that source modal by default
+ */
+function injectSource(id) {
+  return state => ({
+    ...state,
+    app: {
+      ...state.app,
+      source: state.domain.sources[id]
+    }
+  })
+}
+

src/scss/mediaoverlay.scss

@@ -156,8 +156,8 @@ $header-inset: 10px;
   }
 }
 
-.source-image-container {
-  padding: 0 25px;
+.source-image-container, .source-text-container {
+  padding: 0 10em;
   display: flex;
   justify-content: center;
   align-items: center;

yarn.lock

@@ -3962,7 +3962,6 @@ lodash.tail@^4.1.1:
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
 lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@~4.17.10:
   version "4.17.11"
@@ -4036,6 +4035,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.0.tgz#a18d01cfdcf8d15c3c455b71c8329e5e0f01faa1"
+
 matcher@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-1.1.1.tgz#51d8301e138f840982b338b116bb0c09af62c1c2"
@@ -5244,7 +5247,6 @@ redux@^3.6.0:
 redux@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
-  integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==
   dependencies:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
@@ -6403,7 +6405,6 @@ verror@1.10.0:
 video-react@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/video-react/-/video-react-0.13.1.tgz#5d0dc68748f9b12e118beea1998d6ae5f6cbd6ba"
-  integrity sha512-AeGSpddfHv0UxeJztWUALYEjCdzXM1QdtQ5GD1VUd3vxcgwgIfB7EzFKcewRevSHHK8TDmjNksbvbWRobF/QeA==
   dependencies:
     classnames "^2.2.3"
     lodash.throttle "^4.1.1"