create table

src/components/CreateTableDialog.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import _camelCase from "lodash/camelCase";
+
+export default function CreateTableDialog(props: any) {
+  const { classes, createTable } = props;
+  const [open, setOpen] = React.useState(false);
+  const [tableName, setTableName] = useState("");
+  const [collectionName, setCollectionName] = useState("");
+  useEffect(() => {
+    setCollectionName(_camelCase(tableName));
+  }, [tableName]);
+  function handleClickOpen() {
+    setOpen(true);
+  }
+
+  function handleClose() {
+    setTableName("");
+    setCollectionName("");
+    setOpen(false);
+  }
+  function handleCreate() {
+    createTable(tableName, collectionName);
+    handleClose();
+  }
+
+  return (
+    <div>
+      <Fab
+        className={classes.fabButton}
+        color="secondary"
+        aria-label="add"
+        onClick={handleClickOpen}
+      >
+        <AddIcon />
+      </Fab>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogTitle id="form-dialog-title">New table</DialogTitle>
+        <DialogContent>
+          <DialogContentText>Create a new Table</DialogContentText>
+          <TextField
+            autoFocus
+            onChange={e => {
+              setTableName(e.target.value);
+            }}
+            margin="dense"
+            id="name"
+            label="Table Name"
+            type="email"
+            fullWidth
+          />
+          <TextField
+            value={collectionName}
+            onChange={e => {
+              setCollectionName(e.target.value);
+            }}
+            margin="dense"
+            id="collection"
+            label="Collection Name"
+            type="email"
+            fullWidth
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleCreate} color="primary">
+            Create
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

src/components/Navigation.tsx

@@ -6,15 +6,13 @@ import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import Paper from "@material-ui/core/Paper";
-import Fab from "@material-ui/core/Fab";
 import MenuIcon from "@material-ui/icons/Menu";
-import AddIcon from "@material-ui/icons/Add";
 import Button from "@material-ui/core/Button";
 import Skeleton from "@material-ui/lab/Skeleton";
 import useSettings from "../hooks/useSettings";
 import useTable from "../hooks/useTable";
 import Table from "./Table";
-
+import CreateTableDialog from "./CreateTableDialog";
 import useTableConfig from "../hooks/useTableConfig";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -57,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function Navigation() {
   const classes = useStyles();
-  const settings = useSettings();
+  const [settings, createTable] = useSettings();
   const tableConfig = useTableConfig("founders");
   const [table] = useTable({ path: "founders" });
   return (
@@ -88,6 +86,18 @@ export default function Navigation() {
                 height={40}
                 className={classes.skeleton}
               />
+              <Skeleton
+                variant="rect"
+                width={120}
+                height={40}
+                className={classes.skeleton}
+              />
+              <Skeleton
+                variant="rect"
+                width={120}
+                height={40}
+                className={classes.skeleton}
+              />
             </>
           ) : (
             <>
@@ -101,9 +111,7 @@ export default function Navigation() {
             </>
           )}
 
-          <Fab color="secondary" aria-label="add" className={classes.fabButton}>
-            <AddIcon />
-          </Fab>
+          <CreateTableDialog classes={classes} createTable={createTable} />
           <div className={classes.grow} />
         </Toolbar>
       </AppBar>

src/hooks/useSettings.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import useDoc from "./useDoc";
+import useDoc, { DocActions } from "./useDoc";
 
 const useSettings = () => {
   const [settingsState, documentDispatch] = useDoc({
@@ -12,7 +12,15 @@ const useSettings = () => {
     }
   }, [settingsState]);
 
-  return settingsState;
+  const createTable = (name: string, collection: string) => {
+    const { tables } = settingsState;
+    console.log(tables);
+    documentDispatch({
+      action: DocActions.update,
+      data: { tables: [...tables, { name, collection }] }
+    });
+  };
+  return [settingsState, createTable];
 };
 
 export default useSettings;