feat: add universal way of stringify the result

Author: invisal

src/drivers/MySQLConnection.ts

@@ -50,6 +50,8 @@ function mapHeaderType(column: ColumnDefinition): QueryResultHeader {
     type = { type: 'number' };
   } else if ([0, 246].includes(column.type)) {
     type = { type: 'decimal' };
+  } else if ([255, 252, 250, 251, 252].includes(column.type)) {
+    type = { type: 'other' };
   }
 
   const databaseNameLength = column._buf[13];
@@ -185,9 +187,7 @@ export default class MySQLConnection extends SQLLikeConnection {
 
   async close() {
     if (this.pool) {
-      const conn = await this.getConnection();
-      conn.end();
-      conn.destroy();
+      this.pool.end().catch();
     }
 
     if (this.keepAliveTimerId) {

src/libs/TransformResult.ts

@@ -1,4 +1,4 @@
-import { DatabaseSchemas } from 'types/SqlSchema';
+import { DatabaseSchemas, TableColumnSchema } from 'types/SqlSchema';
 import { SqlStatementResult } from './SqlRunnerManager';
 import { QueryResultHeader } from 'types/SqlResult';
 
@@ -42,3 +42,56 @@ export function transformResultHeaderUseSchema(
     };
   });
 }
+
+/**
+ * Sometimes the result from database cannot be easily
+ * converted to string or number. This function looks at
+ * the data type of column and transform it to friendly
+ * displayable string
+ *
+ * @param value
+ * @param header
+ * @returns
+ */
+export function getDisplayableFromDatabaseValue(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any,
+  header?: TableColumnSchema
+) {
+  if (value === null) return null;
+  if (value === undefined) return undefined;
+
+  try {
+    if (!header) return value.toString();
+
+    if (header.dataType === 'geometry') {
+      return JSON.stringify(value as object);
+    }
+
+    return value.toString();
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Turn the whole result into friendly-string
+ *
+ * @param rows
+ * @param headers
+ * @returns
+ */
+export function getDisplayableFromDatabaseRows(
+  rows: Record<string, unknown>[],
+  headers: QueryResultHeader[]
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    return headers.reduce<Record<string, unknown>>((acc, cur) => {
+      acc[cur.name] = getDisplayableFromDatabaseValue(
+        row[cur.name],
+        cur.columnDefinition
+      );
+      return acc;
+    }, {});
+  });
+}

src/renderer/screens/DatabaseScreen/ExportModal/index.tsx

@@ -7,6 +7,7 @@ import {
   faEllipsis,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getDisplayableFromDatabaseRows } from 'libs/TransformResult';
 import { useCallback, useState } from 'react';
 import Button from 'renderer/components/Button';
 import Modal from 'renderer/components/Modal';
