added redux devTools, working on adding react devTools

Author: stephenhyang

app/context/ApplicationContext.tsx

@@ -40,6 +40,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
    */
   // v10: Invoked by connectToDB, passing in app (card title)
   const fetchServicesNames = useCallback((application: string) => {
+
+    console.log({application});
     // console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
     // console.log('app when fetch services name: ', application);
     ipcRenderer.send('servicesRequest');
@@ -68,6 +70,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {
+      console.log({data});
       if(data === true) {
         fetchServicesNames(application);
       } else {

app/context/DashboardContext.tsx

@@ -61,7 +61,7 @@ const DashboardContextProvider = React.memo((props: any) => {
       JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
-    // console.log('the current application that was added is : ', result);
+    console.log('the current application that was added is : ', result);
   }, []);
 
   const addAwsApp = useCallback((awsFields: AwsFields) => {

electron/Main.ts

@@ -1,15 +1,19 @@
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow, ipcMain, session } from 'electron';
 import './routes/dashboard';
 import { clearGuestSettings } from './routes/dashboard';
 import './routes/data';
 import './routes/cloudbased';
 import path from 'path';
+import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'
 
 // Declare variable to be used as the application window
 let win: Electron.BrowserWindow;
 
 app.commandLine.appendSwitch('remote-debugging-port', '9222');
 
+// Path to reactDevTools
+const reactDevToolsPath = path.join(__dirname, '../node_modules/react-devtools');
+
 /**
  * @desc createWindow sets up the environment of the window (dimensions, port, initial settings)
  */
@@ -56,9 +60,32 @@ const createWindow = () => {
   });
 };
 
+const addDevTools = async () => {
+  // await installExtension(REACT_DEVELOPER_TOOLS, { loadExtensionOptions: { allowFileAccess: true }})
+  //     .then((name) => console.log(`Added Extension:  ${name}`))
+  //     .catch((err) => console.log('An error occurred: ', err));
+
+  await installExtension(REDUX_DEVTOOLS)
+      .then((name) => console.log(`Added Extension:  ${name}`))
+      .catch((err) => console.log('An error occurred: ', err));
+};
+
+app.whenReady().then(async () => {
+  await addDevTools();
+  
+  await session.defaultSession.loadExtension(reactDevToolsPath);
+  // devtools extensions
+});
 // Invoke the createWindow function when Electron application loads
 app.on('ready', createWindow);
 
+// Loads reactDevTools extension
+// app.whenReady().then(async () => {
+//   console.log(reactDevToolsPath);
+//   await session.defaultSession.loadExtension(reactDevToolsPath);
+//   console.log({reactDevToolsPath})
+// });
+
 // Quits application when all windows are closed
 app.on('window-all-closed', () => {
   app.quit();

electron/routes/data.ts

@@ -84,7 +84,7 @@ ipcMain.on('servicesRequest', async (message: Electron.IpcMainEvent) => {
     // console.log('Hi, inside data.ts line 97 - servicesRequest. Fetching services...');
 
     // Mongo Database
-    // console.log('data.ts line 100 CurrentDataBase TYPE:', currentDatabaseType);
+    console.log('data.ts line 100 CurrentDataBase TYPE:', currentDatabaseType);
     if (currentDatabaseType === 'MongoDB' ) {
       // Get all documents from the services collection
       //>>>>>