lots of changes around the files to get electron25 working, but it bu…

…ilds now
open-source-labs · Aug 2, 2023 · ad5a327 · ad5a327
1 parent 4b28fbb
commit ad5a327
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 147 deletions.
diff --git a/backend/channels.ts b/backend/channels.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 /* eslint-disable prefer-destructuring */
-import { ipcMain } from 'electron'; // IPCMain: Communicate asynchronously from the main process to renderer processes
+import { ipcMain, dialog, BrowserWindow } from 'electron'; // IPCMain: Communicate asynchronously from the main process to renderer processes
 import path from 'path';
 import fs from 'fs';
 import os from 'os';
@@ -71,7 +71,7 @@ ipcMain.handle('set-config', async (event, configObj) => {
     .catch((err) => {
       logger(
         `Error trying to set base connections on 'reset-connection': ${err.message}`,
-        LogType.ERROR
+        LogType.ERROR,
       );
       const feedback: Feedback = {
         type: 'error',
@@ -80,7 +80,7 @@ ipcMain.handle('set-config', async (event, configObj) => {
       event.sender.send('feedback', feedback);
       logger(
         "Sent 'feedback' from 'reset-connection' (Note: This is an ERROR!)",
-        LogType.ERROR
+        LogType.ERROR,
       );
     })
     .finally(() => {
@@ -104,7 +104,7 @@ ipcMain.handle('get-config', async (event) => {
 ipcMain.on('return-db-list', (event) => {
   logger(
     "Received 'return-db-list' (Note: No Async being sent here)",
-    LogType.RECEIVE
+    LogType.RECEIVE,
   );
 
   db.setBaseConnections()
@@ -117,7 +117,7 @@ ipcMain.on('return-db-list', (event) => {
         .catch((err) => {
           logger(
             `Error trying to get lists on 'return-db-list': ${err.message}`,
-            LogType.ERROR
+            LogType.ERROR,
           );
           const feedback: Feedback = {
             type: 'error',
@@ -126,14 +126,14 @@ ipcMain.on('return-db-list', (event) => {
           event.sender.send('feedback', feedback);
           logger(
             "Sent 'feedback' from 'return-db-list' (Note: This is an ERROR!)",
-            LogType.SEND
+            LogType.SEND,
           );
         });
     })
     .catch((err) => {
       logger(
         `Error trying to set base connections on 'return-db-list': ${err.message}`,
-        LogType.ERROR
+        LogType.ERROR,
       );
       const feedback: Feedback = {
         type: 'error',
@@ -142,7 +142,7 @@ ipcMain.on('return-db-list', (event) => {
       event.sender.send('feedback', feedback);
       logger(
         "Sent 'feedback' from 'return-db-list' (Note: This is an ERROR!)",
-        LogType.SEND
+        LogType.SEND,
       );
     });
 });
@@ -167,7 +167,7 @@ ipcMain.handle(
     } finally {
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 /**
@@ -180,7 +180,7 @@ ipcMain.handle(
     event,
     dbName: string,
     currDB: boolean,
-    dbType: DBType
+    dbType: DBType,
   ): Promise<void> => {
     logger("Received 'drop-db'", LogType.RECEIVE);
 
@@ -216,7 +216,7 @@ ipcMain.handle(
     } finally {
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 interface DuplicatePayload {
@@ -234,18 +234,18 @@ ipcMain.handle(
   async (
     event,
     { newName, sourceDb, withData }: DuplicatePayload,
-    dbType: DBType
+    dbType: DBType,
   ) => {
     logger(
       `Received 'duplicate-db'" of dbType: ${dbType} and: `,
-      LogType.RECEIVE
+      LogType.RECEIVE,
     );
 
     event.sender.send('async-started');
 
     const tempFilePath = path.resolve(
       `${docConfig.getConfigFolder()}/`,
-      `temp_${newName}.sql`
+      `temp_${newName}.sql`,
     );
 
     try {
@@ -257,7 +257,7 @@ ipcMain.handle(
         await promExecute(dumpCmd);
       } catch (e) {
         throw new Error(
-          `Failed to dump ${sourceDb} to temp file at ${tempFilePath}`
+          `Failed to dump ${sourceDb} to temp file at ${tempFilePath}`,
         );
       }
 
@@ -297,7 +297,7 @@ ipcMain.handle(
 
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 interface ImportPayload {
@@ -347,7 +347,7 @@ ipcMain.handle(
     } finally {
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 /*
@@ -362,12 +362,12 @@ ipcMain.handle(
   async (
     event,
     { targetDb, sqlString, selectedDb, runQueryNumber }: QueryPayload,
-    dbType: DBType
+    dbType: DBType,
   ) => {
     logger(
       "Received 'run-query'",
       LogType.RECEIVE,
-      `selectedDb: ${selectedDb} and dbType: ${dbType} and runQueryNumber: ${runQueryNumber}`
+      `selectedDb: ${selectedDb} and dbType: ${dbType} and runQueryNumber: ${runQueryNumber}`,
     );
     event.sender.send('async-started');
     const arr: any[] = []; // array of sample
@@ -407,7 +407,7 @@ ipcMain.handle(
             const results = await db.query(
               explainQuery(sqlString, dbType),
               null,
-              dbType
+              dbType,
             );
 
             // console.log('query results', results);
@@ -424,10 +424,10 @@ ipcMain.handle(
             const results = await db.query(
               explainQuery(sqlString, dbType),
               null,
-              dbType
+              dbType,
             );
             const eachSampleTime: any = parseExplainExplanation(
-              results[0][0].EXPLAIN
+              results[0][0].EXPLAIN,
             );
             arr.push(eachSampleTime);
             totalSampleTime += eachSampleTime;
@@ -586,11 +586,11 @@ ipcMain.handle(
       logger(
         "Sent 'db-lists' from 'run-query'",
         LogType.SEND,
-        `selectedDb: ${selectedDb} -- targetDb: ${targetDb} -- dbType: ${dbType}`
+        `selectedDb: ${selectedDb} -- targetDb: ${targetDb} -- dbType: ${dbType}`,
       );
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 interface ExportPayload {
@@ -629,7 +629,7 @@ ipcMain.handle(
     } finally {
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 interface dummyDataRequestPayload {
@@ -656,14 +656,14 @@ ipcMain.handle(
       // Retrieves the Primary Keys and Foreign Keys for all the tables
       const tableInfo: ColumnObj[] = await db.getTableInfo(
         data.tableName,
-        dbType
+        dbType,
       ); // passed in dbType to second argument
       // console.log('tableInfo in generate-dummy-data', tableInfo); // working
 
       // generate dummy data
       const dummyArray: DummyRecords = await generateDummyData(
         tableInfo,
-        data.rows
+        data.rows,
       );
       // console.log('dummyArray output: ', dummyArray)
       // generate insert query string to insert dummy records
@@ -711,10 +711,10 @@ ipcMain.handle(
 
       logger(
         "Sent 'db-lists and feedback' from 'generate-dummy-data'",
-        LogType.SEND
+        LogType.SEND,
       );
     }
-  }
+  },
 );
 
 // handle initialization of a new schema from frontend (newSchemaView)
@@ -728,7 +728,7 @@ ipcMain.handle(
     logger(
       `Received 'initialize-db' of dbType: ${dbType} and: `,
       LogType.RECEIVE,
-      payload
+      payload,
     );
     event.sender.send('async-started');
     const { newDbName } = payload;
@@ -758,7 +758,7 @@ ipcMain.handle(
     } finally {
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 // handle updating schemas from the frontend (newSchemaView)
@@ -795,7 +795,7 @@ ipcMain.handle(
 
       event.sender.send('async-complete');
     }
-  }
+  },
 );
 
 // Generate and run query from react-flow ER diagram
@@ -805,7 +805,7 @@ ipcMain.handle(
     logger(
       `Received 'ertable-schemaupdate' with dbType: ${dbType}, dbName: ${dbName}, and backendObj: `,
       LogType.RECEIVE,
-      backendObj
+      backendObj,
     );
     // send notice to front end that schema update has started
     event.sender.send('async-started');
@@ -849,8 +849,22 @@ ipcMain.handle(
 
       logger(
         "Sent 'db-lists and feedback' from 'ertable-schemaupdate'",
-        LogType.SEND
+        LogType.SEND,
       );
     }
-  }
+  },
 );
+
+// ipc handler for when the showOpenDialog occurs currently linked to ConfigView.tsx.
+// TODO: fix the type of any of the focused window. I cheated it.
+ipcMain.handle('showOpenDialog', async function (event, options) {
+  const focusedWindow: any = BrowserWindow.fromWebContents(event.sender);
+  const result = await dialog.showOpenDialog(focusedWindow, options);
+  return result.filePaths[0];
+});
+
+ipcMain.handle('showSaveDialog', async function (event, options) {
+  const focusedWindow: any = BrowserWindow.fromWebContents(event.sender);
+  const result = await dialog.showSaveDialog(focusedWindow, options);
+  return result.filePath;
+});
diff --git a/backend/main.ts b/backend/main.ts
@@ -36,7 +36,7 @@ process.on('uncaughtException', (error) => {
   console.error('Uncaught Exception:', error);
 });
 
-// this creates the new browserWindow. Had to delete remoteprocess from webPrefences since it was deprecated. It allowed driect access to remote objects and APIs in this main process, so instead we implement ipcRenderer.invoke
+// this creates the new browserWindow. Had to delete remoteprocess from webPrefences since it was deprecated. It allowed driect access to remote objects and APIs in this main process, so instead we implement ipcRenderer.invoke. WebPreferences nodeintegration and contextisolation are set respectively to ensure api's can be used throughout the entire program without contextbridging
 function createWindow() {
   mainWindow = new BrowserWindow({
     width: 1800,
@@ -45,7 +45,7 @@ function createWindow() {
     minHeight: 720,
     title: 'SeeQR',
     show: false,
-    webPreferences: { nodeIntegration: false },
+    webPreferences: { nodeIntegration: true, contextIsolation: false },
     icon: path.join(__dirname, '../../assets/logo/seeqr_dock.png'),
   });
 

diff --git a/frontend/components/Dialog/ConfigView.tsx b/frontend/components/Dialog/ConfigView.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ipcMain, dialog, BrowserWindow } from 'electron';
+import { ipcRenderer, IpcRendererEvent } from 'electron';
 import {
   Box,
   Tab,
@@ -93,19 +93,27 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
   });
 
   // function to store user-selected file path in state
-  const designateFile = function (path, setPath) {
-    const WIN = remote.getCurrentWindow();
-
+  // REVIEW:
+  const designateFile = async function (path, setPath) {
     const options = {
       title: 'Select SQLite File',
       defaultPath: '',
       buttonLabel: 'Select File',
       filters: [{ name: 'db', extensions: ['db'] }],
     };
-
-    dialog.showOpenDialog(WIN, options).then((res: any) => {
-      setPath({ path: res.filePaths[0] });
-    });
+    try {
+      const selectedFilePath = await ipcRenderer.invoke(
+        'showOpenDialog',
+        options,
+      );
+      setPath({ path: selectedFilePath });
+    } catch (err) {
+      sendFeedback({
+        type: 'error',
+        message: 'Error at designate file.',
+      });
+      console.log(`error at the designate file in ConfigView.tsx ${err}`);
+    }
   };
 
   // Function to make StyledTextFields and store them in inputFieldsToRender state
@@ -120,7 +128,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
           onClick={() => designateFile(dbTypeFromState, setDbTypeFromState)}
         >
           Set db file location
-        </StyledButton>
+        </StyledButton>,
       );
     } else {
       // Get key value pairs from passed in database connection info from state
@@ -174,7 +182,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
             }}
             // Spread special password props if they exist
             {...styledTextFieldProps}
-          />
+          />,
         );
       });
     }