ms sql analyse - table list

web/src/Screen.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import theme from './theme';
 import styled from 'styled-components';
@@ -9,10 +11,7 @@ import WidgetContainer from './widgets/WidgetContainer';
 const BodyDiv = styled.div`
   position: fixed;
   top: ${theme.tabsPanel.height}px;
-  left: ${props =>
-    theme.widgetMenu.iconSize +
-    // @ts-ignore
-    props.leftPanelWidth}px;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   bottom: ${theme.statusBar.height}px;
   right: 0;
   background-color: ${theme.mainArea.background};
@@ -41,10 +40,7 @@ const TabsPanel = styled.div`
   display: flex;
   position: fixed;
   top: 0;
-  left: ${props =>
-    theme.widgetMenu.iconSize +
-    // @ts-ignore
-    props.leftPanelWidth}px;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   height: ${theme.tabsPanel.height}px;
   right: 0;
   background-color: ${theme.tabsPanel.background};
@@ -72,18 +68,10 @@ export default function Screen({ children = undefined }) {
           <WidgetContainer />
         </LeftPanel>
       )}
-      <TabsPanel
-        // @ts-ignore
-        leftPanelWidth={leftPanelWidth}
-      >
+      <TabsPanel leftPanelWidth={leftPanelWidth}>
         <FilesTabsPanel></FilesTabsPanel>
       </TabsPanel>
-      <BodyDiv
-        // @ts-ignore
-        leftPanelWidth={leftPanelWidth}
-      >
-        {children}
-      </BodyDiv>
+      <BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
       <StausBar></StausBar>
     </>
   );

web/src/widgets/DatabaseWidget.js

@@ -37,21 +37,56 @@ function SubDatabaseList({ data }) {
   return <AppObjectList list={databases} makeAppObj={databaseAppObject} onObjectClick={handleDatabaseClick} />;
 }
 
-export default function DatabaseWidget() {
-  const db = useCurrentDatabase();
+function ConnectionList() {
   const modalState = useModalState();
   const connections = useFetch({
     url: 'connections/list',
     reloadTrigger: 'connection-list-changed',
   });
+  return (
+    <>
+      <ConnectionModal modalState={modalState} />
+      <button onClick={modalState.open}>Add connection</button>
+      <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
+    </>
+  );
+}
+
+function SqlObjectList({ id, database }) {
+  const tables =
+    useFetch({
+      url: `database-connections/list-tables?id=${id}&database=${database}`,
+      reloadTrigger: `database-structure-changed-${id}-${database}`,
+    }) || [];
+  return (
+    <>
+      {tables.map(({ tableName, schemaName }) => (
+        <div key={`${schemaName}.${tableName}`}>{tableName}</div>
+      ))}
+    </>
+  );
+}
+
+function SqlObjectListWrapper() {
+  const db = useCurrentDatabase();
+
+  if (!db) return <div>(Choose database)</div>;
+  const { name, connection } = db;
+
+  return <SqlObjectList id={connection._id} database={name} />;
+  // return <div>tables of {db && db.name}</div>
+  // return <div>tables of {JSON.stringify(db)}</div>
+}
+
+export default function DatabaseWidget() {
   return (
     <MainContainer>
       <InnerContainer>
-        <ConnectionModal modalState={modalState} />
-        <button onClick={modalState.open}>Add connection</button>
-        <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
+        <ConnectionList />
+      </InnerContainer>
+      <InnerContainer>
+        <SqlObjectListWrapper />
       </InnerContainer>
-      <InnerContainer>tables of {db && db.name}</InnerContainer>
     </MainContainer>
   );
 }