on rerouting clear tableConfig and set header

src/components/Navigation.tsx

@@ -12,6 +12,7 @@ import Skeleton from "@material-ui/lab/Skeleton";
 import useSettings from "../hooks/useSettings";
 
 import CreateTableDialog from "./CreateTableDialog";
+import useRouter from "../hooks/useRouter";
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     text: {
@@ -50,19 +51,20 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-export const Navigation = ({ children }: any) => {
+export const Navigation = (props: any) => {
+  const router = useRouter();
   const classes = useStyles();
   const [settings, createTable] = useSettings();
-
+  console.log(props);
   return (
     <React.Fragment>
       <CssBaseline />
       <Paper square className={classes.paper}>
         <Typography className={classes.text} variant="h5" gutterBottom>
-          Founders
+          {props.header}
         </Typography>
       </Paper>
-      {children}
+      {props.children}
       <AppBar position="fixed" color="primary" className={classes.appBar}>
         <Toolbar>
           <IconButton edge="start" color="inherit" aria-label="open drawer">
@@ -99,7 +101,13 @@ export const Navigation = ({ children }: any) => {
             <>
               {settings.tables.map(
                 (table: { name: string; collection: string }) => (
-                  <Button key={table.collection} className={classes.button}>
+                  <Button
+                    key={table.collection}
+                    onClick={() => {
+                      router.history.push(table.collection);
+                    }}
+                    className={classes.button}
+                  >
                     {table.name}
                   </Button>
                 )

src/hooks/useTableConfig.ts

@@ -10,7 +10,13 @@ const useTableConfig = (tablePath: string) => {
       documentDispatch({ columns: doc.columns });
     }
   }, [tableConfigState]);
-  return tableConfigState;
+  const setTable = (table: string) => {
+    documentDispatch({ path: `${table}/_FIRETABLE_`, columns: [], doc: null });
+  };
+  const actions = {
+    setTable
+  };
+  return [tableConfigState, actions];
 };
 
 export default useTableConfig;

src/views/TableView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 
 import { Navigation } from "../components/Navigation";
@@ -11,12 +11,16 @@ const useStyles = makeStyles({});
 export default function AuthView() {
   const router = useRouter();
   const tableCollection = router.location.pathname.split("/")[2];
-  console.log(tableCollection);
+  const [tableConfig, tableActions] = useTableConfig(tableCollection);
+  const [table, tableDispatch] = useTable({ path: tableCollection });
+  console.log("tableConfig", tableConfig);
   const classes = useStyles();
-  const tableConfig = useTableConfig(tableCollection);
-  const [table] = useTable({ path: tableCollection });
+  useEffect(() => {
+    tableActions.setTable(tableCollection);
+  }, [tableCollection]);
+
   return (
-    <Navigation>
+    <Navigation header={tableCollection}>
       <Table columns={tableConfig.columns} rows={table.rows} />
     </Navigation>
   );