From 8bdf3c9e98a251a0e2966d73491ad321e730a0f0 Mon Sep 17 00:00:00 2001 From: shams mosowi Date: Fri, 13 Sep 2019 12:40:59 +1000 Subject: [PATCH] useFiretable hook --- src/components/Table.tsx | 93 +++++++++++++++++++++--------------- src/components/TableCell.tsx | 10 ++-- src/hooks/useCell.ts | 8 ++-- src/hooks/useFiretable.ts | 42 ++++++++++++---- src/views/TableView.tsx | 18 ++----- 5 files changed, 100 insertions(+), 71 deletions(-) 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 ( - - +
); }