1 files changed, 107 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/editor/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/editor/paragraph/components/paragraph.form.js
new file mode 100644
index 0000000..55cb74e
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/paragraph/components/paragraph.form.js
@@ -0,0 +1,107 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { timestamp, capitalize } from 'app/utils'
+import { Select, Checkbox } from 'app/common'
+
+const PARAGRAPH_TYPES = [
+  'paragraph', 'intro_paragraph', 'blockquote', 'pullquote', 'big_text', 'hidden',
+].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
+
+class ParagraphForm extends Component {
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  componentDidMount() {
+    if (this.textareaRef && this.textareaRef.current) {
+      this.textareaRef.current.focus()
+    }
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    const { onUpdate, paragraph } = this.props
+    onUpdate({
+      ...paragraph,
+      [name]: value,
+    })
+  }
+  handleSettingsSelect(name, value) {
+    const { onUpdate, paragraph } = this.props
+    onUpdate({
+      ...paragraph,
+      settings: {
+        ...paragraph.settings,
+        [name]: value,
+      }
+    })
+  }
+  handleSubmit() {
+    const { paragraph, onClose } = this.props
+    actions.paragraph.update(paragraph)
+      .then(response => {
+        console.log(response)
+        onClose()
+      })
+  }
+  render() {
+    const { paragraph, y } = this.props
+    console.log(paragraph)
+    return (
+      <div
+        className='paragraphForm'
+        style={{
+          top: y,
+        }}
+      >
+        {this.renderButtons()}
+        <div>
+          <Checkbox
+            label="Hide in transcript"
+            name="hide_in_transcript"
+            checked={paragraph.settings ? paragraph.settings.hide_in_transcript : false}
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+      </div>
+    )
+  }
+  renderButtons() {
+    const { paragraph } = this.props
+    return (
+      <div className='row buttons'>
+        <div className='row'>
+          <Select
+            name='type'
+            selected={paragraph.type}
+            options={PARAGRAPH_TYPES}
+            defaultOption='text'
+            onChange={this.handleSelect}
+          />
+          <div className='ts'>{timestamp(paragraph.start_ts, 1, true)}</div>
+        </div>
+        <div>
+          <button onClick={this.handleSubmit}>Save</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphForm)