introduced yarn workspace

packages/web/src/widgets/DatabaseWidget.js

@@ -0,0 +1,93 @@
+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';
+import tableAppObject from '../appobj/tableAppObject';
+import theme from '../theme';
+
+const MainContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1;
+`;
+
+const InnerContainer = styled.div`
+  flex: 1 0;
+  overflow: scroll;
+  width: ${theme.leftPanel.width}px;
+`;
+
+function SubDatabaseList({ data }) {
+  const setDb = useSetCurrentDatabase();
+  const handleDatabaseClick = database => {
+    setDb({
+      ...database,
+      connection: data,
+    });
+  };
+  const { _id } = data;
+  const databases = useFetch({
+    url: `server-connections/list-databases?conid=${_id}`,
+    reloadTrigger: `database-list-changed-${_id}`,
+  });
+  return <AppObjectList list={databases} makeAppObj={databaseAppObject} onObjectClick={handleDatabaseClick} />;
+}
+
+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({ conid, database }) {
+  const objects = useFetch({
+    url: `database-connections/list-objects?conid=${conid}&database=${database}`,
+    reloadTrigger: `database-structure-changed-${conid}-${database}`,
+  });
+  const { tables } = objects || {};
+  return (
+    <>
+      <AppObjectList list={(tables || []).map(x => ({ ...x, conid, database }))} makeAppObj={tableAppObject} />
+    </>
+  );
+}
+
+function SqlObjectListWrapper() {
+  const db = useCurrentDatabase();
+
+  if (!db) return <div>(Choose database)</div>;
+  const { name, connection } = db;
+
+  return <SqlObjectList conid={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>
+        <ConnectionList />
+      </InnerContainer>
+      <InnerContainer>
+        <SqlObjectListWrapper />
+      </InnerContainer>
+    </MainContainer>
+  );
+}

packages/web/src/widgets/WidgetContainer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useCurrentWidget } from '../utility/globalState';
+import DatabaseWidget from './DatabaseWidget';
+
+export default function WidgetContainer() {
+  const currentWidget = useCurrentWidget();
+  if (currentWidget === 'database') return <DatabaseWidget />;
+  return null;
+}

packages/web/src/widgets/WidgetIconPanel.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import theme from '../theme';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
+
+const IconWrapper = styled.div`
+  color: ${theme.widgetMenu.iconFontColor};
+  font-size: ${theme.widgetMenu.iconFontSize};
+  height: ${theme.widgetMenu.iconSize}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props =>
+    // @ts-ignore
+    props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
+  &:hover {
+    background-color: ${theme.widgetMenu.backgroundHover};
+  }
+`;
+
+export default function WidgetIconPanel() {
+  const widgets = [
+    {
+      icon: 'fa-database',
+      name: 'database',
+    },
+    {
+      icon: 'fa-table',
+      name: 'table',
+    },
+    {
+      icon: 'fa-file-alt',
+      name: 'file',
+    },
+    {
+      icon: 'fa-cog',
+      name: 'settings',
+    },
+    // {
+    //   icon: 'fa-check',
+    //   name: 'settings',
+    // },
+  ];
+
+  const currentWidget = useCurrentWidget();
+  const setCurrentWidget = useSetCurrentWidget();
+
+  return (
+    <>
+      {widgets.map(({ icon, name }) => (
+        <IconWrapper
+          key={icon}
+          // @ts-ignore
+          isSelected={name === currentWidget}
+          onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
+        >
+          <FontIcon name={icon} />
+        </IconWrapper>
+      ))}
+    </>
+  );
+}