clean up

src/App.tsx

@@ -7,8 +7,9 @@ import TableView from "./views/TableView";
 
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import { AuthProvider } from "./AuthProvider";
+import CustomBrowserRouter from "./util/CustomBrowserRouter";
 
-import PrivateRoute from "./components/PrivateRoute";
+import PrivateRoute from "./util/PrivateRoute";
 const theme = createMuiTheme({
   spacing: 4,
   palette: {
@@ -22,12 +23,12 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <AuthProvider>
-        <Router>
+        <CustomBrowserRouter>
           <div>
             <Route exact path="/auth" component={AuthView} />
             <PrivateRoute path="/table/" component={TableView} />
           </div>
-        </Router>
+        </CustomBrowserRouter>
       </AuthProvider>
     </ThemeProvider>
   );

src/components/Navigation.tsx

@@ -55,7 +55,6 @@ export const Navigation = (props: any) => {
   const router = useRouter();
   const classes = useStyles();
   const [settings, createTable] = useSettings();
-  console.log(props);
   return (
     <React.Fragment>
       <CssBaseline />

src/hooks/useAuth.ts

@@ -7,8 +7,8 @@ const useAuth = () => {
   );
 
   useEffect(() => {
-    auth.onAuthStateChanged(token => {
-      setAuthUser(token);
+    auth.onAuthStateChanged(user => {
+      setAuthUser(user);
     });
   }, []);
 

src/hooks/useSettings.ts

@@ -14,7 +14,6 @@ const useSettings = () => {
 
   const createTable = (name: string, collection: string) => {
     const { tables } = settingsState;
-    console.log(tables);
     documentDispatch({
       action: DocActions.update,
       data: { tables: [...tables, { name, collection }] }

src/util/CustomBrowserRouter.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+
+export const RouterContext = React.createContext({});
+
+const CustomBrowserRouter = ({ children }: any) => (
+  <BrowserRouter>
+    <Route>
+      {routeProps => (
+        <RouterContext.Provider value={routeProps}>
+          {children}
+        </RouterContext.Provider>
+      )}
+    </Route>
+  </BrowserRouter>
+);
+
+export default CustomBrowserRouter;

src/util/PrivateRoute.tsx

@@ -4,7 +4,6 @@ import AuthContext from "../contexts/authContext";
 
 const PrivateRoute = ({ component: RouteComponent, ...rest }: any) => {
   const { currentUser } = useContext(AuthContext);
-  console.log(currentUser);
   return (
     <Route
       {...rest}

src/views/TableView.tsx

@@ -13,7 +13,6 @@ export default function AuthView() {
   const tableCollection = router.location.pathname.split("/")[2];
   const [tableConfig, tableActions] = useTableConfig(tableCollection);
   const [table, tableDispatch] = useTable({ path: tableCollection });
-  console.log("tableConfig", tableConfig);
   const classes = useStyles();
   useEffect(() => {
     tableActions.setTable(tableCollection);