use current database

web/src/App.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import './index.css';
 import Screen from './Screen';
-import { CurrentWidgetProvider } from './widgets/useCurrentWidget';
+import { CurrentWidgetProvider, CurrentDatabaseProvider } from './utility/globalState';
 import { SocketProvider } from './utility/SocketProvider';
 
 function App() {
   return (
     <CurrentWidgetProvider>
-      <SocketProvider>
+      <CurrentDatabaseProvider>
-        <Screen />
+        <SocketProvider>
-      </SocketProvider>
+          <Screen />
+        </SocketProvider>
+      </CurrentDatabaseProvider>
     </CurrentWidgetProvider>
   );
 }

web/src/Screen.js

@@ -3,7 +3,7 @@ import theme from './theme';
 import styled from 'styled-components';
 import FilesTabsPanel from './FilesTabsPanel';
 import WidgetIconPanel from './widgets/WidgetIconPanel';
-import useCurrentWidget from './widgets/useCurrentWidget';
+import { useCurrentWidget } from './utility/globalState';
 import WidgetContainer from './widgets/WidgetContainer';
 
 const BodyDiv = styled.div`
@@ -31,6 +31,7 @@ const LeftPanel = styled.div`
   bottom: ${theme.statusBar.height}px;
   width: ${theme.leftPanel.width}px;
   background-color: ${theme.leftPanel.background};
+  display: flex;
 `;
 
 const TabsPanel = styled.div`

web/src/appobj/AppObjectList.js

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
 import { AppObjectCore } from './AppObjects';
 
-export function AppObjectList({ list, makeAppObj, SubItems }) {
+export function AppObjectList({ list, makeAppObj, SubItems, onObjectClick }) {
   return (list || []).map(x => {
     const appobj = makeAppObj(x);
-    let res = <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} />;
+    let res = <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} onClick={onObjectClick} />;
     if (SubItems) {
       res = (
         <>

web/src/appobj/AppObjects.js

@@ -6,7 +6,7 @@ const AppObjectDiv = styled.div`
   padding: 5px;
   &:hover {
     background-color: lightblue;
-  };
+  }
   cursor: pointer;
 `;
 
@@ -14,7 +14,7 @@ const IconWrap = styled.span`
   margin-right: 10px;
 `;
 
-export function AppObjectCore({ title, Icon, Menu, data, makeAppObj }) {
+export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick }) {
   const handleContextMenu = event => {
     if (!Menu) return;
 
@@ -23,7 +23,7 @@ export function AppObjectCore({ title, Icon, Menu, data, makeAppObj }) {
   };
 
   return (
-    <AppObjectDiv onContextMenu={handleContextMenu}>
+    <AppObjectDiv onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined}>
       <IconWrap>
         <Icon />
       </IconWrap>

web/src/appobj/databaseAppObject.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MicrosoftIcon, SqliteIcon, PostgreSqlIcon, MySqlIcon, ServerIcon, DatabaseIcon } from '../icons';
+import { DatabaseIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
 import showModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';

web/src/utility/globalState.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+function createGlobalState(defaultValue) {
+  const Context = React.createContext();
+
+  function Provider({ children }) {
+    const [currentvalue, setCurrentValue] = React.useState(defaultValue);
+    return <Context.Provider value={[currentvalue, setCurrentValue]}>{children}</Context.Provider>;
+  }
+
+  function useValue() {
+    return React.useContext(Context)[0];
+  }
+
+  function useSetValue() {
+    return React.useContext(Context)[1];
+  }
+
+  return [Provider, useValue, useSetValue];
+}
+
+const [CurrentWidgetProvider, useCurrentWidget, useSetCurrentWidget] = createGlobalState('database');
+export { CurrentWidgetProvider, useCurrentWidget, useSetCurrentWidget };
+
+const [CurrentDatabaseProvider, useCurrentDatabase, useSetCurrentDatabase] = createGlobalState(null);
+export { CurrentDatabaseProvider, useCurrentDatabase, useSetCurrentDatabase };

web/src/widgets/DatabaseWidget.js

@@ -1,31 +1,57 @@
 import React from 'react';
+import styled from 'styled-components';
+
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import useFetch from '../utility/useFetch';
 import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
+import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
+
+const MainContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1;
+`;
+
+const InnerContainer = styled.div`
+  flex: 1 0;
+  overflow: scroll;
+`;
 
 function SubDatabaseList({ data }) {
+  const setDb = useSetCurrentDatabase();
+  const handleDatabaseClick = database => {
+    setDb({
+      ...database,
+      connection: data,
+    });
+  };
   const { _id } = data;
   const databases = useFetch({
     url: `server-connections/list-databases?id=${_id}`,
     reloadTrigger: `database-list-changed-${_id}`,
   });
-  return <AppObjectList list={databases} makeAppObj={databaseAppObject} />
+  return <AppObjectList list={databases} makeAppObj={databaseAppObject} onObjectClick={handleDatabaseClick} />;
 }
 
 export default function DatabaseWidget() {
+  const db = useCurrentDatabase();
   const modalState = useModalState();
   const connections = useFetch({
     url: 'connections/list',
     reloadTrigger: 'connection-list-changed',
   });
   return (
-    <>
+    <MainContainer>
-      <ConnectionModal modalState={modalState} />
+      <InnerContainer>
-      <button onClick={modalState.open}>Add connection</button>
+        <ConnectionModal modalState={modalState} />
-      <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
+        <button onClick={modalState.open}>Add connection</button>
-    </>
+        <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
+      </InnerContainer>
+      <InnerContainer>tables of {db && db.name}</InnerContainer>
+    </MainContainer>
   );
 }

web/src/widgets/WidgetContainer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useCurrentWidget from './useCurrentWidget';
+import { useCurrentWidget } from '../utility/globalState';
 import DatabaseWidget from './DatabaseWidget';
 
 export default function WidgetContainer() {

web/src/widgets/WidgetIconPanel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import theme from '../theme';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
-import useCurrentWidget, { useSetCurrentWidget } from './useCurrentWidget';
+import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
 
 const IconWrapper = styled.div`
   color: ${theme.widgetMenu.iconFontColor};

web/src/widgets/useCurrentWidget.js

@@ -1,20 +0,0 @@
-import React from "react";
-
-const CurrentWidgetProviderContext = React.createContext();
-
-export function CurrentWidgetProvider({ children }) {
-  const [currentWidget, setCurrentWidget] = React.useState('database');
-  return (
-    <CurrentWidgetProviderContext.Provider value={[currentWidget, setCurrentWidget]}>
-      {children}
-    </CurrentWidgetProviderContext.Provider>
-  );
-}
-
-export default function useCurrentWidget() {
-  return React.useContext(CurrentWidgetProviderContext)[0];
-}
-
-export function useSetCurrentWidget() {
-  return React.useContext(CurrentWidgetProviderContext)[1];
-}