From d60c3fb9f7d3bc733992f3f9cf414c67344cd8f0 Mon Sep 17 00:00:00 2001
From: Julien Deniau <julien.deniau@gmail.com>
Date: Mon, 4 Mar 2024 23:16:27 +0100
Subject: [PATCH] wip use browser router

---
 src/configuration/index.ts                    | 16 +++++++
 src/contexts/ConfigurationContext.tsx         |  2 +
 src/preload/config.ts                         |  5 +++
 src/preload/configurationChannel.ts           |  1 +
 src/renderer/app.tsx                          | 28 ++++++------
 .../component/Connection/ConnectionPage.tsx   | 16 +++----
 .../component/Connection/ConnectionStack.tsx  | 19 +++++---
 src/renderer/routes/tables.tsx                | 45 ++++++++++++++++++-
 src/sql/index.ts                              |  2 +
 9 files changed, 105 insertions(+), 29 deletions(-)

diff --git a/src/configuration/index.ts b/src/configuration/index.ts
index bf25a5c..681948d 100644
--- a/src/configuration/index.ts
+++ b/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,
diff --git a/src/contexts/ConfigurationContext.tsx b/src/contexts/ConfigurationContext.tsx
index 8093b6c..b0d2947 100644
--- a/src/contexts/ConfigurationContext.tsx
+++ b/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]
   );
diff --git a/src/preload/config.ts b/src/preload/config.ts
index ae942b0..4645222 100644
--- a/src/preload/config.ts
+++ b/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),
 };
diff --git a/src/preload/configurationChannel.ts b/src/preload/configurationChannel.ts
index 9492f6f..303fc93 100644
--- a/src/preload/configurationChannel.ts
+++ b/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',
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 691a64f..348833e 100644
--- a/src/renderer/app.tsx
+++ b/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 />,
+      //     },
+      //   ],
+      // },
     ],
   },
 ]);
diff --git a/src/renderer/component/Connection/ConnectionPage.tsx b/src/renderer/component/Connection/ConnectionPage.tsx
index 43d4dad..40a4d52 100644
--- a/src/renderer/component/Connection/ConnectionPage.tsx
+++ b/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>
diff --git a/src/renderer/component/Connection/ConnectionStack.tsx b/src/renderer/component/Connection/ConnectionStack.tsx
index dbf6859..3492c07 100644
--- a/src/renderer/component/Connection/ConnectionStack.tsx
+++ b/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(
diff --git a/src/renderer/routes/tables.tsx b/src/renderer/routes/tables.tsx
index 7b4e966..4b3a816 100644
--- a/src/renderer/routes/tables.tsx
+++ b/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' }}>
diff --git a/src/sql/index.ts b/src/sql/index.ts
index 059fe67..60f6ffd 100644
--- a/src/sql/index.ts
+++ b/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);