Merge branch 'develop' into field-color

src/components/Table/index.tsx

@@ -23,6 +23,7 @@ import useWindowSize from "../../hooks/useWindowSize";
 import { DraggableHeader } from "react-data-grid-addons";
 import Confirmation from "components/Confirmation";
 import DeleteIcon from "@material-ui/icons/Delete";
+
 const Hotkeys = lazy(() => import("./HotKeys"));
 const ReactDataGrid = lazy(() => import("react-data-grid"));
 const TableHeader = lazy(() => import("./TableHeader"));
@@ -243,7 +244,13 @@ function Table(props: Props) {
       return renderBaseRow(rest);
     }
   };
-
+  const handleRowGetter = (i: number) => {
+    // intercepting row getter to detect when table is reaching the bottom and fetch more rows
+    if (tableState.rowsLimit - i === 1) {
+      tableActions.row.more();
+    }
+    return rows[i];
+  };
   return (
     <>
       <Suspense fallback={<div>Loading header...</div>}>
@@ -265,7 +272,7 @@ function Table(props: Props) {
               rowHeight={rowHeight}
               columns={columns}
               enableCellSelect={true}
-              rowGetter={i => rows[i]}
+              rowGetter={handleRowGetter}
               rowsCount={rows.length}
               onGridRowsUpdated={onGridRowsUpdated}
               minHeight={tableHeight}

src/firebase/callables.ts

@@ -25,6 +25,7 @@ export const cloudFunction = (
     });
 };
 
+// TODO: data formating dates,
 export const algoliaUpdateDoc = (data: {
   collection: string;
   id: string;

src/hooks/useFiretable/index.ts

@@ -10,7 +10,7 @@ export type FiretableActions = {
     update: Function;
     reorder: Function;
   };
-  row: { add: any; delete: Function };
+  row: { add: Function; delete: Function; more: Function };
   table: {
     set: Function;
     filter: Function;
@@ -20,15 +20,17 @@ export type FiretableActions = {
 
 export type FiretableState = {
   config: { rowHeight: number };
-  columns: any;
-  rows: any;
+  columns: any[];
+  rows: any[];
+  rowsLimit: number;
+
   loadingRows: boolean;
   loadingColumns: boolean;
 };
 export type FireTableFilter = {
   key: string;
   operator: "==" | "<" | ">" | ">=" | "<=" | string;
-  value: any;
+  value: string | number | boolean;
 };
 
 const useFiretable = (collectionName: string) => {
@@ -47,6 +49,7 @@ const useFiretable = (collectionName: string) => {
     columns: tableConfig.columns,
     config: { rowHeight: tableConfig.rowHeight },
     rows: tableState.rows,
+    rowsLimit: tableState.limit,
     loadingRows: tableState.loading,
     loadingColumns: tableConfig.loading,
   };
@@ -62,6 +65,7 @@ const useFiretable = (collectionName: string) => {
     row: {
       add: tableActions.addRow,
       delete: tableActions.deleteRow,
+      more: tableActions.moreRows,
     },
     table: {
       updateConfig: configActions.updateConfig,

src/hooks/useFiretable/useTable.ts

@@ -31,7 +31,7 @@ const tableInitialState = {
   path: null,
   filters: [],
   prevLimit: 0,
-  limit: 100,
+  limit: 20,
   loading: true,
   sort: { field: "createdAt", direction: "asc" },
   cap: CAP,
@@ -169,8 +169,12 @@ const useTable = (initialOverrides: any) => {
       });
     }
   };
-
-  const tableActions = { deleteRow, setTable, addRow };
+  const moreRows = (additionalRows?: number) => {
+    tableDispatch({
+      limit: tableState.limit + (additionalRows ? additionalRows : 20),
+    });
+  };
+  const tableActions = { deleteRow, setTable, addRow, moreRows };
   return [tableState, tableActions];
 };