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,106 @@
+import React, { useState, useEffect } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { Form, Button, ListGroup, Col, Row } from 'react-bootstrap';
+
+// This is a wrapper for google.script.run that lets us use promises.
+import server from '../../utils/server';
+
+const SheetEditor = () => {
+  const [newSheetName, setNewSheetName] = useState('');
+  const [names, setNames] = useState([]);
+
+  useEffect(() => {
+    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);
+  };
+
+  const submitNewSheet = async () => {
+    try {
+      const response = await server.addSheet(newSheetName);
+      setNames(response);
+    } catch (error) {
+      alert(error);
+    }
+  };
+
+  return (
+    <div style={{ padding: '3px', overflowX: 'hidden' }}>
+      <Form onSubmit={submitNewSheet}>
+        <Form.Group controlId="formNewSheet">
+          <Form.Label>Add a new sheet</Form.Label>
+          <Row>
+            <Col xs={10}>
+              <Form.Control
+                type="text"
+                placeholder="Sheet name"
+                value={newSheetName}
+                onChange={e => {
+                  setNewSheetName(e.target.value);
+                }}
+              />
+            </Col>
+            <Col xs={2}>
+              <Button variant="primary" type="submit">
+                Submit
+              </Button>
+            </Col>
+          </Row>
+          <Form.Text className="text-muted">
+            Enter the name for your new sheet.
+          </Form.Text>
+        </Form.Group>
+      </Form>
+      <ListGroup>
+        <TransitionGroup className="sheet-list">
+          {names.length > 0 &&
+            names.map(name => (
+              <CSSTransition
+                classNames="sheetNames"
+                timeout={500}
+                key={name.name}
+              >
+                <ListGroup.Item
+                  className="d-flex"
+                  key={`${name.index}-${name.name}`}
+                >
+                  <Button
+                    className="border-0"
+                    variant="outline-danger"
+                    size="sm"
+                    onClick={() => deleteSheet(name.index)}
+                  >
+                    &times;
+                  </Button>
+                  <Button
+                    className="border-0 mx-2"
+                    variant={name.isActive ? 'success' : 'outline-success'}
+                    onClick={() => setActiveSheet(name.name)}
+                  >
+                    {name.name}
+                  </Button>
+                </ListGroup.Item>
+              </CSSTransition>
+            ))}
+        </TransitionGroup>
+      </ListGroup>
+    </div>
+  );
+};
+
+export default SheetEditor;