wip use browser router

src/configuration/index.ts

@@ -175,9 +175,25 @@ export function updateConnectionState<K extends keyof ConnectionAppState>(
   writeConfiguration(config);
 }
 
+function getConnectionFromName(name: string): ConnectionObject {
+  console.log(name);
+  const config = getConfiguration();
+
+  console.log(config);
+
+  if (!config.connections || !config.connections[name]) {
+    throw new Error(`Connection ${name} not found`);
+  }
+
+  const { appState: _, ...rest } = config.connections[name];
+
+  return rest;
+}
+
 const IPC_EVENT_BINDING = {
   [CONFIGURATION_CHANNEL.GET]: getConfiguration,
   [CONFIGURATION_CHANNEL.ADD_CONNECTION]: addConnectionToConfig,
+  [CONFIGURATION_CHANNEL.GET_CONNECTION_FROM_NAME]: getConnectionFromName,
   [CONFIGURATION_CHANNEL.EDIT_CONNECTION]: editConnection,
   [CONFIGURATION_CHANNEL.CHANGE_THEME]: changeTheme,
   [CONFIGURATION_CHANNEL.UPDATE_CONNECTION_STATE]: updateConnectionState,

src/contexts/ConfigurationContext.tsx

@@ -11,6 +11,7 @@ type ConfigurationContextType = {
     key: K,
     value: ConnectionAppState[K]
   ) => void;
+  getConnectionFromName: (name: string) => Promise<ConnectionObject>;
 };
 
 const ConfigurationContext = createContext<null | ConfigurationContextType>(
@@ -55,6 +56,7 @@ export function ConfigurationContextProvider({
       ),
       updateConnectionState: window.config.updateConnectionState,
       editConnection: willChangeConfiguration(window.config.editConnection),
+      getConnectionFromName: window.config.getConnectionFromName,
     }),
     [configuration]
   );

src/preload/config.ts

@@ -16,6 +16,8 @@ interface Config {
     value: ConnectionAppState[K]
   ): Promise<void>;
 
+  getConnectionFromName(name: string): Promise<ConnectionObject>;
+
   editConnection(
     connectionName: string,
     connection: ConnectionObject
@@ -29,5 +31,8 @@ export const config: Config = {
   updateConnectionState: bindChannel(
     CONFIGURATION_CHANNEL.UPDATE_CONNECTION_STATE
   ),
+  getConnectionFromName: bindChannel(
+    CONFIGURATION_CHANNEL.GET_CONNECTION_FROM_NAME
+  ),
   editConnection: bindChannel(CONFIGURATION_CHANNEL.EDIT_CONNECTION),
 };

src/preload/configurationChannel.ts

@@ -1,6 +1,7 @@
 export enum CONFIGURATION_CHANNEL {
   GET = 'config:get',
   ADD_CONNECTION = 'config:connection:add',
+  GET_CONNECTION_FROM_NAME = 'config:connection:getFromName',
   EDIT_CONNECTION = 'config:connection:edit',
   CHANGE_THEME = 'config:theme:change',
   UPDATE_CONNECTION_STATE = 'config:connection:updateState',

src/renderer/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider, createMemoryRouter } from 'react-router';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import invariant from 'tiny-invariant';
 import ErrorPage from './error-page';
 import Connect from './routes/connect';
@@ -11,7 +11,7 @@ import TableName, {
 } from './routes/connections.$connectionName.$databaseName.$tableName';
 import { Home } from './routes/home';
 import Root from './routes/root';
-import { Tables } from './routes/tables';
+import Tables from './routes/tables';
 
 const appElement = document.getElementById('App');
 
@@ -24,7 +24,7 @@ const root = createRoot(appElement);
 // export const history = createMemoryHistory();
 // <Router history={history}>
 
-const router = createMemoryRouter([
+const router = createBrowserRouter([
   {
     path: '/',
     element: <Root />,
@@ -55,17 +55,17 @@ const router = createMemoryRouter([
         path: 'connections/:connectionName',
         element: <Tables />,
       },
-      {
-        path: 'connections/:connectionName/:databaseName',
-        element: <Tables />,
-        children: [
-          {
-            path: ':tableName',
-            loader: tableNameLoader,
-            element: <TableName />,
-          },
-        ],
-      },
+      // {
+      //   path: 'connections/:connectionName/:databaseName',
+      //   element: <Tables />,
+      //   children: [
+      //     {
+      //       path: ':tableName',
+      //       loader: tableNameLoader,
+      //       element: <TableName />,
+      //     },
+      //   ],
+      // },
     ],
   },
 ]);

src/renderer/component/Connection/ConnectionPage.tsx

@@ -27,16 +27,16 @@ function ConnectionPage() {
           <Flex key={connection.name} gap="small">
             <Button block>
               <Link
-                to={connection.name}
-                onClick={(e) => {
-                  // TODO move this in the page component
-                  e.preventDefault();
+                to={`/connections/${connection.name}/`}
+                // onClick={(e) => {
+                //   // TODO move this in the page component
+                //   e.preventDefault();
 
-                  // remove unwanted properties
-                  const { appState: _, ...rest } = connection;
+                //   // remove unwanted properties
+                //   const { appState: _, ...rest } = connection;
 
-                  connectTo(rest);
-                }}
+                //   connectTo(rest);
+                // }}
               >
                 {connection.name}
               </Link>

src/renderer/component/Connection/ConnectionStack.tsx

@@ -28,13 +28,22 @@ function ConnectionStack({ children }: Props) {
   }, []);
 
   const handleConnectTo = useCallback(
-    async (params: ConnectionObject) => {
-      await window.sql.openConnection(params);
-      setConnectionNameList((prev) => [...prev, params.name]);
+    async (params: ConnectionObject | string) => {
+      const connection =
+        typeof params === 'string'
+          ? await window.config.getConnectionFromName(params)
+          : params;
 
-      navigate(`/connections/${params.name}`);
+      if (connectionNameList.includes(connection.name)) {
+        return;
+      }
+
+      await window.sql.openConnection(connection);
+      setConnectionNameList((prev) => [...prev, connection.name]);
+
+      // navigate(`/connections/${connection.name}`);
     },
-    [navigate, setConnectionNameList]
+    [connectionNameList]
   );
 
   const handleSetDatabase = useCallback(

src/renderer/routes/tables.tsx

@@ -1,6 +1,10 @@
+import { useCallback, useEffect } from 'react';
 import { Layout } from 'antd';
-import { Outlet } from 'react-router';
+import { Outlet, Params, useParams } from 'react-router';
 import { styled } from 'styled-components';
+import invariant from 'tiny-invariant';
+import { useConfiguration } from '../../contexts/ConfigurationContext';
+import { useConnectionContext } from '../../contexts/ConnectionContext';
 import DatabaseSelector from '../component/DatabaseSelector';
 import TableList from '../component/TableList';
 import { getSetting } from '../theme';
@@ -14,7 +18,44 @@ const PaddedDiv = styled.div`
   padding: 10px;
 `;
 
-export function Tables() {
+export default function Tables() {
+  //   // TODO move this in the page component
+  //   e.preventDefault();
+
+  //   // remove unwanted properties
+  //   const { appState: _, ...rest } = connection;
+
+  //   connectTo(rest);
+  // }}
+
+  const { connectionName } = useParams();
+  const { connectTo } = useConnectionContext();
+  const { getConnectionFromName } = useConfiguration();
+
+  useEffect(() => {
+    console.log({ connectionName });
+  }, [connectionName]);
+
+  useEffect(() => {
+    console.log({ getConnectionFromName });
+  }, [getConnectionFromName]);
+
+  useEffect(() => {
+    console.log({ connectTo });
+  }, [connectTo]);
+
+  const doConnect = useCallback(async () => {
+    console.log('doConnect', connectionName);
+    if (connectionName) {
+      const connection = await getConnectionFromName(connectionName);
+      await connectTo(connection);
+    }
+  }, [connectionName]);
+
+  useEffect(() => {
+    doConnect();
+  }, [doConnect]);
+
   return (
     <Layout>
       <Sider width={200} style={{ overflow: 'auto' }}>

src/sql/index.ts

@@ -32,6 +32,8 @@ class ConnectionStack {
   }
 
   async executeQuery(senderId: number, query: string): QueryResult {
+    console.log(this.connections);
+
     const connection = this.#getConnection(senderId);
 
     return await connection.query(query);