editing cells

ROADMAP.md

@@ -5,7 +5,7 @@
 ### Initial fields:
 
 - checkbox(boolean)
-- simple text(string)
+- simple text(string) ✅
 - email(string)
 - phone(string)
 - url(string)
@@ -17,7 +17,7 @@
 - Create Tables (Primary collections) ✅
 - Create columns (fields) ✅
 - Create rows(documents)
-- Edit cells
+- Edit cells ✅
 - Authenicate ✅
 - Delete rows ✅
 
@@ -44,6 +44,7 @@
 - Edit tables
 - Hide tables
 - Fixed column
+- keyboard Navigation: ability to use tab and arrow keys to move focus between cells
 
 ## V1
 

src/components/Table.tsx

@@ -114,7 +114,6 @@ class MuiVirtualizedTable extends React.PureComponent<
           <DeleteIcon />
         </IconButton>
       );
-    console.log(focusedCell);
     return (
       <TableCell
         component="div"
@@ -126,7 +125,8 @@ class MuiVirtualizedTable extends React.PureComponent<
           cellActions.setCell({
             rowIndex,
             docId: rowData.id,
-            fieldName: columnData.fieldName
+            fieldName: columnData.fieldName,
+            value: cellData
           });
         }}
         style={{ height: rowHeight }}
@@ -139,7 +139,12 @@ class MuiVirtualizedTable extends React.PureComponent<
         {focusedCell &&
         focusedCell.fieldName === columnData.fieldName &&
         focusedCell.rowIndex === rowIndex ? (
-          <TextField value={cellData} />
+          <TextField
+            defaultValue={cellData}
+            onChange={e => {
+              cellActions.updateValue(e.target.value);
+            }}
+          />
         ) : (
           cellData
         )}
@@ -226,17 +231,17 @@ class MuiVirtualizedTable extends React.PureComponent<
 const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
 
 export default function Table(props: any) {
-  const { columns, rows, addColumn, deleteRow } = props;
-  const [cell, cellActions] = useCell({});
-  console.log("cell", cell);
+  const { columns, rows, addColumn, deleteRow, updateCell } = props;
+  const tableRows = [...rows];
+  const [cell, cellActions] = useCell({ updateCell });
   if (columns)
     return (
       <Paper style={{ height: 400, width: "100%" }}>
         <VirtualizedTable
           focusedCell={cell}
           cellActions={cellActions}
-          rowCount={rows.length}
-          rowGetter={({ index }) => rows[index]}
+          rowCount={tableRows.length}
+          rowGetter={({ index }) => tableRows[index]}
           columns={[
             ...columns.map(
               (column: {

src/hooks/useCell.ts

@@ -6,6 +6,7 @@ export type Cell = {
   fieldName: string;
   rowIndex: number;
   docId: string;
+  value: any;
 };
 
 const cellReducer = (prevState: any, newProps: any) => {
@@ -21,11 +22,23 @@ const useCell = (intialOverrides: any) => {
     ...cellIntialState,
     ...intialOverrides
   });
-
+  useEffect(() => {
+    const { prevCell, value, updateCell, updatedValue } = cellState;
+    // check for change
+    if (updatedValue && prevCell && prevCell.value !== updatedValue) {
+      updateCell({ ...prevCell, value: updatedValue });
+      cellDispatch({ updatedValue: null });
+    }
+  }, [cellState.cell]);
   const setCell = (cell: Cell) => {
     cellDispatch({ prevCell: cellState.cell, cell });
   };
-  const actions = { setCell };
+  const updateValue = (value: any) => {
+    cellDispatch({ updatedValue: value });
+  };
+
+  const actions = { setCell, updateValue };
+
   return [cellState.cell, actions];
 };
 

src/hooks/useTable.ts

@@ -1,6 +1,7 @@
 import { db } from "../firebase";
 import { useEffect, useReducer } from "react";
 import equals from "ramda/es/equals";
+import { Cell } from "./useCell";
 const CAP = 500;
 
 const tableReducer = (prevState: any, newProps: any) => {
@@ -131,8 +132,19 @@ 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 });
 
-  const tableActions = { deleteRow, setTable };
+    // update document
+    db.collection(tableState.path)
+      .doc(cell.docId)
+      .update({ [cell.fieldName]: cell.value });
+  };
+  const addRow = (cell: Cell) => {};
+  const tableActions = { deleteRow, setTable, updateCell, addRow };
   return [tableState, tableActions];
 };
 

src/views/TableView.tsx

@@ -28,6 +28,7 @@ export default function AuthView() {
         rows={table.rows}
         addColumn={configActions.addColumn}
         deleteRow={tableActions.deleteRow}
+        updateCell={tableActions.updateCell}
       />
     </Navigation>
   );