diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index d6642177..e2efc494 100644
--- a/src/components/Table.tsx
+++ b/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 (
-
- rows[index]}
- columns={[
- ...columns.map(
- (column: {
- fieldName: string;
- columnName: string;
- type: FieldType;
- }) => ({
- width: 200,
- label: column.columnName,
- dataKey: column.fieldName,
+ <>
+
+ 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
+ }
}
}
- }
- ]}
- />
-
+ ]}
+ />
+
+
+ >
);
else return <>insert loading Skeleton here>;
}
diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx
index 8bfd409b..93bad18e 100644
--- a/src/components/TableCell.tsx
+++ b/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,
diff --git a/src/hooks/useCell.ts b/src/hooks/useCell.ts
index 87d35634..79474a95 100644
--- a/src/hooks/useCell.ts
+++ b/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;
diff --git a/src/hooks/useFiretable.ts b/src/hooks/useFiretable.ts
index f136ac76..ad4f5924 100644
--- a/src/hooks/useFiretable.ts
+++ b/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;
diff --git a/src/views/TableView.tsx b/src/views/TableView.tsx
index b862cc6e..b355fdd8 100644
--- a/src/views/TableView.tsx
+++ b/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 (
-
-
+
);
}