add Bootstrap working example

• re-organize file structure with one directory per dialog • add index.html file per dialog • add bootstrap styling and dynamic cdn loading • clean up react code and stylesheet npm setup script update adds force flag "setup": "rm -f .clasp.json ..." Update README.md Move clasp to devDependencies update dynamic cdn urls Add repository field
2020-06-29 02:08:18 -04:00
parent f4351f1a49
commit f2a259ce66
32 changed files with 845 additions and 399 deletions
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import FormInput from './FormInput';
+import SheetButton from './SheetButton';
+
+// This is a wrapper for google.script.run that lets us use promises.
+import server from '../../utils/server';
+
+const SheetEditor = () => {
+  const [names, setNames] = useState([]);
+
+  useEffect(() => {
+    // Call a server global function here and handle the response with .then() and .catch()
+    server
+      .getSheetsData()
+      .then(setNames)
+      .catch(alert);
+  }, []);
+
+  const deleteSheet = sheetIndex => {
+    server
+      .deleteSheet(sheetIndex)
+      .then(setNames)
+      .catch(alert);
+  };
+
+  const setActiveSheet = sheetName => {
+    server
+      .setActiveSheet(sheetName)
+      .then(setNames)
+      .catch(alert);
+  };
+
+  // You can also use async/await notation for server calls with our server wrapper.
+  // (This does the same thing as .then().catch() in the above handlers.)
+  const submitNewSheet = async newSheetName => {
+    try {
+      const response = await server.addSheet(newSheetName);
+      setNames(response);
+    } catch (error) {
+      alert(error);
+    }
+  };
+
+  return (
+    <div>
+      <FormInput submitNewSheet={submitNewSheet} />
+      <TransitionGroup className="sheet-list">
+        {names.length > 0 &&
+          names.map(name => (
+            <CSSTransition
+              classNames="sheetNames"
+              timeout={500}
+              key={name.name}
+            >
+              <SheetButton
+                sheetDetails={name}
+                deleteSheet={deleteSheet}
+                setActiveSheet={setActiveSheet}
+              />
+            </CSSTransition>
+          ))}
+      </TransitionGroup>
+    </div>
+  );
+};
+
+export default SheetEditor;