From 0232456feea336eea830ace6629f93e2c811afdd Mon Sep 17 00:00:00 2001 From: shams mosowi Date: Tue, 17 Sep 2019 09:26:44 +1000 Subject: [PATCH] update firestore directly from useCell using docRef --- src/components/Fields/CheckBox.tsx | 9 ++---- src/components/Fields/Date.tsx | 2 +- src/components/Fields/DateTime.tsx | 2 +- src/components/Fields/Image.tsx | 2 ++ src/components/Fields/Rating.tsx | 2 +- src/components/Table.tsx | 3 +- src/components/TableCell.tsx | 41 ++---------------------- src/hooks/useFiretable/index.ts | 8 ++--- src/hooks/useFiretable/useCell.ts | 9 ++++-- src/hooks/useFiretable/useTable.ts | 16 ++------- src/hooks/useFiretable/useTableConfig.ts | 1 - 11 files changed, 23 insertions(+), 72 deletions(-) diff --git a/src/components/Fields/CheckBox.tsx b/src/components/Fields/CheckBox.tsx index 715d3bb3..497fe0ad 100644 --- a/src/components/Fields/CheckBox.tsx +++ b/src/components/Fields/CheckBox.tsx @@ -1,8 +1,5 @@ -import React, { useState } from "react"; -import Checkbox, { CheckboxProps } from "@material-ui/core/Checkbox"; - -import CheckBoxIcon from "@material-ui/icons/CheckBox"; -import CheckBoxOutlineIcon from "@material-ui/icons/CheckBoxOutlineBlank"; +import React from "react"; +import Checkbox from "@material-ui/core/Checkbox"; const CheckBox = (props: any) => { const { columnData, cellData, cellActions, rowData, rowIndex } = props; @@ -13,7 +10,7 @@ const CheckBox = (props: any) => { cellActions.updateFirestore({ rowIndex, value: !cellData, - docId: rowData.id, + docRef: rowData.ref, fieldName: columnData.fieldName }); }} diff --git a/src/components/Fields/Date.tsx b/src/components/Fields/Date.tsx index 159015ef..24af8a10 100644 --- a/src/components/Fields/Date.tsx +++ b/src/components/Fields/Date.tsx @@ -23,7 +23,7 @@ const Date = (props: any) => { const cell = { rowIndex, value: date, - docId: rowData.id, + docRef: rowData.ref, fieldName: columnData.fieldName }; cellActions.updateFirestore(cell); diff --git a/src/components/Fields/DateTime.tsx b/src/components/Fields/DateTime.tsx index 82946d6d..487ee1d1 100644 --- a/src/components/Fields/DateTime.tsx +++ b/src/components/Fields/DateTime.tsx @@ -23,7 +23,7 @@ const DateTime = (props: any) => { const cell = { rowIndex, value: date, - docId: rowData.id, + docRef: rowData.ref, fieldName: columnData.fieldName }; cellActions.updateFirestore(cell); diff --git a/src/components/Fields/Image.tsx b/src/components/Fields/Image.tsx index cd9cec25..97cdf7da 100644 --- a/src/components/Fields/Image.tsx +++ b/src/components/Fields/Image.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useState } from "react"; import { useDropzone } from "react-dropzone"; import useUploader from "../../hooks/useFiretable/useUploader"; + +// TODO: indecate state completion / error const Image = (props: any) => { const { columnData, cellData, cellActions, rowData, rowIndex } = props; const [uploaderState, upload] = useUploader(); diff --git a/src/components/Fields/Rating.tsx b/src/components/Fields/Rating.tsx index 8541e099..b7c65fc3 100644 --- a/src/components/Fields/Rating.tsx +++ b/src/components/Fields/Rating.tsx @@ -11,7 +11,7 @@ const Rating = (props: any) => { const cell = { rowIndex, value: newValue, - docId: rowData.id, + docRef: rowData.ref, fieldName: columnData.fieldName }; cellActions.updateFirestore(cell); diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 157a4258..1899d659 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -75,7 +75,7 @@ class MuiVirtualizedTable extends React.PureComponent< > { static defaultProps = { headerHeight: 48, - rowHeight: 200 + rowHeight: 180 }; getRowClassName = ({ index }: Row) => { @@ -207,6 +207,7 @@ const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable); export default function Table(props: any) { const { collection } = props; const { tableState, tableActions } = useFiretable(collection); + useEffect(() => { tableActions.table.set(collection); }, [collection]); diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx index 939f7e6f..58250e90 100644 --- a/src/components/TableCell.tsx +++ b/src/components/TableCell.tsx @@ -34,44 +34,6 @@ const TableCell = (props: any) => { focusedCell && focusedCell.fieldName === columnData.fieldName && focusedCell.rowIndex === rowIndex; - /* - const inputRenderer = () => { - switch (fieldType) { - case FieldType.date: - return ( - - { - console.log(date); - //cellActions.update(e.target.value); - }} - KeyboardButtonProps={{ - "aria-label": "change date" - }} - /> - - ); - - case FieldType.rating: - return ( - { - cellActions.update(newValue); - }} - /> - ); - - - */ const renderCell = () => { switch (fieldType) { @@ -170,9 +132,10 @@ const TableCell = (props: any) => { })} variant="body" onClick={() => { + // set focusedCell on click cellActions.set({ rowIndex, - docId: rowData.id, + docRef: rowData.ref, fieldName: columnData.fieldName, value: cellData }); diff --git a/src/hooks/useFiretable/index.ts b/src/hooks/useFiretable/index.ts index 4696a3d6..875e645d 100644 --- a/src/hooks/useFiretable/index.ts +++ b/src/hooks/useFiretable/index.ts @@ -25,9 +25,7 @@ const useFiretable = (collectionName: string) => { const [tableState, tableActions] = useTable({ path: collectionName }); - const [cellState, cellActions] = useCell({ - updateCell: tableActions.updateCell - }); + const [cellState, cellActions] = useCell({}); //TODO: move focus to cell above on down key useEffect(() => { @@ -40,7 +38,7 @@ const useFiretable = (collectionName: string) => { if (cellState.cell.rowIndex !== 0) { const nextRowIndex = cellState.cell.rowIndex - 1; const nextCell: Cell = { - docId: tableState.rows[nextRowIndex].id, + docRef: tableState.rows[nextRowIndex].ref, fieldName: cellState.cell.fieldName, rowIndex: nextRowIndex, value: tableState.rows[nextRowIndex].value @@ -60,7 +58,7 @@ const useFiretable = (collectionName: string) => { } else { const nextRowIndex = cellState.cell.rowIndex + 1; const nextCell: Cell = { - docId: tableState.rows[nextRowIndex].id, + docRef: tableState.rows[nextRowIndex].ref, fieldName: cellState.cell.fieldName, rowIndex: nextRowIndex, value: tableState.rows[nextRowIndex].value diff --git a/src/hooks/useFiretable/useCell.ts b/src/hooks/useFiretable/useCell.ts index 6d39590b..8cc535a3 100644 --- a/src/hooks/useFiretable/useCell.ts +++ b/src/hooks/useFiretable/useCell.ts @@ -5,7 +5,7 @@ import equals from "ramda/es/equals"; export type Cell = { fieldName: string; rowIndex: number; - docId: string; + docRef: firebase.firestore.DocumentReference; value: any; }; @@ -17,13 +17,16 @@ const cellIntialState = { cell: null }; +const updateCell = (cell: Cell) => { + cell.docRef.update({ [cell.fieldName]: cell.value }); +}; const useCell = (intialOverrides: any) => { const [cellState, cellDispatch] = useReducer(cellReducer, { ...cellIntialState, ...intialOverrides }); useEffect(() => { - const { prevCell, updateCell, updatedValue } = cellState; + const { prevCell, updatedValue } = cellState; // check for change if ( updatedValue !== null && @@ -44,7 +47,7 @@ const useCell = (intialOverrides: any) => { const updateFirestore = (cell: Cell) => { cellDispatch({ cell: null }); - cellState.updateCell(cell); + updateCell(cell); }; const actions = { set, update, updateFirestore }; diff --git a/src/hooks/useFiretable/useTable.ts b/src/hooks/useFiretable/useTable.ts index f05f6dc1..fe2d0aaa 100644 --- a/src/hooks/useFiretable/useTable.ts +++ b/src/hooks/useFiretable/useTable.ts @@ -137,26 +137,14 @@ const useTable = (intialOverrides: any) => { const setTable = (tableCollection: string) => { tableDispatch({ path: tableCollection }); }; - const updateCell = (cell: Cell) => { - console.log("updateCell:", cell); - // TODO: update row locally - // tableState.rows[cell.rowIndex][cell.fieldName] = cell.value; - // tableDispatch({ rows: tableState.rows }); - // update document - db.collection(tableState.path) - .doc(cell.docId) - .update({ - [cell.fieldName]: cell.value, - updatedAt: firebase.firestore.FieldValue.serverTimestamp() - }); - }; + const addRow = () => { db.collection(tableState.path).add({ createdAt: firebase.firestore.FieldValue.serverTimestamp(), updatedAt: firebase.firestore.FieldValue.serverTimestamp() }); }; - const tableActions = { deleteRow, setTable, updateCell, addRow }; + const tableActions = { deleteRow, setTable, addRow }; return [tableState, tableActions]; }; diff --git a/src/hooks/useFiretable/useTableConfig.ts b/src/hooks/useFiretable/useTableConfig.ts index a8be382f..c3ddc91c 100644 --- a/src/hooks/useFiretable/useTableConfig.ts +++ b/src/hooks/useFiretable/useTableConfig.ts @@ -24,7 +24,6 @@ const useTableConfig = (tablePath: string) => { action: DocActions.update, data: { columns: [...columns, { columnName, fieldName, type }] } }); - console.log(columnName, fieldName, type); }; const actions = { addColumn,