show table data

web/src/appobj/tableAppObject.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import uuidv1 from 'uuid/v1';
 import { TableIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
 import showModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
 
 function Menu({ data, makeAppObj }) {
   const handleEdit = () => {
@@ -21,25 +21,22 @@ function Menu({ data, makeAppObj }) {
   );
 }
 
-export default function tableAppObject({ pureName, schemaName }, { setOpenedTabs }) {
+export default function tableAppObject({ conid, database, pureName, schemaName }, { setOpenedTabs }) {
   const title = schemaName ? `${schemaName}.${pureName}` : pureName;
   const key = title;
   const Icon = TableIcon;
   const onClick = ({ schemaName, pureName }) => {
-    const tabid = uuidv1();
-    setOpenedTabs(files => [
-      ...files,
-      {
-        tabid,
-        title: pureName,
-        icon: 'table2.svg',
-        tabComponent: 'TableDataTab',
-        props: {
-          schemaName,
-          pureName,
-        },
+    openNewTab(setOpenedTabs, {
+      title: pureName,
+      icon: 'table2.svg',
+      tabComponent: 'TableDataTab',
+      props: {
+        schemaName,
+        pureName,
+        conid,
+        database,
       },
-    ]);
+    });
   };
 
   return { title, key, Icon, Menu, onClick };

web/src/tabs/TableDataTab.js

@@ -1,5 +1,34 @@
 import React from 'react';
+import useFetch from '../utility/useFetch';
+import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
 
-export default function TableDataTab({ schemaName, pureName }) {
-  return <div>{pureName}</div>;
+export default function TableDataTab({ conid, database, schemaName, pureName }) {
+  // return pureName;
+  const data = useFetch({
+    url: 'tables/table-data',
+    params: {
+      conid,
+      database,
+      schemaName,
+      pureName,
+    },
+  });
+  const { rows, columns } = data || {};
+  if (!columns || !rows) return null;
+  return (
+    <table>
+      <tr>
+        {columns.map(col => (
+          <th key={col.name}>{col.name}</th>
+        ))}
+      </tr>
+      {rows.map((row, index) => (
+        <tr key={index}>
+          {columns.map(col => (
+            <td key={col.name}>{row[col.name]}</td>
+          ))}
+        </tr>
+      ))}
+    </table>
+  );
 }

web/src/utility/common.js

@@ -1,3 +1,5 @@
+import uuidv1 from 'uuid/v1';
+
 export class LoadingToken {
   constructor() {
     this.isCanceled = false;
@@ -11,3 +13,15 @@ export class LoadingToken {
 export function sleep(milliseconds) {
   return new Promise(resolve => window.setTimeout(() => resolve(null), milliseconds));
 }
+
+export function openNewTab(setOpenedTabs, newTab) {
+  const tabid = uuidv1();
+  setOpenedTabs(files => [
+    ...(files || []).map(x => ({ ...x, selected: false })),
+    {
+      tabid,
+      selected: true,
+      ...newTab,
+    },
+  ]);
+}

web/src/utility/useFetch.js

@@ -2,7 +2,13 @@ import React from 'react';
 import axios from './axios';
 import useSocket from './SocketProvider';
 
-export default function useFetch({ url, defaultValue = undefined, reloadTrigger = undefined, ...config }) {
+export default function useFetch({
+  url,
+  params = undefined,
+  defaultValue = undefined,
+  reloadTrigger = undefined,
+  ...config
+}) {
   const [value, setValue] = React.useState(defaultValue);
   const [loadCounter, setLoadCounter] = React.useState(0);
   const socket = useSocket();
@@ -14,6 +20,7 @@ export default function useFetch({ url, defaultValue = undefined, reloadTrigger
   async function loadValue() {
     const resp = await axios.request({
       method: 'get',
+      params,
       url,
       ...config,
     });
@@ -27,7 +34,7 @@ export default function useFetch({ url, defaultValue = undefined, reloadTrigger
         socket.off(reloadTrigger, handleReload);
       };
     }
-  }, [url, socket, loadCounter]);
+  }, [url, params, socket, loadCounter]);
 
   return value;
 }