metadata loaders extended

packages/api/src/utility/socket.js

@@ -13,7 +13,7 @@ module.exports = {
   },
   emitChanged(key) {
     console.log('EMIT_CHANGED:', key);
-    socket.emit(key);
     socket.emit('clean-cache', key);
-  }
+    socket.emit(key);
+  },
 };

packages/web/src/utility/ObjectListControl.js

@@ -1,10 +1,7 @@
 import React from 'react';
-import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
-import theme from '../theme';
 import TableControl, { TableColumn } from './TableControl';
 import { AppObjectControl } from '../appobj/AppObjects';
-import columnAppObject from '../appobj/columnAppObject';
 
 const ObjectListWrapper = styled.div`
   margin-bottom: 20px;

packages/web/src/utility/TableControl.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
-import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
-import theme from '../theme';
 
 const Table = styled.table`
   border-collapse: collapse;

packages/web/src/utility/metadataLoaders.js

@@ -21,6 +21,24 @@ const connectionInfoLoader = ({ conid }) => ({
   reloadTrigger: 'connection-list-changed',
 });
 
+const sqlObjectListLoader = ({ conid, database }) => ({
+  url: 'metadata/list-objects',
+  params: { conid, database },
+  reloadTrigger: `database-structure-changed-${conid}-${database}`,
+});
+
+const databaseListLoader = ({ conid }) => ({
+  url: 'server-connections/list-databases',
+  params: { conid },
+  reloadTrigger: `database-list-changed-${conid}`,
+});
+
+const connectionListLoader = () => ({
+  url: 'connections/list',
+  params: {},
+  reloadTrigger: `connection-list-changed`,
+});
+
 async function getCore(loader, args) {
   const { url, params, reloadTrigger } = loader(args);
   const key = stableStringify({ url, ...params });
@@ -86,21 +104,23 @@ export function useConnectionInfo(args) {
   return useCore(connectionInfoLoader, args);
 }
 
-// export function useConnectionInfo(conid) {
+export function getSqlObjectList(args) {
-//   /** @type {import('@dbgate/types').StoredConnection} */
+  return getCore(sqlObjectListLoader, args);
-//   const connection = useFetch({
+}
-//     params: { conid },
+export function useSqlObjectList(args) {
-//     url: 'connections/get',
+  return useCore(sqlObjectListLoader, args);
-//   });
+}
-//   return connection;
+
-// }
+export function getDatabaseList(args) {
-// export async function getConnectionInfo(conid) {
+  return getCore(databaseListLoader, args);
-//   const resp = await axios.request({
+}
-//     method: 'get',
+export function useDatabaseList(args) {
-//     params: { conid },
+  return useCore(databaseListLoader, args);
-//     url: 'connections/get',
+}
-//   });
+
-//   /** @type {import('@dbgate/types').StoredConnection} */
+export function getConnectionList() {
-//   const res = resp.data;
+  return getCore(connectionListLoader, {});
-//   return res;
+}
-// }
+export function useConnectionList() {
+  return useCore(connectionListLoader, {});
+}

packages/web/src/widgets/DatabaseWidget.js

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import _ from 'lodash';
 
-import useFetch from '../utility/useFetch';
 import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
@@ -11,6 +10,7 @@ import tableAppObject from '../appobj/tableAppObject';
 import theme from '../theme';
 import InlineButton from './InlineButton';
 import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
+import { useSqlObjectList, useDatabaseList, useConnectionList } from '../utility/metadataLoaders';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -55,10 +55,7 @@ function SubDatabaseList({ data }) {
     });
   };
   const { _id } = data;
-  const databases = useFetch({
+  const databases = useDatabaseList({ conid: _id });
-    url: `server-connections/list-databases?conid=${_id}`,
-    reloadTrigger: `database-list-changed-${_id}`,
-  });
   return (
     <AppObjectList
       list={(databases || []).map((db) => ({ ...db, connection: data }))}
@@ -69,10 +66,8 @@ function SubDatabaseList({ data }) {
 }
 
 function ConnectionList() {
-  const connections = useFetch({
+  const connections = useConnectionList();
-    url: 'connections/list',
+
-    reloadTrigger: 'connection-list-changed',
-  });
   const [filter, setFilter] = React.useState('');
   return (
     <>
@@ -94,10 +89,7 @@ function ConnectionList() {
 }
 
 function SqlObjectList({ conid, database }) {
-  const objects = useFetch({
+  const objects = useSqlObjectList({ conid, database });
-    url: `metadata/list-objects?conid=${conid}&database=${database}`,
-    reloadTrigger: `database-structure-changed-${conid}-${database}`,
-  });
 
   const [filter, setFilter] = React.useState('');
   const objectList = _.flatten(