Wire editor save button to state mgmt logic

Author: greenberga

locales/en/translation.json

@@ -63,7 +63,8 @@
       },
       "output": "Output",
       "instructions": {
-        "cancel": "Cancel"
+        "cancel": "Cancel",
+        "save": "Save"
       }
     }
   },

src/components/Instructions.jsx

@@ -7,7 +7,9 @@ export default function Instructions({
   instructions,
   isEditing,
   isOpen,
+  projectKey,
   onCancelEditing,
+  onSaveChanges,
 }) {
   if (!isEditing && !instructions || !isOpen) {
     return null;
@@ -22,7 +24,9 @@ export default function Instructions({
           isEditing ?
             <InstructionsEditor
               instructions={instructions}
+              projectKey={projectKey}
               onCancelEditing={onCancelEditing}
+              onSaveChanges={onSaveChanges}
             /> :
             markdownToReact(instructions)
         }
@@ -35,5 +39,7 @@ Instructions.propTypes = {
   instructions: PropTypes.string.isRequired,
   isEditing: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
+  projectKey: PropTypes.string.isRequired,
   onCancelEditing: PropTypes.func.isRequired,
+  onSaveChanges: PropTypes.func.isRequired,
 };

src/components/InstructionsEditor.jsx

@@ -1,23 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {t} from 'i18next';
+import bindAll from 'lodash/bindAll';
 
-export default function InstructionsEditor({instructions, onCancelEditing}) {
-  return (
-    <div className="instructions-editor">
-      <div className="instructions-editor-menu">
-        <button onClick={onCancelEditing}>
-          {t('workspace.components.instructions.cancel')}
-        </button>
+export default class InstructionsEditor extends React.Component {
+  constructor({instructions}) {
+    super();
+    this.state = {instructions};
+    bindAll(this, '_handleCancelEditing', '_handleSaveChanges', '_ref');
+  }
+
+  _handleCancelEditing() {
+    this.props.onCancelEditing();
+  }
+
+  _handleSaveChanges() {
+    const newValue = this.editor.innerText.trim();
+    this.props.onSaveChanges(this.props.projectKey, newValue);
+  }
+
+  _ref(preElement) {
+    this.editor = preElement;
+  }
+
+  render() {
+    return (
+      <div className="instructions-editor">
+        <div className="instructions-editor-menu">
+          <button onClick={this._handleSaveChanges}>
+            {t('workspace.components.instructions.save')}
+          </button>
+          <button onClick={this._handleCancelEditing}>
+            {t('workspace.components.instructions.cancel')}
+          </button>
+        </div>
+        <pre contentEditable ref={this._ref}>
+          {this.state.instructions}
+        </pre>
       </div>
-      <pre contentEditable>
-        {instructions}
-      </pre>
-    </div>
-  );
+    );
+  }
 }
 
 InstructionsEditor.propTypes = {
   instructions: PropTypes.string.isRequired,
+  projectKey: PropTypes.string.isRequired,
   onCancelEditing: PropTypes.func.isRequired,
+  onSaveChanges: PropTypes.func.isRequired,
 };

src/containers/Instructions.js

@@ -2,16 +2,18 @@ import {connect} from 'react-redux';
 import Instructions from '../components/Instructions';
 import {
   getCurrentProjectInstructions,
+  getCurrentProjectKey,
   getHiddenUIComponents,
   isEditingInstructions,
 } from '../selectors';
-import {stopEditingInstructions} from '../actions';
+import {stopEditingInstructions, updateProjectInstructions} from '../actions';
 
 function mapStateToProps(state) {
   return {
     instructions: getCurrentProjectInstructions(state),
     isEditing: isEditingInstructions(state),
     isOpen: !getHiddenUIComponents(state).includes('instructions'),
+    projectKey: getCurrentProjectKey(state),
   };
 }
 
@@ -20,6 +22,9 @@ function mapDispatchToProps(dispatch) {
     onCancelEditing() {
       dispatch(stopEditingInstructions());
     },
+    onSaveChanges(projectKey, newValue) {
+      dispatch(updateProjectInstructions(projectKey, newValue));
+    },
   };
 }
 

src/css/application.css

@@ -351,8 +351,7 @@ body {
     margin: 0;
     outline: 0;
     word-wrap: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
+    white-space: pre-wrap;
   }
 }
 
@@ -365,6 +364,10 @@ body {
   margin-bottom: 100%;
   text-align: right;
   background-color: var(--color-light-gray);
+
+  & button:not(:last-child) {
+    margin-right: .5em;
+  }
 }
 
 /** @define project-preview */