useFiretable hook

src/components/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import clsx from "clsx";
 import {
   createStyles,
@@ -22,6 +22,10 @@ import ColumnDrawer from "./ColumnDrawer";
 import TableCell from "../components/TableCell";
 
 import useCell, { Cell } from "../hooks/useCell";
+import useFiretable, {
+  FiretableActions,
+  FiretableState
+} from "../hooks/useFiretable";
 const styles = (theme: Theme) =>
   createStyles({
     flexContainer: {
@@ -200,49 +204,60 @@ class MuiVirtualizedTable extends React.PureComponent<
 const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
 
 export default function Table(props: any) {
-  const { columns, rows, addColumn, tableActions } = props;
+  const { collection } = props;
 
-  const [cell, cellActions] = useCell({ updateCell: tableActions.updateCell });
-  if (columns)
+  const { tableState, tableActions } = useFiretable(collection);
+  useEffect(() => {
+    tableActions.table.set(collection);
+  }, [collection]);
+
+  if (tableState.columns)
     return (
-      <Paper style={{ height: 400, width: "100%" }}>
-        <VirtualizedTable
-          focusedCell={cell}
-          cellActions={cellActions}
-          rowCount={rows.length}
-          rowGetter={({ index }) => rows[index]}
-          columns={[
-            ...columns.map(
-              (column: {
-                fieldName: string;
-                columnName: string;
-                type: FieldType;
-              }) => ({
-                width: 200,
-                label: column.columnName,
-                dataKey: column.fieldName,
+      <>
+        <Paper style={{ height: 400, width: "100%" }}>
+          <VirtualizedTable
+            focusedCell={tableState.cell}
+            cellActions={tableActions.cell}
+            rowCount={tableState.rows.length}
+            rowGetter={({ index }) => tableState.rows[index]}
+            columns={[
+              ...tableState.columns.map(
+                (column: {
+                  fieldName: string;
+                  columnName: string;
+                  type: FieldType;
+                }) => ({
+                  width: 200,
+                  label: column.columnName,
+                  dataKey: column.fieldName,
+                  columnData: {
+                    fieldType: column.type,
+                    fieldName: column.fieldName,
+                    actions: {}
+                  }
+                })
+              ),
+              {
+                width: 80,
+                label: "add",
+                dataKey: "add",
                 columnData: {
-                  fieldType: column.type,
-                  fieldName: column.fieldName,
-                  actions: {}
-                }
-              })
-            ),
-            {
-              width: 80,
-              label: "add",
-              dataKey: "add",
-              columnData: {
-                fieldType: "DELETE",
-                actions: {
-                  addColumn: addColumn,
-                  deleteRow: tableActions.deleteRow
+                  fieldType: "DELETE",
+                  actions: {
+                    addColumn: tableActions.column.add,
+                    deleteRow: tableActions.row.delete
+                  }
                 }
               }
-            }
-          ]}
-        />
-      </Paper>
+            ]}
+          />
+        </Paper>
+        <Button
+        //onClick={tableActions.row.add}
+        >
+          Add Row
+        </Button>
+      </>
     );
   else return <>insert loading Skeleton here</>;
 }

src/components/TableCell.tsx

@@ -47,7 +47,7 @@ const TableCell = (props: any) => {
             checked={state}
             onChange={e => {
               setState(!state);
-              cellActions.updateValue(!state);
+              cellActions.update(!state);
             }}
           />
         );
@@ -57,7 +57,7 @@ const TableCell = (props: any) => {
             id="number"
             defaultValue={cellData}
             onChange={e => {
-              cellActions.updateValue(e.target.value);
+              cellActions.update(e.target.value);
             }}
             type="number"
             className={classes.textField}
@@ -79,7 +79,7 @@ const TableCell = (props: any) => {
               value={new Date("2014-08-18T21:11:54")}
               onChange={date => {
                 console.log(date);
-                //cellActions.updateValue(e.target.value);
+                //cellActions.update(e.target.value);
               }}
               KeyboardButtonProps={{
                 "aria-label": "change date"
@@ -96,7 +96,7 @@ const TableCell = (props: any) => {
             autoFocus
             defaultValue={cellData}
             onChange={e => {
-              cellActions.updateValue(e.target.value);
+              cellActions.update(e.target.value);
             }}
           />
         );
@@ -132,7 +132,7 @@ const TableCell = (props: any) => {
       })}
       variant="body"
       onClick={() => {
-        cellActions.setCell({
+        cellActions.set({
           rowIndex,
           docId: rowData.id,
           fieldName: columnData.fieldName,

src/hooks/useCell.ts

@@ -35,16 +35,16 @@ const useCell = (intialOverrides: any) => {
       cellDispatch({ updatedValue: null });
     }
   }, [cellState.cell]);
-  const setCell = (cell: Cell) => {
+  const set = (cell: Cell | null) => {
     cellDispatch({ prevCell: cellState.cell, cell });
   };
-  const updateValue = (value: any) => {
+  const update = (value: any) => {
     cellDispatch({ updatedValue: value });
   };
 
-  const actions = { setCell, updateValue };
+  const actions = { set, update };
 
-  return [cellState.cell, actions];
+  return [cellState, actions];
 };
 
 export default useCell;

src/hooks/useFiretable.ts

@@ -1,21 +1,47 @@
-//TODO: consolidate useTable, useTableConfig, useCell into useFiretable
-
-import { useEffect } from "react";
 import useTable from "./useTable";
-import useTableConfig from "./useTable";
-import useCell from "./useCell";
+import useTableConfig from "./useTableConfig";
+import useCell, { Cell } from "./useCell";
+
+export type FiretableActions = {
+  cell: { set: Function; update: Function };
+  column: { add: Function };
+  row: { add: Function; delete: Function };
+  table: { set: Function };
+};
+
+export type FiretableState = {
+  cell: Cell;
+  columns: any;
+  rows: any;
+};
 
 const useFiretable = (collectionName: string) => {
   const [tableConfig, configActions] = useTableConfig(collectionName);
-  const [table, tableActions] = useTable({
+  const [tableState, tableActions] = useTable({
     path: collectionName
   });
+  const [cellState, cellActions] = useCell({
+    updateCell: tableActions.updateCell
+  });
   const setTable = (collectionName: string) => {
     configActions.setTable(collectionName);
     tableActions.setTable(collectionName);
+    cellActions.set(null);
   };
-  const actions = { setTable: tableActions.setTable };
-  return [table, actions];
+  console.log("tableState", tableConfig);
+  const state: FiretableState = {
+    cell: cellState.cell,
+    columns: tableConfig.columns,
+    rows: tableState.rows
+  };
+  const actions: FiretableActions = {
+    cell: { ...cellActions },
+    column: { add: configActions.addColumn },
+    row: { add: tableActions.addRow, delete: tableActions.deleteRow },
+    table: { set: setTable }
+  };
+
+  return { tableState: state, tableActions: actions };
 };
 
 export default useFiretable;

src/views/TableView.tsx

@@ -7,30 +7,18 @@ import Table from "../components/Table";
 import useRouter from "../hooks/useRouter";
 import useTableConfig from "../hooks/useTableConfig";
 import Button from "@material-ui/core/Button";
+import useFiretable from "../hooks/useFiretable";
 const useStyles = makeStyles({});
 
 export default function AuthView() {
   const router = useRouter();
   const tableCollection = router.location.pathname.split("/")[2];
-  const [tableConfig, configActions] = useTableConfig(tableCollection);
-  const [table, tableActions] = useTable({
-    path: tableCollection
-  });
+
   const classes = useStyles();
 
-  useEffect(() => {
-    configActions.setTable(tableCollection);
-    tableActions.setTable(tableCollection);
-  }, [tableCollection]);
   return (
     <Navigation header={tableCollection}>
-      <Table
-        columns={tableConfig.columns}
-        rows={table.rows}
-        addColumn={configActions.addColumn}
-        tableActions={tableActions}
-      />
-      <Button onClick={tableActions.addRow}>Add Row</Button>
+      <Table collection={tableCollection} />
     </Navigation>
   );
 }