Add JSON as an export option

README.md

@@ -64,7 +64,7 @@ Effortlessly move data in and out of your database:
 
 - ✅ Export data to CSV.
 - ✅ Export data to Microsoft Excel.
-- ❌ Export data to JSON (in progress).
+- ✅ Export data to JSON.
 - ❌ Export data to SQL (in progress).
 - ❌ Export data to XML (in progress).
 - ❌ Export to Clipboard (in progress).

src/libs/StructuredTextFile.ts

@@ -0,0 +1,20 @@
+import fs from 'fs';
+
+export type SupportedStructuredFileType = 'json'
+
+function jsonSerializer(data: any) {
+  return JSON.stringify(data, undefined, 2);
+}
+
+export default function saveStructuredTextFile(
+  fileName: string,
+  type: SupportedStructuredFileType,
+  records: object[]
+) {
+
+  const serializers = {
+    json: jsonSerializer,
+  }
+
+  fs.writeFileSync(fileName, serializers[type](records))
+}

src/main/ipc/ipc_file_system.ts

@@ -9,6 +9,7 @@ import fs from 'fs';
 import saveCsvFile from '../../libs/SaveCSVFile';
 import saveExcelFile from '../../libs/SaveExcelFile';
 import CommunicateHandler from './../CommunicateHandler';
+import saveStructuredTextFile, { SupportedStructuredFileType } from '../../libs/StructuredTextFile';
 
 CommunicateHandler.handle(
   'show-message-box',
@@ -35,6 +36,9 @@ CommunicateHandler.handle(
       }
     },
   )
+  .handle('save-structured-text-file', ([fileName, type, records]: [string, string, object[]]) => {
+    saveStructuredTextFile(fileName, type as SupportedStructuredFileType, records);
+  })
   .handle('save-csv-file', ([fileName, records]: [string, object[]]) => {
     saveCsvFile(fileName, records);
   })

src/main/preload.ts

@@ -16,6 +16,7 @@ import {
   UpdateDownloadedEvent,
   UpdateInfo,
 } from 'electron-updater';
+import { SupportedStructuredFileType } from 'libs/StructuredTextFile.js';
 
 export type Channels = 'ipc-example' | 'create-connection';
 
@@ -74,6 +75,9 @@ const electronHandler = {
   showFileInFolder: (fileName: string) =>
     ipcRenderer.invoke('show-item-in-folder', [fileName]),
 
+  saveStructuredTextFile: (fileName: string, type: SupportedStructuredFileType, records: object[]) =>
+    ipcRenderer.invoke('save-structured-text-file', [fileName, type, records]),
+
   saveCsvFile: (fileName: string, records: object[]) =>
     ipcRenderer.invoke('save-csv-file', [fileName, records]),
 

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

@@ -1,12 +1,14 @@
 import {
   faFileExcel,
   faFileCsv,
+  faFileText,
   faCircleCheck,
   faTimesCircle,
   faSpinner,
   faEllipsis,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SupportedStructuredFileType } from 'libs/StructuredTextFile';
 import { getDisplayableFromDatabaseRows } from 'libs/TransformResult';
 import { useCallback, useState } from 'react';
 import Button from 'renderer/components/Button';
@@ -16,18 +18,35 @@ import Stack from 'renderer/components/Stack';
 import TextField from 'renderer/components/TextField';
 import { QueryResult } from 'types/SqlResult';
 
+function combineExportOptionText(name: string, extensions: string[]): string {
+  const ext = extensions.map(x => `*.${x}`).join(", ");
+  return `${name} (${ext})`
+}
+
 const EXPORT_OPTIONS = [
   {
-    text: 'Excel (*.xlsx)',
+    name: 'Excel',
     icon: <FontAwesomeIcon color="#27ae60" icon={faFileExcel} />,
     value: 'excel',
+    extensions: ['xlsx'],
   },
   {
-    text: 'Comma Separated Value (*.csv)',
+    name: 'Comma Separated Value',
     icon: <FontAwesomeIcon color="#e67e22" icon={faFileCsv} />,
     value: 'csv',
+    extensions: ['csv'],
   },
-];
+  {
+    name: 'JSON',
+    icon: <FontAwesomeIcon color="#2f2f2c" icon={faFileText} />,
+    value: 'json',
+    extensions: ['json'],
+  }
+].map((item) => ({...item, text: combineExportOptionText(item.name, item.extensions) }));
+
+const EXPORT_OPTIONS_FILE_FILTERS = Object.fromEntries(
+  EXPORT_OPTIONS.map(({ value, extensions, name }) => [value, { extensions, name }])
+);
 
 interface ExportModalProps {
   data: QueryResult;
@@ -43,20 +62,10 @@ function ExportModalConfig({
   const [fileName, setFileName] = useState('');
 
   const onBrowseFileClicked = useCallback(() => {
+    const filter = EXPORT_OPTIONS_FILE_FILTERS[format];
+    if (!filter) return;
     window.electron
-      .showSaveDialog({
-        filters: [
-          format === 'excel'
-            ? {
-                name: 'Excel',
-                extensions: ['xlsx'],
-              }
-            : {
-                name: 'CSV',
-                extensions: ['csv'],
-              },
-        ],
-      })
+      .showSaveDialog({ filters: [filter] })
       .then((value) => setFileName(value ?? ''));
   }, [format]);
 
@@ -213,6 +222,18 @@ export default function ExportModal({ data, onClose }: ExportModalProps) {
             console.error(e);
             setStage('ERROR');
           });
+      } else if (format === "json") {
+        window.electron
+          .saveStructuredTextFile(
+            fileName,
+            format as SupportedStructuredFileType,
+            getDisplayableFromDatabaseRows(data.rows, data.headers)
+          )
+          .then(() => setStage('SUCCESS'))
+          .catch((e) => {
+            console.error(e);
+            setStage('ERROR');
+          });
       } else {
         setStage('ERROR');
       }