Move name to seperate component in research plan detail

app/assets/javascripts/components/ResearchPlanDetails.js

@@ -23,10 +23,10 @@ import SpinnerPencilIcon from './common/SpinnerPencilIcon';
 import ImageModal from './common/ImageModal';
 import LoadingActions from './actions/LoadingActions';
 
+import NameField from './research_plan/NameField';
 import RichTextField from './research_plan/RichTextField';
 import KetcherField from './research_plan/KetcherField';
 
-
 const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
 
 const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
@@ -107,23 +107,6 @@ export default class ResearchPlanDetails extends Component {
     return docType;
   }
 
-  handleInputChange(type, event) {
-    let {research_plan} = this.state;
-    research_plan.changed = true;
-    const value = event.target.value;
-    switch (type) {
-      case 'name':
-        research_plan.name = value;
-        break;
-      // case 'description':
-      //   research_plan.description = value;
-      //   break;
-    }
-    this.setState({
-      research_plan: research_plan
-    });
-  }
-
   researchPlanHeader(research_plan) {
     let saveBtnDisplay = research_plan.changed ? '' : 'none';
 
@@ -363,7 +346,24 @@ export default class ResearchPlanDetails extends Component {
       Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
   }
 
-  handleChange(value, index) {
+  handleSelect(eventKey) {
+    UIActions.selectTab({tabKey: eventKey, type: 'screen'});
+    this.setState({
+      activeTab: eventKey
+    })
+  }
+
+  handleNameChange(value) {
+    let {research_plan} = this.state
+    research_plan.changed = true
+    research_plan.name = value
+
+    this.setState({
+      research_plan: research_plan
+    });
+  }
+
+  handleBodyChange(value, index) {
     let {research_plan} = this.state
     research_plan.changed = true
     research_plan.body[index].value = value
@@ -374,22 +374,22 @@ export default class ResearchPlanDetails extends Component {
   }
 
   propertiesTab(research_plan) {
-    const { name, description } = research_plan;
+    const { name, body } = research_plan;
     const submitLabel = research_plan.isNew ? "Create" : "Save";
 
     const disabled = research_plan.isMethodDisabled('body')
 
-    let bodyFields = research_plan.body.map((field, index) => {
+    let bodyFields = body.map((field, index) => {
       switch (field.type) {
         case 'richtext':
           return <RichTextField key={field.id}
                                 field={field} index={index} disabled={disabled}
-                                onChange={this.handleChange.bind(this)} />
+                                onChange={this.handleBodyChange.bind(this)} />
           break;
         case 'ketcher':
           return <KetcherField key={field.id}
                                field={field} index={index} disabled={disabled}
-                               onChange={this.handleChange.bind(this)} />
+                               onChange={this.handleBodyChange.bind(this)} />
           break;
       }
     })
@@ -397,19 +397,8 @@ export default class ResearchPlanDetails extends Component {
     return (
       <ListGroup fill="true">
         <ListGroupItem>
-          <Row>
-            <Col md={4}>
-              <FormGroup>
-                <ControlLabel>Name</ControlLabel>
-                <FormControl
-                  type="text"
-                  value={name || ''}
-                  onChange={event => this.handleInputChange('name', event)}
-                  disabled={research_plan.isMethodDisabled('name')}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
+          <NameField value={name} disabled={research_plan.isMethodDisabled('name')}
+                     onChange={this.handleNameChange.bind(this)} />
           {bodyFields}
           <Row>
             <Col md={12}>
@@ -436,13 +425,6 @@ export default class ResearchPlanDetails extends Component {
     );
   }
 
-  handleSelect(eventKey) {
-    UIActions.selectTab({tabKey: eventKey, type: 'screen'});
-    this.setState({
-      activeTab: eventKey
-    })
-  }
-
   render() {
     const { research_plan } = this.state;
     const { name, description } = research_plan;

app/assets/javascripts/components/research_plan/KetcherField.js

@@ -88,8 +88,6 @@ export default class KetcherField extends Component {
       svgPath = '/images/wild_card/loading-bubbles.svg'
     }
 
-    console.log(svgPath);
-
     const imageDefault = !includes(svgPath, 'no_image_180.svg');
 
     return (

app/assets/javascripts/components/research_plan/NameField.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ControlLabel, FormControl, FormGroup, Row, Col } from 'react-bootstrap';
+
+export default class NameField extends Component {
+
+  constructor(props) {
+    super(props)
+    const { value, disabled, onChange } = props
+    this.state = {
+      value,
+      disabled,
+      onChange
+    }
+  }
+
+  handleChange(event) {
+    let { value, onChange } = this.state
+
+    value = event.target.value
+
+    this.setState({
+      value: value
+    });
+
+    onChange(value)
+  }
+
+  render() {
+    let { value, disabled } = this.state
+
+    return (
+      <Row>
+        <Col md={4}>
+          <FormGroup>
+            <ControlLabel>Name</ControlLabel>
+            <FormControl
+              type="text"
+              value={value || ''}
+              onChange={this.handleChange.bind(this)}
+              disabled={disabled}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+    )
+  }
+}
+
+NameField.propTypes = {
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+}