Use react router action for sql raw query route

src/renderer/app.tsx

@@ -18,7 +18,7 @@ import ConnectionErrorPage from './routes/errors/ConnectionsErrorPage';
 import RootErrorPage from './routes/errors/RootErrorPage';
 import { Home } from './routes/home';
 import Root from './routes/root';
-import SqlPage from './routes/sql.$connectionName';
+import SqlPage, { action as sqlPageAction } from './routes/sql.$connectionName';
 
 const appElement = document.getElementById('App');
 
@@ -61,6 +61,9 @@ const router = createHashRouter([
       {
         path: 'connections/:connectionName',
         loader: connectionDetailPageLoader,
+        shouldRevalidate: ({ currentParams, nextParams }) => {
+          return currentParams.connectionName !== nextParams.connectionName;
+        },
         element: <ConnectionDetailPage />,
         children: [
           {
@@ -77,6 +80,7 @@ const router = createHashRouter([
               {
                 path: 'sql',
                 element: <SqlPage />,
+                action: sqlPageAction,
               },
             ],
           },

src/renderer/component/MonacoEditor/RawSqlEditor.tsx

@@ -51,6 +51,7 @@ export function RawSqlEditor({
         language: 'sql',
         theme: 'currentTheme',
         minimap: { enabled: false },
+        automaticLayout: true,
         ...memoizedMonacoOptions,
       });
 

src/renderer/routes/connections.$connectionName.tsx

@@ -51,7 +51,7 @@ export async function loader({ params, request }: RouteParams) {
     openedTable ? `/tables/${openedTable}` : ''
   }`;
 
-  if (!request.url.endsWith(expectedUrl)) {
+  if (new URL(request.url).pathname !== expectedUrl) {
     return redirect(expectedUrl);
   }
 

src/renderer/routes/sql.$connectionName.tsx

@@ -1,56 +1,51 @@
-import { useState } from 'react';
 import { Button, Flex, Form } from 'antd';
+import { ActionFunctionArgs, useFetcher } from 'react-router-dom';
 import invariant from 'tiny-invariant';
 import { useConnectionContext } from '../../contexts/ConnectionContext';
-import { useDatabaseContext } from '../../contexts/DatabaseContext';
 import { useTranslation } from '../../i18n';
 import { isResultSetHeader, isRowDataPacketArray } from '../../sql/type-guard';
-import { QueryResult } from '../../sql/types';
 import { RawSqlEditor } from '../component/MonacoEditor/RawSqlEditor';
 import TableGrid from '../component/TableGrid';
 import { useTableHeight } from '../component/TableLayout/useTableHeight';
 
-const DEFAULT_VALUE = `SELECT * 
-FROM cart c
-WHERE  c.id > 5
-LIMIT 10;`;
+const DEFAULT_VALUE = `SELECT *  FROM employees e WHERE e.gender = 'F' LIMIT 10;`;
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const { databaseName, connectionName } = params;
+
+  invariant(connectionName, 'Connection name is required');
+  invariant(databaseName, 'Database name is required');
+
+  const formData = await request.formData();
+  const query = formData.get('raw');
+
+  invariant(typeof query === 'string', 'Query as string is required');
+
+  await window.sql.executeQuery(connectionName, `USE ${databaseName};`);
+  const result = await window.sql.executeQuery(connectionName, query);
+
+  return result;
+}
 
 // TODO : create an element for the `yScroll` (actually need to be wrapped in a Flex height 100 and overflow, etc.)
 export default function SqlPage() {
   const { t } = useTranslation();
-  const [result, setResult] = useState<Awaited<QueryResult> | null>(null);
-  const { database } = useDatabaseContext();
-  const { currentConnectionName } = useConnectionContext();
   const [form] = Form.useForm();
+  const fetcher = useFetcher();
 
-  invariant(currentConnectionName, 'Connection name is required');
+  const result = fetcher.data;
 
   const [yTableScroll, resizeRef] = useTableHeight();
 
   return (
     <Flex vertical gap="small" style={{ height: '100%' }}>
       <Form
         form={form}
-        initialValues={{
-          raw: DEFAULT_VALUE,
-        }}
-        onFinish={async (values) => {
-          const query = values.raw;
-
-          // TODO submit the form the get the error handling
-          if (database) {
-            await window.sql.executeQuery(
-              currentConnectionName,
-              `USE ${database};`
-            );
-          }
-
-          const result = await window.sql.executeQuery(
-            currentConnectionName,
-            query
-          );
-
-          setResult(result);
+        initialValues={{ raw: DEFAULT_VALUE }}
+        onFinish={(values) => {
+          fetcher.submit(values, {
+            method: 'post',
+          });
         }}
       >
         <Form.Item name="raw" valuePropName="defaultValue">