Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

update firestore directly from useCell using docRef

Browse Source
This commit is contained in:
shams mosowi
2019-09-17 09:26:44 +10:00
parent 6312d11604
commit 0232456fee
11 changed files with 23 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Fields/CheckBox.tsx
View File

@@ -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
});
}}

2
src/components/Fields/Date.tsx
View File

@@ -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);

2
src/components/Fields/DateTime.tsx
View File

@@ -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);

2
src/components/Fields/Image.tsx
View File

@@ -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();

2
src/components/Fields/Rating.tsx
View File

@@ -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);

3
src/components/Table.tsx
View File

@@ -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]);

41
src/components/TableCell.tsx
View File

@@ -34,44 +34,6 @@ const TableCell = (props: any) => {
focusedCell &&
focusedCell.fieldName === columnData.fieldName &&
focusedCell.rowIndex === rowIndex;
/*
const inputRenderer = () => {
switch (fieldType) {
case FieldType.date:
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
autoFocus
margin="normal"
id="date-picker-dialog"
label="Date picker dialog"
format="MM/dd/yyyy"
value={new Date("2014-08-18T21:11:54")}
onChange={date => {
console.log(date);
//cellActions.update(e.target.value);
}}
KeyboardButtonProps={{
"aria-label": "change date"
}}
/>
</MuiPickersUtilsProvider>
);
case FieldType.rating:
return (
<Rating
name="pristine"
value={cellData}
precision={0.5}
onChange={(event, newValue) => {
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
});

8
src/hooks/useFiretable/index.ts
View File

@@ -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

9
src/hooks/useFiretable/useCell.ts
View File

@@ -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 };

16
src/hooks/useFiretable/useTable.ts
View File

@@ -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];
};

1
src/hooks/useFiretable/useTableConfig.ts
View File

@@ -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,