navigation appbar, setup to firetable settings

package.json

@@ -4,10 +4,12 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.4.0",
+    "@material-ui/icons": "^4.4.1",
+    "@material-ui/lab": "^4.0.0-alpha.26",
     "@types/jest": "24.0.18",
     "@types/node": "12.7.4",
     "@types/ramda": "^0.26.21",
-    "@types/react": "16.9.2",
+    "@types/react": "^16.9.2",
     "@types/react-dom": "16.9.0",
     "firebase": "^6.6.0",
     "ramda": "^0.26.1",

src/App.tsx

@@ -1,7 +1,22 @@
 import React from "react";
+import { ThemeProvider } from "@material-ui/styles";
+import { createMuiTheme } from "@material-ui/core";
+import Navigation from "./components/Navigation";
+const theme = createMuiTheme({
+  spacing: 4,
+  palette: {
+    primary: {
+      main: "#007bff"
+    }
+  }
+});
 
 const App: React.FC = () => {
-  return <div className="App"></div>;
+  return (
+    <ThemeProvider theme={theme}>
+      <Navigation />
+    </ThemeProvider>
+  );
 };
 
 export default App;

src/components/Navigation.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import Fab from "@material-ui/core/Fab";
+import MenuIcon from "@material-ui/icons/Menu";
+import AddIcon from "@material-ui/icons/Add";
+import Button from "@material-ui/core/Button";
+import Skeleton from "@material-ui/lab/Skeleton";
+import useSettings from "../hooks/useSettings";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    text: {
+      padding: theme.spacing(2, 2, 0)
+    },
+    paper: {
+      paddingBottom: 20,
+      paddingTop: 5
+    },
+
+    subheader: {
+      backgroundColor: theme.palette.background.paper
+    },
+    appBar: {
+      top: "auto",
+      bottom: 0
+    },
+    grow: {
+      flexGrow: 1
+    },
+    fabButton: {
+      position: "absolute",
+      zIndex: 1,
+      top: -30,
+      right: 20,
+      margin: "0 auto"
+    },
+    button: {
+      color: "#fff",
+      marginLeft: 8
+    },
+    skeleton: {
+      marginLeft: 8,
+      borderRadius: 5
+    }
+  })
+);
+
+export default function Navigation() {
+  const classes = useStyles();
+  const [settings] = useSettings();
+  console.log(settings);
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Paper square className={classes.paper}>
+        <Typography className={classes.text} variant="h5" gutterBottom>
+          Founders
+        </Typography>
+      </Paper>
+      <AppBar position="fixed" color="primary" className={classes.appBar}>
+        <Toolbar>
+          <IconButton edge="start" color="inherit" aria-label="open drawer">
+            <MenuIcon />
+          </IconButton>
+          {settings.loading || !settings.doc ? (
+            <>
+              <Skeleton
+                variant="rect"
+                width={120}
+                height={40}
+                className={classes.skeleton}
+              />
+              <Skeleton
+                variant="rect"
+                width={120}
+                height={40}
+                className={classes.skeleton}
+              />
+            </>
+          ) : (
+            <>
+              {settings.tables.map(
+                (table: { name: string; collection: string }) => (
+                  <Button className={classes.button}>{table.name}</Button>
+                )
+              )}
+            </>
+          )}
+
+          <Fab color="secondary" aria-label="add" className={classes.fabButton}>
+            <AddIcon />
+          </Fab>
+          <div className={classes.grow} />
+        </Toolbar>
+      </AppBar>
+    </React.Fragment>
+  );
+}

src/hooks/useSettings.ts

@@ -0,0 +1,49 @@
+import { db } from "../firebase";
+import { useEffect, useReducer } from "react";
+
+const documentReducer = (prevState: any, newProps: any) => {
+  return { ...prevState, ...newProps };
+};
+const documentIntialState = {
+  doc: null,
+  loading: false
+};
+
+const useSettings = () => {
+  const [settingsState, settingsDispatch] = useReducer(documentReducer, {
+    ...documentIntialState
+  });
+  const setSettingsListner = () => {
+    settingsDispatch({ loading: true });
+    const unsubscribe = db.doc("_FIRETABLE_/settings").onSnapshot(snapshot => {
+      if (snapshot.exists) {
+        const data = snapshot.data();
+        const doc = { tables: [], ...data };
+        const tables = doc.tables;
+        settingsDispatch({
+          doc,
+          tables,
+          loading: false
+        });
+      }
+    });
+    settingsDispatch({ unsubscribe });
+  };
+
+  useEffect(() => {
+    const { doc, loading } = settingsState;
+    if (!doc && !loading) {
+      //initialise listener
+      setSettingsListner();
+    }
+  }, [settingsState]);
+  useEffect(
+    () => () => {
+      if (settingsState.unsubscribe) settingsState.unsubscribe();
+    },
+    []
+  );
+  return [settingsState, settingsDispatch];
+};
+
+export default useSettings;

yarn.lock

@@ -1289,6 +1289,24 @@
     react-transition-group "^4.0.0"
     warning "^4.0.1"
 
+"@material-ui/icons@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.4.1.tgz#a09d53275a5d73a77ee621f91c005a1793432df7"
+  integrity sha512-ilo6rSgsI3B5L7s1H3tBS1x77sJqPql3QJDYzVi2TVluZLCTfRKjpbYYDUwolEAQC0MzXLjVbXHqJ97VeJqpmQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
+"@material-ui/lab@^4.0.0-alpha.26":
+  version "4.0.0-alpha.26"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.26.tgz#8db16de1ab46cda5d06afdd97578536989ed3c4e"
+  integrity sha512-23N43d2/DJkQKbJjg3J9DqORgmvxA9ebqpnqrA6JB8zIiDSoSuZmJu1hHUtINgMechxwWGTf73PMy9ihm0AAQA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.4.0"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    warning "^4.0.3"
+
 "@material-ui/styles@^4.4.1":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.4.1.tgz#a53fb39e373636bd2c296a78c54afecb80f68446"
@@ -1637,7 +1655,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.9.2":
+"@types/react@*", "@types/react@^16.9.2":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
   integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==
@@ -2909,7 +2927,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.0.2:
+clsx@^1.0.2, clsx@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
   integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
@@ -10416,7 +10434,7 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.1:
+warning@^4.0.1, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==