update google server, react hooks, packages

src/client/.babelrc

@@ -1,4 +1,9 @@
 {
-  "presets": ["@babel/react"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "presets": [
+  	"@babel/react"
+  ],
+  "plugins": [
+  	"@babel/plugin-proposal-object-rest-spread",
+  	"@babel/plugin-proposal-class-properties"
+  ]
 }

src/client/components/form-input.jsx

@@ -1,37 +1,28 @@
-import React from 'react';
+import React, {useState} 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);
-  }
+export default function FormInput(props) {
+  const [text, setText] = useState('');
 
-  handleChange(e) {
-    this.setState({text: e.target.value});
-  }
+  const handleChange = (event) => setText(event.target.value);
 
-  handleSubmit(e) {
-    e.preventDefault();
-    if (this.state.text.length) {
-      this.props.newSheetFormHandler(e, this.state.text);
-      this.setState({text: ''});
-    }
-  }
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (text.length === 0) return;
 
-  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>
-    );
-  }
+    props.newSheetFormHandler(event, text);
+    setText('');
+  };
+
+  return (
+    <div className="formBlock">
+      <span>Add a sheet: </span>
+      <form onSubmit={handleSubmit}>
+        <input onChange={handleChange} value={text} />
+      </form>
+    </div>
+  );
 }
 
 FormInput.propTypes = {

src/client/components/sheet-button.jsx

@@ -3,19 +3,20 @@ 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;
+  const {name, deleteButtonHandler, clickSheetNameHandler} = props;
+
+  const {sheetIndex, text, isActive} = name;
+
   return (
     <div className="sheetLine">
       <button
-        onClick={(e) => props.deleteButtonHandler(e, sheetIndex)}
+        onClick={(e) => deleteButtonHandler(e, sheetIndex)}
       >X
       </button>
       <span
-          onClick={(e) => props.clickSheetNameHandler(e, sheetName)}
-          className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')}
-        >{sheetName}
+          onClick={(e) => clickSheetNameHandler(e, text)}
+          className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
+        >{text}
       </span>
     </div>
   );

src/client/components/sheet-editor.jsx

@@ -1,67 +1,60 @@
-import React from 'react';
+import React, {useState, useEffect} 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);
-  }
+import server from '../server';
 
-  componentDidMount() {
-    google.script.run
-      .withSuccessHandler((data) => this.setState({names: data}))
-      .withFailureHandler((error) => alert(error))
-      .getSheetsData();
-  }
+export default function SheetEditor() {
+  const {getSheetsData, addSheet, deleteSheet, setActiveSheet} = server;
 
-  deleteButtonHandler(e, sheetIndex) {
-    return google.script.run
-      .withSuccessHandler((data) => this.setState({names: data}))
-      .withFailureHandler((error) => alert(error))
-      .deleteSheet(sheetIndex);
-  }
+  const [names, setNames] = useState([]);
 
-  clickSheetNameHandler(e, sheetName) {
-    return google.script.run
-      .withSuccessHandler((data) => this.setState({names: data}))
-      .withFailureHandler((error) => alert(error))
-      .setActiveSheet(sheetName);
-  }
+  useEffect(() => {
+    getSheetsData()
+      .then(setNames)
+      .catch(alert);
+  }, []);
 
-  newSheetFormHandler(e, newSheetTitle) {
-    return google.script.run
-      .withSuccessHandler((data) => this.setState({names: data}))
-      .withFailureHandler((error) => alert(error))
-      .addSheet(newSheetTitle);
-  }
+  const deleteButtonHandler = (e, sheetIndex) => {
+    deleteSheet(sheetIndex)
+      .then(setNames)
+      .catch(alert);
+  };
 
-  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>
-    );
-  }
+  const clickSheetNameHandler = (e, sheetName) => {
+    setActiveSheet(sheetName)
+      .then(setNames)
+      .catch(alert);
+  };
+
+  const newSheetFormHandler = (e, newSheetTitle) => {
+    addSheet(newSheetTitle)
+      .then(setNames)
+      .catch(alert);
+  };
+
+  return (
+    <div>
+      <FormInput newSheetFormHandler={newSheetFormHandler} />
+      <ReactCSSTransitionGroup
+        transitionName="sheetNames"
+        transitionAppear={true}
+        transitionEnterTimeout={100}
+        transitionLeaveTimeout={100}
+      >
+      {names.length ? names.map((name) => {
+        return <SheetButton
+          name={name}
+          deleteButtonHandler={deleteButtonHandler}
+          clickSheetNameHandler={clickSheetNameHandler}
+          key={name.sheetName}
+          />;
+          })
+        : null}
+      </ReactCSSTransitionGroup>
+    </div>
+  );
 }
+
+

src/client/server.js

@@ -0,0 +1,29 @@
+/*
+Convert google script server calls to more
+familiar js/promise-based functions.
+*/
+
+const serverMethods = {};
+
+// skip the reserved methods
+const ignoredMethods = [
+  'withFailureHandler',
+  'withLogger',
+  'withSuccessHandler',
+  'withUserObject',
+];
+
+for (const method in google.script.run) {
+  if (!ignoredMethods.includes(method)) {
+    serverMethods[method] = (...args) => {
+      return new Promise((resolve, reject) => {
+        google.script.run
+          .withSuccessHandler(resolve)
+          .withFailureHandler(reject)[method](...args);
+      });
+    };
+  }
+}
+
+
+export default serverMethods;

src/server/.babelrc

@@ -7,8 +7,8 @@
     "plugins": [
         "transform-es3-property-literals",
         "transform-es3-member-expression-literals",
-        "transform-class-properties",
-        "transform-object-rest-spread",
-        "transform-object-assign"
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-transform-object-assign"
     ]
 }