table db connection setup

2025-12-28 16:06:41 +01:00 · 2019-09-09 15:17:31 +10:00
parent 2ed3d08ef2
commit fe31e7f5b1
6 changed files with 281 additions and 14 deletions
--- a/package.json
+++ b/package.json
@@ -7,15 +7,21 @@
    "@material-ui/icons": "^4.4.1",
    "@material-ui/lab": "^4.0.0-alpha.26",
    "@types/jest": "24.0.18",
+    "@types/lodash": "^4.14.138",
    "@types/node": "12.7.4",
    "@types/ramda": "^0.26.21",
    "@types/react": "^16.9.2",
    "@types/react-dom": "16.9.0",
+    "@types/react-sortable-hoc": "^0.6.5",
+    "@types/react-virtualized": "^9.21.4",
+    "array-move": "^2.1.0",
    "firebase": "^6.6.0",
+    "lodash": "^4.17.15",
    "ramda": "^0.26.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
+    "react-virtualized": "^9.21.1",
    "typescript": "3.6.2"
  },
  "scripts": {
--- a/src/.env
+++ b/src/.env
@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_ENV='PRODUCTION'
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -12,6 +12,10 @@ 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";
+import useTable from "../hooks/useTable";
+import Table from "./Table";
+
+import useTableConfig from "../hooks/useTableConfig";

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -53,8 +57,9 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function Navigation() {
  const classes = useStyles();
-  const [settings] = useSettings();
-  console.log(settings);
+  const settings = useSettings();
+  const tableConfig = useTableConfig("founders");
+  const [table] = useTable({ path: "founders" });
  return (
    <React.Fragment>
      <CssBaseline />
@@ -63,12 +68,13 @@ export default function Navigation() {
          Founders
        </Typography>
      </Paper>
+      <Table columns={tableConfig.columns} rows={table.rows} />
      <AppBar position="fixed" color="primary" className={classes.appBar}>
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="open drawer">
            <MenuIcon />
          </IconButton>
-          {settings.loading || !settings.doc ? (
+          {!settings.tables ? (
            <>
              <Skeleton
                variant="rect"
@@ -87,7 +93,9 @@ export default function Navigation() {
            <>
              {settings.tables.map(
                (table: { name: string; collection: string }) => (
-                  <Button className={classes.button}>{table.name}</Button>
+                  <Button key={table.collection} className={classes.button}>
+                    {table.name}
+                  </Button>
                )
              )}
            </>
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -0,0 +1,195 @@
+import React from "react";
+import clsx from "clsx";
+import {
+  createStyles,
+  Theme,
+  withStyles,
+  WithStyles
+} from "@material-ui/core/styles";
+import TableCell from "@material-ui/core/TableCell";
+import Paper from "@material-ui/core/Paper";
+import {
+  AutoSizer,
+  Column,
+  Table,
+  TableCellRenderer,
+  TableHeaderProps
+} from "react-virtualized";
+import Button from "@material-ui/core/Button";
+import EditIcon from "@material-ui/icons/Edit";
+
+//  import Skeleton from "@material-ui/lab/Skeleton";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    flexContainer: {
+      display: "flex",
+      alignItems: "center",
+      boxSizing: "border-box"
+    },
+    tableRow: {
+      cursor: "pointer"
+    },
+    tableRowHover: {
+      "&:hover": {
+        backgroundColor: theme.palette.grey[200]
+      }
+    },
+    tableCell: {
+      flex: 1
+    },
+    noClick: {
+      cursor: "initial"
+    }
+  });
+
+interface ColumnData {
+  dataKey: string;
+  label: string;
+  numeric?: boolean;
+  width: number;
+}
+
+interface Row {
+  index: number;
+}
+
+interface MuiVirtualizedTableProps extends WithStyles<typeof styles> {
+  columns: ColumnData[];
+  headerHeight?: number;
+  onRowClick?: () => void;
+  rowCount: number;
+  rowGetter: (row: Row) => any;
+  rowHeight?: number;
+}
+
+class MuiVirtualizedTable extends React.PureComponent<
+  MuiVirtualizedTableProps
+> {
+  static defaultProps = {
+    headerHeight: 48,
+    rowHeight: 48
+  };
+
+  getRowClassName = ({ index }: Row) => {
+    const { classes, onRowClick } = this.props;
+
+    return clsx(classes.tableRow, classes.flexContainer, {
+      [classes.tableRowHover]: index !== -1 && onRowClick != null
+    });
+  };
+
+  cellRenderer: TableCellRenderer = ({ cellData, columnIndex }) => {
+    const { columns, classes, rowHeight, onRowClick } = this.props;
+    return (
+      <TableCell
+        component="div"
+        className={clsx(classes.tableCell, classes.flexContainer, {
+          [classes.noClick]: onRowClick == null
+        })}
+        variant="body"
+        style={{ height: rowHeight }}
+        align={
+          (columnIndex != null && columns[columnIndex].numeric) || false
+            ? "right"
+            : "left"
+        }
+      >
+        {cellData}
+      </TableCell>
+    );
+  };
+
+  headerRenderer = ({
+    label,
+    columnIndex
+  }: TableHeaderProps & { columnIndex: number }) => {
+    const { headerHeight, columns, classes } = this.props;
+
+    return (
+      <TableCell
+        component="div"
+        className={clsx(
+          classes.tableCell,
+          classes.flexContainer,
+          classes.noClick
+        )}
+        variant="head"
+        style={{ height: headerHeight }}
+        align={columns[columnIndex].numeric || false ? "right" : "left"}
+      >
+        <Button size="small">
+          {label} <EditIcon fontSize="small" />
+        </Button>
+      </TableCell>
+    );
+  };
+
+  render() {
+    const {
+      classes,
+      columns,
+      rowHeight,
+      headerHeight,
+      ...tableProps
+    } = this.props;
+    return (
+      <AutoSizer>
+        {({ height, width }) => (
+          <Table
+            height={height}
+            width={width}
+            rowHeight={rowHeight!}
+            headerHeight={headerHeight!}
+            {...tableProps}
+            rowClassName={this.getRowClassName}
+          >
+            {[
+              ...columns.map(({ dataKey, ...other }, index) => {
+                return (
+                  <Column
+                    key={dataKey}
+                    headerRenderer={headerProps =>
+                      this.headerRenderer({
+                        ...headerProps,
+                        columnIndex: index
+                      })
+                    }
+                    className={classes.flexContainer}
+                    cellRenderer={this.cellRenderer}
+                    dataKey={dataKey}
+                    {...other}
+                  />
+                );
+              })
+            ]}
+          </Table>
+        )}
+      </AutoSizer>
+    );
+  }
+}
+
+const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
+
+export default function fTable(props: any) {
+  const { columns, rows } = props;
+  console.log(columns, rows);
+  if (columns)
+    return (
+      <Paper style={{ height: 400, width: "100%" }}>
+        <VirtualizedTable
+          rowCount={rows.length}
+          rowGetter={({ index }) => rows[index]}
+          columns={columns.map(
+            (column: { fieldName: string; name: string; type: string }) => ({
+              width: 200,
+              label: column.name,
+              dataKey: column.fieldName
+            })
+          )}
+        />
+      </Paper>
+    );
+  else return <>insert loading Skeleton here</>;
+}
--- a/src/hooks/useTable.ts
+++ b/src/hooks/useTable.ts
@@ -75,11 +75,13 @@ const useTable = (intialOverrides: any) => {
    }
    const unsubscribe = query.limit(limit).onSnapshot(snapshot => {
      if (snapshot.docs.length > 0) {
-        const rows = snapshot.docs.map(doc => {
-          const data = doc.data();
-          const id = doc.id;
-          return { ...data, id };
-        });
+        const rows = snapshot.docs
+          .map(doc => {
+            const data = doc.data();
+            const id = doc.id;
+            return { ...data, id };
+          })
+          .filter(doc => doc.id !== "_FIRETABLE_");
        tableDispatch({
          rows,
          loading: false
--- a/yarn.lock
+++ b/yarn.lock
@@ -851,7 +851,7 @@
  dependencies:
    regenerator-runtime "^0.13.2"

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
  version "7.6.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
@@ -1609,6 +1609,11 @@
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
  integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==

+"@types/lodash@^4.14.138":
+  version "4.14.138"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.138.tgz#34f52640d7358230308344e579c15b378d91989e"
+  integrity sha512-A4uJgHz4hakwNBdHNPdxOTkYmXNgmUAKLbXZ7PKGslgeV0Mb8P3BlbYfPovExek1qnod4pDfRbxuzcVs3dlFLg==
+
 "@types/long@*", "@types/long@^4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.0.tgz#719551d2352d301ac8b81db732acb6bdc28dbdef"
@@ -1648,6 +1653,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-sortable-hoc@^0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@types/react-sortable-hoc/-/react-sortable-hoc-0.6.5.tgz#3f40611427b4dd1ed06f99678a5df7c0f950de29"
+  integrity sha512-0Ms36xuds/pByIQFobwlDGPaUPSF6jOZUhOqf/0SaX/ZC0z9a/vwwWigEJomTvlshyjlKwB6JXV9TK+8keXq7w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.2.tgz#8c851c4598a23a3a34173069fb4c5c9e41c02e3f"
@@ -1655,6 +1667,14 @@
  dependencies:
    "@types/react" "*"

+"@types/react-virtualized@^9.21.4":
+  version "9.21.4"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.4.tgz#8f76a8a3e6d868cd6553e1671e047ec9a919788d"
+  integrity sha512-bvyAp67FNvFIz1GPaonAx6c6Ll8Cr9mVRgUTn5HHSKw5zmqTaxB7qnIl3is+fp7xwXDNBSw191pxpy3ACtTbyw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.2":
  version "16.9.2"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
@@ -2102,6 +2122,11 @@ array-map@~0.0.0:
  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
  integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=

+array-move@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-move/-/array-move-2.1.0.tgz#b4e9fc8d6a580bc97dcad408e0539c61b4b7ed7e"
+  integrity sha512-BXEIud+F7/ech2HcSfo+6bpgSCRlNnVTqQhGKdMov9iJkHq+vu9IP9qRXDpZvQpc1WWpDLiEfjs6Lfvvac+fDA==
+
 array-reduce@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
@@ -2927,7 +2952,7 @@ clone-deep@^4.0.1:
    kind-of "^6.0.2"
    shallow-clone "^3.0.0"

-clsx@^1.0.2, clsx@^1.0.4:
+clsx@^1.0.1, 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==
@@ -3764,6 +3789,13 @@ dom-converter@^0.2:
  dependencies:
    utila "~0.4"

+"dom-helpers@^2.4.0 || ^3.0.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.0.tgz#57a726de04abcc2a8bbfe664b3e21c584bde514e"
@@ -6500,6 +6532,11 @@ levn@^0.3.0, levn@~0.3.0:
    prelude-ls "~1.1.2"
    type-check "~0.3.2"

+linear-layout-vector@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70"
+  integrity sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA=
+
 load-json-file@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -6628,7 +6665,7 @@ long@~3:
  resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
  integrity sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s=

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8505,7 +8542,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.3"

-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8758,6 +8795,11 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
  integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==

+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-scripts@3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.1.1.tgz#1796bc92447f3a2d3072c3b71ca99f88d099c48d"
@@ -8829,6 +8871,19 @@ react-transition-group@^4.0.0:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

+react-virtualized@^9.21.1:
+  version "9.21.1"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.1.tgz#4dbbf8f0a1420e2de3abf28fbb77120815277b3a"
+  integrity sha512-E53vFjRRMCyUTEKuDLuGH1ld/9TFzjf/fFW816PE4HFXWZorESbSTYtiZz1oAjra0MminaUU1EnvUxoGuEFFPA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    clsx "^1.0.1"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    linear-layout-vector "0.0.1"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.9.0:
  version "16.9.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"