fix add row button

src/components/Table/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import ReactDataGrid from "react-data-grid";
-import useFiretable from "../../hooks/useFiretable";
+import useFiretable, { FireTableFilter } from "../../hooks/useFiretable";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 
 import Button from "@material-ui/core/Button";
@@ -70,8 +70,14 @@ const useStyles = makeStyles(Theme => {
   });
 });
 
-function Table(props: any) {
-  const { collection } = props;
+interface Props {
+  collection: string;
+  filters: FireTableFilter[];
+}
+
+function Table(props: Props) {
+  const { collection, filters } = props;
+  console.log(filters);
   const { tableState, tableActions } = useFiretable(collection);
   const [search, setSearch] = useState({
     config: undefined,
@@ -82,8 +88,9 @@ function Table(props: any) {
   const size = useWindowSize();
 
   useEffect(() => {
-    tableActions.set(collection);
-  }, [collection]);
+    tableActions.set(collection, filters);
+  }, [collection, filters]);
+
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
@@ -238,7 +245,13 @@ function Table(props: any) {
                 }}
               >
                 <h3>no data to show</h3>
-                <Button onClick={tableActions.row.add}>Add Row</Button>
+                <Button
+                  onClick={() => {
+                    tableActions.row.add();
+                  }}
+                >
+                  Add Row
+                </Button>
               </div>
             );
           }}

src/contexts/snackbarContext.ts

@@ -0,0 +1,9 @@
+import React from "react";
+// Default State of our SnackBar
+const DEFAULT_STATE = {
+  show: false, // boolean to control show/hide
+  displayText: "", // text to be displayed in SnackBar
+  timeOut: 2000, // time SnackBar should be visible
+};
+// Create our Context
+const SnackBarContext = React.createContext(DEFAULT_STATE);

src/hooks/useFiretable/index.ts

@@ -11,12 +11,18 @@ export type FiretableActions = {
   };
   row: { add: any; delete: Function };
   set: Function;
+  filter: Function;
 };
 
 export type FiretableState = {
   columns: any;
   rows: any;
 };
+export type FireTableFilter = {
+  key: string;
+  operator: "==" | "<" | ">" | ">=" | "<=" | string;
+  value: any;
+};
 
 const useFiretable = (collectionName: string) => {
   const [tableConfig, configActions] = useTableConfig(collectionName);
@@ -24,10 +30,12 @@ const useFiretable = (collectionName: string) => {
     path: collectionName,
   });
 
-  const setTable = (collectionName: string) => {
+  const setTable = (collectionName: string, filters: FireTableFilter[]) => {
     configActions.setTable(collectionName);
-    tableActions.setTable(collectionName);
+    tableActions.setTable(collectionName, filters);
   };
+  const filterTable = (filters: FireTableFilter[]) => {};
+
   const state: FiretableState = {
     columns: tableConfig.columns,
     rows: tableState.rows,
@@ -45,6 +53,7 @@ const useFiretable = (collectionName: string) => {
       delete: tableActions.deleteRow,
     },
     set: setTable,
+    filter: filterTable,
   };
 
   return { tableState: state, tableActions: actions };

src/hooks/useFiretable/useTable.ts

@@ -4,6 +4,8 @@ import { useEffect, useReducer } from "react";
 import equals from "ramda/es/equals";
 import firebase from "firebase/app";
 import { algoliaUpdateDoc } from "../../firebase/callables";
+import { FireTableFilter } from ".";
+import filter from "ramda/es/filter";
 
 const CAP = 500;
 
@@ -42,7 +44,7 @@ const useTable = (initialOverrides: any) => {
   });
   const getRows = (
     filters: {
-      field: string;
+      key: string;
       operator: "==" | "<" | ">" | ">=" | "<=";
       value: string;
     }[],
@@ -67,7 +69,7 @@ const useTable = (initialOverrides: any) => {
       | firebase.firestore.Query = db.collection(tableState.path);
 
     filters.forEach(filter => {
-      query = query.where(filter.field, filter.operator, filter.value);
+      query = query.where(filter.key, filter.operator, filter.value);
     });
     if (sort) {
       if (Array.isArray(sort)) {
@@ -78,28 +80,39 @@ const useTable = (initialOverrides: any) => {
         query = query.orderBy(sort.field, sort.direction);
       }
     }
-    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;
-            const ref = doc.ref;
+    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;
+              const ref = doc.ref;
 
-            return { ...data, id, ref };
-          })
-          .filter(doc => doc.id !== "_FIRETABLE_"); //removes schema file
-        tableDispatch({
-          rows,
-          loading: false,
-        });
-      } else {
-        tableDispatch({
-          rows: [],
-          loading: false,
-        });
+              return { ...data, id, ref };
+            })
+            .filter(doc => doc.id !== "_FIRETABLE_"); //removes schema file
+          tableDispatch({
+            rows,
+            loading: false,
+          });
+        } else {
+          tableDispatch({
+            rows: [],
+            loading: false,
+          });
+        }
+      },
+      (error: Error) => {
+        console.log(error.message);
+        if (error.message.includes("indexes?create_composite=")) console.log();
+        const url =
+          "https://console.firebase.google.com/project/firetable-antler/database/firestore/" +
+          "indexes?create_composite=" +
+          error.message.split("indexes?create_composite=")[1];
+        console.log(url);
       }
-    });
+    );
     tableDispatch({ unsubscribe });
   };
   useEffect(() => {
@@ -135,8 +148,9 @@ const useTable = (initialOverrides: any) => {
       .doc(documentId)
       .delete();
   };
-  const setTable = (tableCollection: string) => {
+  const setTable = (tableCollection: string, filters?: FireTableFilter) => {
     tableDispatch({ path: tableCollection });
+    if (filters) tableDispatch({ filters });
   };
 
   const addRow = async (data?: any) => {

src/views/TableView.tsx

@@ -11,7 +11,10 @@ export default function TableView() {
 
   return (
     <Navigation>
-      <Table collection={tableCollection} />
+      <Table
+        collection={tableCollection}
+        filters={[{ key: "rating", operator: "==", value: 5 }]}
+      />
     </Navigation>
   );
 }