optimize webpack and other minor changes

src/client/.eslintrc.json

@@ -1,17 +1,11 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": [
-    "plugin:react/recommended",
-    "eslint:recommended",
-    "google"
-  ],
-  "plugins": [
-    "babel",
-    "react"
-  ],
+  "extends": ["airbnb-base", "plugin:react/recommended", "eslint:recommended"],
+  "plugins": ["babel", "react"],
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "globals": {
     "google": false,

src/client/components/about-sidebar.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 
 export const AboutPage = () => (
   <div className="sheetNameText">
@@ -9,7 +8,7 @@ export const AboutPage = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-     React + Google Apps Script
+      React + Google Apps Script
     </a>
     <div>-Elisha Nuchi</div>
   </div>

src/client/components/form-input.js

@@ -1,13 +1,12 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import '../styles.css';
 
 export default function FormInput(props) {
   const [text, setText] = useState('');
 
-  const handleChange = (event) => setText(event.target.value);
+  const handleChange = event => setText(event.target.value);
 
-  const handleSubmit = (event) => {
+  const handleSubmit = event => {
     event.preventDefault();
     if (text.length === 0) return;
 

src/client/components/sheet-button.js

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

src/client/components/sheet-button.jsx

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

src/client/components/sheet-editor.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} 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';
@@ -6,7 +6,7 @@ import SheetButton from './sheet-button';
 import server from '../server';
 
 export default function SheetEditor() {
-  const {getSheetsData, addSheet, deleteSheet, setActiveSheet} = server;
+  const { getSheetsData, addSheet, deleteSheet, setActiveSheet } = server;
 
   const [names, setNames] = useState([]);
 
@@ -43,18 +43,19 @@ export default function SheetEditor() {
         transitionEnterTimeout={100}
         transitionLeaveTimeout={100}
       >
-      {names.length ? names.map((name) => {
-        return <SheetButton
-          name={name}
-          deleteButtonHandler={deleteButtonHandler}
-          clickSheetNameHandler={clickSheetNameHandler}
-          key={name.sheetName}
-          />;
-          })
-        : null}
+        {names.length
+          ? names.map(name => {
+              return (
+                <SheetButton
+                  name={name}
+                  deleteButtonHandler={deleteButtonHandler}
+                  clickSheetNameHandler={clickSheetNameHandler}
+                  key={name.sheetName}
+                />
+              );
+            })
+          : null}
       </ReactCSSTransitionGroup>
     </div>
   );
 }
-
-

src/client/main.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SheetEditor from './components/sheet-editor';
+import './styles.css';
+
 
 ReactDOM.render(
   <SheetEditor />,

src/server/.eslintrc.json

@@ -1,8 +1,8 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": ["eslint:recommended", "google"],
-  "plugins": ["googleappsscript"],
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["googleappsscript", "prettier"],
   "env": {
     "googleappsscript/googleappsscript": true
   },
@@ -12,6 +12,7 @@
     "global": true
   },
   "rules": {
-    "import/prefer-default-export": 0
+    "import/prefer-default-export": 0,
+    "prettier/prettier": "error"
   }
-}
+}

src/server/code.js

@@ -1,4 +1,4 @@
-import * as publicFunctions from './sheets-utilities.js';
+import * as publicFunctions from './sheets-utilities';
 
 // Expose public functions
 global.onOpen = publicFunctions.onOpen;

src/server/sheets-utilities.js

@@ -11,25 +11,18 @@ const openDialog = () => {
   const html = HtmlService.createHtmlOutputFromFile('main')
     .setWidth(400)
     .setHeight(600);
-  SpreadsheetApp
-    .getUi() // Or DocumentApp or FormApp.
+  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .showModalDialog(html, 'Sheet Editor');
 };
 
 const openAboutSidebar = () => {
   const html = HtmlService.createHtmlOutputFromFile('about');
-  SpreadsheetApp
-    .getUi()
-    .showSidebar(html);
+  SpreadsheetApp.getUi().showSidebar(html);
 };
 
-const getSheets = () => SpreadsheetApp
-  .getActive()
-  .getSheets();
+const getSheets = () => SpreadsheetApp.getActive().getSheets();
 
-const getActiveSheetName = () => SpreadsheetApp
-  .getActive()
-  .getSheetName();
+const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
 
 const getSheetsData = () => {
   const activeSheetName = getActiveSheetName();
@@ -43,24 +36,19 @@ const getSheetsData = () => {
   });
 };
 
-const addSheet = (sheetTitle) => {
-  SpreadsheetApp
-    .getActive()
-    .insertSheet(sheetTitle);
+const addSheet = sheetTitle => {
+  SpreadsheetApp.getActive().insertSheet(sheetTitle);
   return getSheetsData();
 };
 
-const deleteSheet = (sheetIndex) => {
+const deleteSheet = sheetIndex => {
   const sheets = getSheets();
-  SpreadsheetApp
-    .getActive()
-    .deleteSheet(sheets[sheetIndex]);
+  SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
   return getSheetsData();
 };
 
-const setActiveSheet = (sheetName) => {
-  SpreadsheetApp
-    .getActive()
+const setActiveSheet = sheetName => {
+  SpreadsheetApp.getActive()
     .getSheetByName(sheetName)
     .activate();
   return getSheetsData();