@@ -192,15 +193,21 @@ export default function ExportModal({ data, onClose }: ExportModalProps) {
 
       if (format === 'excel') {
         window.electron
-          .saveExcelFile(fileName, data.rows)
+          .saveExcelFile(
+            fileName,
+            getDisplayableFromDatabaseRows(data.rows, data.headers)
+          )
           .then(() => setStage('SUCCESS'))
           .catch((e) => {
             console.error(e);
             setStage('ERROR');
           });
       } else if (format === 'csv') {
         window.electron
-          .saveCsvFile(fileName, data.rows)
+          .saveCsvFile(
+            fileName,
+            getDisplayableFromDatabaseRows(data.rows, data.headers)
+          )
           .then(() => setStage('SUCCESS'))
           .catch((e) => {
             console.error(e);

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCell.tsx

@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import TableCellString from './TableCellString';
 import TableCellNumber from './TableCellNumber';
 import TableCellJson from './TableCellJson';
 import { QueryResultHeader } from 'types/SqlResult';
 import TableCellDecimal from './TableCellDecimal';
 import TableCellEnum from './TableCellEnum';
 import { TableCellCustomTypeProps } from './createTableCellType';
+import TableCellOther from './TableCellOther';
+import TableCellString from './TableCellString';
 
 interface TableCellProps {
   value: unknown;
@@ -25,13 +26,15 @@ function getComponentFromHeader(
     return TableCellJson;
   } else if (header.type.type === 'decimal') {
     return TableCellDecimal;
+  } else if (['string'].includes(header.type.type)) {
+    return TableCellString;
   } else if (header.columnDefinition) {
     if (header.columnDefinition.dataType === 'enum') {
       return TableCellEnum;
     }
   }
 
-  return TableCellString;
+  return TableCellOther;
 }
 
 export default memo(function TableCell(props: TableCellProps) {

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellOther.tsx

@@ -0,0 +1,26 @@
+import { getDisplayableFromDatabaseValue } from 'libs/TransformResult';
+import { TableEditableContentProps } from './TableEditableCell';
+import createTableCellType from './createTableCellType';
+import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
+
+function TableCellStringContent({ header, value }: TableEditableContentProps) {
+  return (
+    <TableCellContent
+      value={getDisplayableFromDatabaseValue(value, header.columnDefinition)}
+    />
+  );
+}
+
+const TableCellOther = createTableCellType({
+  readOnly: true,
+  diff: (prev: string, current: string) => prev !== current,
+  content: TableCellStringContent,
+  onCopy: (value: string) => {
+    return value;
+  },
+  onPaste: (value: string) => {
+    return { accept: true, value };
+  },
+});
+
+export default TableCellOther;

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableEditableCell.tsx

@@ -27,12 +27,13 @@ export interface TableEditableEditorProps {
 }
 
 export interface TableEditableContentProps {
+  header: QueryResultHeader;
   value: unknown;
 }
 
 interface TableEditableCellProps {
   diff: (prev: unknown, current: unknown) => boolean;
-  editor: React.FC<TableEditableEditorProps>;
+  editor?: React.FC<TableEditableEditorProps>;
   detactEditor?: boolean;
   content: React.FC<TableEditableContentProps>;
   row: number;
@@ -75,14 +76,16 @@ const TableEditableCell = forwardRef<
 
   const insertValueHandler = useCallback(
     (newValue: unknown) => {
+      if (readOnly) return;
+
       setAfterValue(newValue);
       if (diff(value, newValue)) {
         setChange(row, col, newValue);
       } else {
         removeChange(row, col);
       }
     },
-    [setAfterValue, setChange, diff]
+    [setAfterValue, setChange, diff, readOnly]
   );
 
   const copyHandler = useCallback(() => {
@@ -108,7 +111,6 @@ const TableEditableCell = forwardRef<
     () => {
       return {
         discard: () => {
-          console.log('discard', value, row, col);
           setAfterValue(value);
           removeChange(row, col);
         },
@@ -127,10 +129,10 @@ const TableEditableCell = forwardRef<
   );
 
   const onEnterEditMode = useCallback(() => {
-    if (!onEditMode) {
+    if (!onEditMode && !readOnly) {
       setOnEditMode(true);
     }
-  }, [onEditMode, setOnEditMode]);
+  }, [onEditMode, setOnEditMode, readOnly]);
 
   const handleFocus = useCallback(() => {
     if (!onFocus) {
@@ -184,7 +186,7 @@ const TableEditableCell = forwardRef<
       onContextMenu={handleFocus}
       onDoubleClick={onEnterEditMode}
     >
-      {onEditMode ? (
+      {Editor && onEditMode ? (
         detactEditor ? (
           <>
             <Editor
@@ -193,7 +195,7 @@ const TableEditableCell = forwardRef<
               onExit={onExitEditMode}
               readOnly={readOnly}
             />
-            <Content value={afterValue} />
+            <Content value={afterValue} header={header} />
           </>
         ) : (
           <Editor
@@ -204,7 +206,7 @@ const TableEditableCell = forwardRef<
           />
         )
       ) : (
-        <Content value={afterValue} />
+        <Content value={afterValue} header={header} />
       )}
     </div>
   );

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/createTableCellType.tsx

@@ -8,11 +8,12 @@ import { QueryResultHeader } from 'types/SqlResult';
 
 interface TableCellCustomTypeOptions<T> {
   diff: (prev: T, current: T) => boolean;
-  editor: React.FC<TableEditableEditorProps>;
+  editor?: React.FC<TableEditableEditorProps>;
   content: React.FC<TableEditableContentProps>;
   detachEditor?: boolean;
   onCopy?: (value: T) => string;
   onPaste?: (value: string) => { accept: boolean; value: T };
+  readOnly?: boolean;
 }
 
 export interface TableCellCustomTypeProps<T> {
@@ -52,7 +53,7 @@ export default function createTableCellType<T>(
         col={col}
         editor={options.editor}
         content={options.content}
-        readOnly={readOnly}
+        readOnly={options.readOnly || readOnly}
         detactEditor={options.detachEditor}
         onCopy={options.onCopy}
         onPaste={options.onPaste}

src/types/SqlResult.ts

@@ -1,7 +1,7 @@
 import { TableColumnSchema } from './SqlSchema';
 
 export interface QueryResultHeaderType {
-  type: 'string' | 'number' | 'json' | 'decimal';
+  type: 'string' | 'number' | 'json' | 'decimal' | 'other';
 }
 
 export interface QueryResultHeader {