1 files changed, 76 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js b/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js
index 3cd909d..525eb46 100644
--- a/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js
+++ b/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js
@@ -1,14 +1,88 @@
 import React, { Component } from 'react'
 
+import { TextArea, Button } from 'app/common'
+import actions from 'app/actions'
+
 export default class FootnoteForm extends Component {
   state = {
     editing: false,
+    footnote: {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.edit = this.edit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+  }
+
+  componentDidMount() {
+    this.setState({ footnote: { ...this.props.footnote } })
+  }
+
+  edit() {
+    this.setState({ editing: true })
+  }
+
+  handleChange(e){
+    e.preventDefault()
+    this.setState({
+      footnote: {
+        ...this.state.footnote,
+        text: e.target.value,
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    actions.annotation.update(this.state.footnote)
+    this.setState({ editing: false })
+  }
+
+  handleCancel(e) {
+    e.preventDefault()
+    this.setState({
+      editing: false,
+      footnote: { ...this.props.footnote }
+    })
   }
 
   render() {
-    const { footnote, index } = this.props
+    return this.state.editing
+      ? this.renderForm()
+      : this.renderEntry()
+  }
+
+  renderForm() {
+    const { index } = this.props
+    const { footnote } = this.state
+    return (
+      <form className='footnote-form' onSubmit={this.handleSubmit}>
+        <TextArea
+          title={`Edit footnote ${index}`}
+          name="text"
+          placeholder="Enter footnote"
+          data={footnote}
+          onChange={this.handleChange}
+        />
+        <div className='buttons'>
+          <span></span>
+          <div>
+            <button onClick={this.handleSubmit}>Save footnote</button>
+            <button onClick={this.handleCancel}>Cancel</button>
+          </div>
+        </div>
+      </form>
+    )
+  }
+
+  renderEntry() {
+    const { index } = this.props
+    const { footnote } = this.state
     return (
-      <div className='footnote-form'>
+      <div className='footnote-entry' onClick={this.edit}>
         <div className='footnote-index'>
           {index}{'. '}
         </div>