created components directory with modularized components; slight refactoring of code

src/client/components/form-input.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles.css';
+
+export default class FormInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(e) {
+    this.setState({text: e.target.value});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.state.text.length) {
+      this.props.newSheetFormHandler(e, this.state.text);
+      this.setState({text: ''});
+    }
+  }
+
+  render() {
+    return (
+      <div className="formBlock">
+        <span>Add a sheet: </span>
+        <form onSubmit={(e) => this.handleSubmit(e)}>
+          <input onChange={this.handleChange} value={this.state.text} />
+        </form>
+      </div>
+    );
+  }
+}
+
+FormInput.propTypes = {
+  newSheetFormHandler: PropTypes.func,
+};

src/client/components/sheet-button.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles.css';
+
+const SheetButton = (props) => {
+  let sheetIndex = props.name.sheetIndex;
+  let sheetName = props.name.text;
+  let isActiveSheet = props.name.isActive;
+  return (
+    <div className="sheetLine">
+      <button
+        onClick={(e) => props.deleteButtonHandler(e, sheetIndex)}
+      >X
+      </button>
+      <span
+          onClick={(e) => props.clickSheetNameHandler(e, sheetName)}
+          className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')}
+        >{sheetName}
+      </span>
+    </div>
+  );
+};
+
+export default SheetButton;
+
+SheetButton.propTypes = {
+  name: PropTypes.object,
+  deleteButtonHandler: PropTypes.func,
+  clickSheetNameHandler: PropTypes.func,
+};

src/client/components/sheet-editor.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import FormInput from './form-input';
+import SheetButton from './sheet-button';
+
+export default class SheetEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {names: []};
+    this.deleteButtonHandler = this.deleteButtonHandler.bind(this);
+    this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this);
+    this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
+  }
+
+  componentDidMount() {
+    google.script.run
+      .withSuccessHandler((data) => this.setState({names: data}))
+      .withFailureHandler((error) => alert(error))
+      .getSheetsData();
+  }
+
+  deleteButtonHandler(e, sheetIndex) {
+    return google.script.run
+      .withSuccessHandler((data) => this.setState({names: data}))
+      .withFailureHandler((error) => alert(error))
+      .deleteSheet(sheetIndex);
+  }
+
+  clickSheetNameHandler(e, sheetName) {
+    return google.script.run
+      .withSuccessHandler((data) => this.setState({names: data}))
+      .withFailureHandler((error) => alert(error))
+      .setActiveSheet(sheetName);
+  }
+
+  newSheetFormHandler(e, newSheetTitle) {
+    return google.script.run
+      .withSuccessHandler((data) => this.setState({names: data}))
+      .withFailureHandler((error) => alert(error))
+      .addSheet(newSheetTitle);
+  }
+
+  render() {
+    let names = this.state.names;
+    return (
+      <div>
+        <FormInput newSheetFormHandler={this.newSheetFormHandler} />
+        <ReactCSSTransitionGroup
+          transitionName="sheetNames"
+          transitionAppear={true}
+          transitionEnterTimeout={100}
+          transitionLeaveTimeout={100}
+        >
+          {names.length ? names.map((name) => {
+                return <SheetButton
+                  name={name}
+                  deleteButtonHandler={this.deleteButtonHandler}
+                  clickSheetNameHandler={this.clickSheetNameHandler}
+                  key={name.sheetName}
+                  />;
+              })
+            : null}
+        </ReactCSSTransitionGroup>
+      </div>
+    );
+  }
+}