change table on path change

src/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ReactDataGrid from "react-data-grid";
 import useFiretable from "../../hooks/useFiretable";
 import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
@@ -36,7 +36,9 @@ const useStyles = makeStyles(Theme =>
 function Table(props: any) {
   const { collection } = props;
   const { tableState, tableActions } = useFiretable(collection);
-
+  useEffect(() => {
+    tableActions.set(collection);
+  }, [collection]);
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 

src/hooks/useFiretable/index.ts

@@ -12,7 +12,7 @@ export type FiretableActions = {
     update: Function;
   };
   row: { add: any; delete: Function };
-  table: { set: Function };
+  set: Function;
 };
 
 export type FiretableState = {
@@ -48,7 +48,7 @@ const useFiretable = (collectionName: string) => {
       remove: configActions.remove,
     },
     row: { add: tableActions.addRow, delete: tableActions.deleteRow },
-    table: { set: setTable },
+    set: setTable,
   };
 
   return { tableState: state, tableActions: actions };