move cell focus on up and down keys

src/components/Table.tsx

@@ -22,10 +22,8 @@ import ColumnDrawer from "./ColumnDrawer";
 import TableCell from "../components/TableCell";
 
 import useCell, { Cell } from "../hooks/useFiretable/useCell";
-import useFiretable, {
-  FiretableActions,
-  FiretableState
-} from "../hooks/useFiretable";
+import useFiretable from "../hooks/useFiretable";
+
 const styles = (theme: Theme) =>
   createStyles({
     flexContainer: {
@@ -208,7 +206,6 @@ const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
 
 export default function Table(props: any) {
   const { collection } = props;
-
   const { tableState, tableActions } = useFiretable(collection);
   useEffect(() => {
     tableActions.table.set(collection);

src/hooks/useDoc.ts

@@ -3,13 +3,16 @@ import { useEffect, useReducer } from "react";
 
 export enum DocActions {
   update,
-  delete // TODO when needed
+  delete
 }
 const documentReducer = (prevState: any, newProps: any) => {
   switch (newProps.action) {
     case DocActions.update:
       prevState.ref.update({ ...newProps.data });
       return { ...prevState, doc: { ...prevState.doc, ...newProps.data } };
+    case DocActions.delete:
+      prevState.ref.delete();
+      return null;
     default:
       return { ...prevState, ...newProps };
   }

src/hooks/useFiretable/index.ts

@@ -1,7 +1,9 @@
+import { useEffect } from "react";
 import useTable from "./useTable";
 import useTableConfig from "./useTableConfig";
 import useCell, { Cell } from "./useCell";
 
+import useKeyCode from "./useKeyCode";
 export type FiretableActions = {
   cell: { set: Function; update: Function };
   column: { add: Function };
@@ -16,6 +18,9 @@ export type FiretableState = {
 };
 
 const useFiretable = (collectionName: string) => {
+  const moveDown = useKeyCode(40);
+  const moveUp = useKeyCode(38);
+  const tab = useKeyCode(9);
   const [tableConfig, configActions] = useTableConfig(collectionName);
   const [tableState, tableActions] = useTable({
     path: collectionName
@@ -23,12 +28,47 @@ const useFiretable = (collectionName: string) => {
   const [cellState, cellActions] = useCell({
     updateCell: tableActions.updateCell
   });
+
+  //TODO: move focus to cell above on down key
+  useEffect(() => {
+    if (cellState.cell) {
+    }
+  }, [tab]);
+  // move focus to cell above on down key
+  useEffect(() => {
+    if (cellState.cell) {
+      if (cellState.cell.rowIndex !== 0) {
+        const nextRowIndex = cellState.cell.rowIndex - 1;
+        cellActions.set({
+          fieldName: cellState.cell.fieldName,
+          rowIndex: nextRowIndex,
+          value: tableState.rows[nextRowIndex].value
+        });
+      }
+    }
+  }, [moveUp]);
+
+  // move focus to cell bellow on down up
+  useEffect(() => {
+    if (cellState.cell) {
+      if (cellState.cell.rowIndex === tableState.rows.length - 1) {
+        // reach last row creating new row
+        tableActions.addRow();
+      } else {
+        const nextRowIndex = cellState.cell.rowIndex + 1;
+        cellActions.set({
+          fieldName: cellState.cell.fieldName,
+          rowIndex: nextRowIndex,
+          value: tableState.rows[nextRowIndex].value
+        });
+      }
+    }
+  }, [moveDown]);
   const setTable = (collectionName: string) => {
     configActions.setTable(collectionName);
     tableActions.setTable(collectionName);
     cellActions.set(null);
   };
-  console.log("tableState", tableConfig);
   const state: FiretableState = {
     cell: cellState.cell,
     columns: tableConfig.columns,

src/hooks/useFiretable/useCell.ts

@@ -23,7 +23,7 @@ const useCell = (intialOverrides: any) => {
     ...intialOverrides
   });
   useEffect(() => {
-    const { prevCell, value, updateCell, updatedValue } = cellState;
+    const { prevCell, updateCell, updatedValue } = cellState;
     // check for change
     if (
       updatedValue !== null &&

src/hooks/useFiretable/useKeyCode.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+function useKeyCode(keyCode: number) {
+  const [isKeyPressed, setKeyPressed] = useState(false);
+  // Only allow fetching each keypress event once to prevent infinite loops
+  const clear = () => {
+    if (isKeyPressed) {
+      setKeyPressed(false);
+    }
+  };
+  clear();
+  useEffect(() => {
+    function downHandler(event: any) {
+      if (event.keyCode === keyCode) {
+        setKeyPressed(true);
+      }
+    }
+    window.addEventListener("keydown", downHandler);
+    return () => window.removeEventListener("keydown", downHandler);
+  }, [keyCode]);
+
+  return isKeyPressed;
+}
+export default useKeyCode;