table grid display, SQL for browse table is generated on FE

packages/web/src/datagrid/DataGrid.js

@@ -63,10 +63,26 @@ const TableBodyCell = styled.td`
   overflow: hidden;
 `;
 
-export default function DataGrid({ params }) {
+/**
+ * @param {object} props
+ * @param {number} props.conid
+ * @param {string} props.database
+ * @param {import('@dbgate/datalib').GridDisplay} props.display
+ */
+export default function DataGrid(props) {
+  const { conid, database, display } = props;
+  const sql = display.getPageQuery(0, 100);
+
+  console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
+
   const data = useFetch({
-    url: 'tables/table-data',
-    params,
+    url: 'database-connections/query-data',
+    method: 'post',
+    params: {
+      conid,
+      database,
+    },
+    data: { sql },
   });
   const { rows, columns } = data || {};
   const [firstVisibleRowScrollIndex, setFirstVisibleRowScrollIndex] = React.useState(0);
@@ -116,21 +132,21 @@ export default function DataGrid({ params }) {
     columnSizes.setExtraordinaryIndexes([], []);
 
     for (let colIndex = 0; colIndex < columns.length; colIndex++) {
-        //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
-        let column = columns[colIndex];
+      //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
+      let column = columns[colIndex];
 
-        // if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
-        // else context.font = "14px Helvetica";
-        context.font = "bold 14px Helvetica";
+      // if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
+      // else context.font = "14px Helvetica";
+      context.font = 'bold 14px Helvetica';
 
-        let text = column.name;
-        let headerWidth = context.measureText(text).width + 32;
+      let text = column.name;
+      let headerWidth = context.measureText(text).width + 32;
 
-        // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
-        // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
-        // if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
+      // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
+      // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
+      // if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
 
-        columnSizes.putSizeOverride(colIndex, headerWidth);
+      columnSizes.putSizeOverride(colIndex, headerWidth);
     }
 
     // let headerWidth = this.rowHeaderWidthDefault;

packages/web/src/tabs/TableDataTab.js

@@ -3,7 +3,22 @@ import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
 import DataGrid from '../datagrid/DataGrid';
+import { TableGridDisplay } from '@dbgate/datalib';
+import useTableInfo from '../utility/useTableInfo';
+import useConnectionInfo from '../utility/useConnectionInfo';
+import engines from '@dbgate/engines';
 
 export default function TableDataTab({ conid, database, schemaName, pureName }) {
-  return <DataGrid params={{ conid, database, schemaName, pureName }} />;
+  const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
+  const connection = useConnectionInfo(conid);
+  if (!tableInfo || !connection) return null;
+  const display = new TableGridDisplay(tableInfo, engines(connection));
+  return (
+    <DataGrid
+      // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
+      conid={conid}
+      database={database}
+      display={display}
+    />
+  );
 }

packages/web/src/utility/useFetch.js

@@ -1,16 +1,18 @@
 import React from 'react';
+import _ from 'lodash';
 import axios from './axios';
 import useSocket from './SocketProvider';
 import stableStringify from 'json-stable-stringify';
 
 export default function useFetch({
   url,
+  data = undefined,
   params = undefined,
   defaultValue = undefined,
   reloadTrigger = undefined,
   ...config
 }) {
-  const [value, setValue] = React.useState(defaultValue);
+  const [value, setValue] = React.useState([defaultValue, []]);
   const [loadCounter, setLoadCounter] = React.useState(0);
   const socket = useSocket();
 
@@ -18,24 +20,30 @@ export default function useFetch({
     setLoadCounter(loadCounter + 1);
   };
 
-  async function loadValue() {
+  const indicators = [url, stableStringify(data), stableStringify(params), loadCounter];
+
+  async function loadValue(loadedIndicators) {
     const resp = await axios.request({
       method: 'get',
       params,
       url,
+      data,
       ...config,
     });
-    setValue(resp.data);
+    setValue([resp.data, loadedIndicators]);
   }
   React.useEffect(() => {
-    loadValue();
+    loadValue(indicators);
     if (reloadTrigger && socket) {
       socket.on(reloadTrigger, handleReload);
       return () => {
         socket.off(reloadTrigger, handleReload);
       };
     }
-  }, [url, stableStringify(params), socket, loadCounter]);
+  }, [...indicators, socket]);
 
-  return value;
+  const [returnValue, loadedIndicators] = value;
+  if (_.isEqual(indicators, loadedIndicators)) return returnValue;
+
+  return defaultValue;
 }