footnotes element, close box, navigate to timestamp when clicking go to text

1 files changed, 19 insertions, 24 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index de60987..6c6ef31 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -1,40 +1,29 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
+import { EfluxClose } from '../nav/eflux.icons'
 
-const notes = [
-  { index: 1, text: "<i>Lorem ipsum</i>, p. 156." },
-  { index: 2, text: "Ibid." },
-  { index: 3, text: "Ibid." },
-  { index: 4, text: "Cicero, <i>De finibus bonorum et malorum</i>, 1.10.32." },
-  { index: 5, text: "Ibid." },
-  { index: 6, text: "Ibid." },
-  { index: 7, text: "<i>Lorem Ipsum: The Prosody of Verismillitude</i>, p. 72." },
-  { index: 8, text: "Ibid." },
-  { index: 9, text: "Ibid." },
-  { index: 10, text: "Ibid." },
-  { index: 11, text: "Ibid." },
-  { index: 12, text: "Ibid." },
-  { index: 13, text: "Ibid." },
-  { index: 14, text: "Ibid." },
-]
-
-
-export default class ViewerSectionsFootnotes extends Component {
+class ViewerSectionsFootnotes extends Component {
   render() {
+    const { footnoteList } = this.props
     return (
       <div className='nav-footnotes'>
         <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
-          x
+          {EfluxClose}
         </div>
         <div className='nav-footnotes-scroll'>
-          {notes.map(note => (
-            <div key={note.index} className="note-element">
-              <div className="note-number">{note.index}</div>
+          {footnoteList.map(note => (
+            <div key={note.footnote_id} className="note-element">
+              <div className="note-number">
+                {note.footnote_id}
+              </div>
               <div className="note-body">
                 <div dangerouslySetInnerHTML={{ __html: note.text }} />
-                <u>Go to text</u>
+                <u onClick={() => actions.viewer.seekToTimestamp(note.start_ts)}>
+                  {'Go to text'}
+                </u>
               </div>
             </div>
           ))}
@@ -52,3 +41,9 @@ const FootnotesLink = ({ type }) => (
     {'Notes'}
   </div>
 )
+
+const mapStateToProps = state => ({
+  footnoteList: state.viewer.footnoteList,
+})
+
+export default connect(mapStateToProps)(ViewerSectionsFootnotes)