add support for markdown text files

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"]} />