2 files changed, 109 insertions, 6 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>
diff --git a/animism-align/frontend/app/views/editor/footnotes/footnotes.css b/animism-align/frontend/app/views/editor/footnotes/footnotes.css
index e7eb790..f13a835 100644
--- a/animism-align/frontend/app/views/editor/footnotes/footnotes.css
+++ b/animism-align/frontend/app/views/editor/footnotes/footnotes.css
@@ -1,16 +1,45 @@
-.footnote-form {
+.footnote-entry {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  background: #111;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  max-width: 800px;
+  cursor: pointer;
+  transition: background 0.1s;
 }
+.footnote-entry:hover {
+  background: #333;
+}
+
+
 .footnote-index {
-  width: 80px;
+  width: 120px;
   text-align: right;
   margin: 0;
   padding: 0 1rem 0 0;
 }
 .footnote-text {
-  padding: 0 0 0.5rem 0;
   flex: 1;
-  max-width: 500px;
 }
+
+.footnote-form .textarea span {
+  text-align: right;
+  padding-right: 1.25rem;
+}
+.footnote-form .textarea textarea {
+  width: 670px;
+  height: 70px;
+}
+.footnote-form .buttons {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+.footnote-form .buttons span {
+  display: block;
+  width: 128px;
+}
+.footnote-form .buttons button {
+  margin-right: 0.5rem;
+}
\ No newline at end of file