paragraph list view

1 files changed, 92 insertions, 0 deletions

diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
new file mode 100644
index 0000000..059baff
--- /dev/null
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -0,0 +1,92 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../actions'
+import { ParagraphElementLookup } from '../components/paragraph.types'
+
+class ParagraphList extends Component {
+  state = {
+    paragraphs: [],
+  }
+  constructor(props) {
+    super(props)
+    this.onAnnotationClick = this.onAnnotationClick.bind(this)
+    this.onParagraphDoubleClick = this.onParagraphDoubleClick.bind(this)
+  }
+  componentDidMount() {
+    this.build()
+  }
+  build() {
+    const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
+    const { lookup: paragraphLookup } = this.props.paragraph
+    let currentParagraph = {}
+    const paragraphs = []
+    annotationOrder.forEach((annotation_id, i) => {
+      const annotation = annotationLookup[annotation_id]
+      const paragraph = paragraphLookup[annotation.paragraph_id]
+      if (annotation.paragraph_id !== currentParagraph.id) {
+        const paragraph_type = getParagraphType(annotation, paragraph)
+        currentParagraph = {
+          id: annotation.paragraph_id || ('index_' + i),
+          type: paragraph_type,
+          annotations: [],
+        }
+        paragraphs.push(currentParagraph)
+      }
+      currentParagraph.annotations.push(annotation)
+    })
+    this.setState({ paragraphs })
+  }
+  onAnnotationClick(e, paragraph, annotation){
+    //
+  }
+  onParagraphDoubleClick(e, paragraph) {
+    //
+  }
+  render() {
+    const { paragraphs } = this.state
+    return (
+      <div className='paragraphs'>
+        <div className='content'>
+          {paragraphs.map(paragraph => {
+            if (paragraph.type in ParagraphElementLookup) {
+              const ParagraphElement = ParagraphElementLookup[paragraph.type]
+              return (
+                <ParagraphElement
+                  key={paragraph.id}
+                  paragraph={paragraph}
+                  selectedParagraph={false}
+                  selectedAnnotation={-1}
+                  onAnnotationClick={this.onAnnotationClick}
+                  onDoubleClick={this.onParagraphDoubleClick}
+                />
+              )
+            } else {
+              return <div key={paragraph.id}>{'(empty)'}</div>
+            }
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+const getParagraphType = (annotation, paragraph) => {
+  if (!paragraph) {
+    return annotation.type
+  }
+  return paragraph.type
+}
+
+const mapStateToProps = state => ({
+  paragraph: state.paragraph.index,
+  annotation: state.annotation.index,
+  audio: state.audio,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList)