enabled remote access to dialog and electron utilities in renderer process from react component

src/components/Stepper/GlobalConfig.js

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
@@ -15,7 +15,6 @@ import Select from "@material-ui/core/Select";
 import Input from "@material-ui/core/Input";
 import Slider from "@material-ui/core/Slider";
 import { useConfig } from "../../hooks/useConfig";
-
 import Link from "@material-ui/core/Link";
 
 const styles = {
@@ -127,7 +126,7 @@ export default function GlobalConfig() {
             <Button
               variant="contained"
               component="label"
-              color={runState.genome === "" ? "" : "primary"}
+              color={runState.genome === "" ? "default" : "primary"}
             >
               {runState.genome === ""
                 ? "upload genome"

src/components/Table/NewTable.js

@@ -447,7 +447,7 @@ export default function NewTable() {
                         <Button
                           variant="contained"
                           component="label"
-                          color={unit.fq1 === "" ? "" : "primary"}
+                          color={unit.fq1 === "" ? "default" : "primary"}
                         >
                           {unit.fq1 === "" ? "Forward" : "Added"}
                           <input
@@ -465,7 +465,7 @@ export default function NewTable() {
                         <Button
                           variant="contained"
                           component="label"
-                          color={unit.fq2 === "" ? "" : "primary"}
+                          color={unit.fq2 === "" ? "default" : "primary"}
                         >
                           {unit.fq2 === "" ? "Reverse" : "Added"}
                           <input

src/components/Table/Table.js

@@ -3,9 +3,15 @@ import { DataGrid } from "@material-ui/data-grid";
 import axios from "axios";
 import Grid from "@material-ui/core/Grid";
 import Container from "@material-ui/core/Container";
+const electron = window.require("electron");
+const remote = electron.remote;
+const { BrowserWindow, dialog, Menu } = remote;
+// console.log(
+//   dialog.showOpenDialog({ properties: ["openFile", "multiSelections"] })
+// );
 
 const columns = [
-  { field: "id", headerName: "ID", width: 70 },
+  { field: "_id", headerName: "ID", width: 70 },
   { field: "genome", headerName: "Genome", width: 130 },
   { field: "outdir", headerName: "Output Directory", width: 130 },
   {
@@ -28,17 +34,30 @@ const rows = [
 ];
 
 export default function Table({ Copyright, classes, fixedHeightPaper }) {
-  const [data, setData] = useState({});
+  const [data, setData] = useState([]);
   useEffect(() => {
-    axios
-      .get("http://localhost:5000/api/runs/run")
-      .then((response) => setData(response.data));
+    const fetchData = async () => {
+      const result = await axios("http://localhost:5000/api/runs/run");
+
+      setData(result.data);
+    };
+
+    fetchData();
   }, []);
+  console.log(data[0]);
   return (
     <Container maxWidth="lg" className={classes.container}>
-      <Grid container spacing={3}>
-        <DataGrid rows={rows} columns={columns} pageSize={5} />
-      </Grid>
+      {data && (
+        <div style={{ height: 400, width: "100%" }}>
+          <DataGrid
+            rows={data}
+            getRowId={(row) => row._id}
+            columns={columns}
+            pageSize={5}
+            checkboxSelection
+          />
+        </div>
+      )}
     </Container>
   );
 }

src/main.js

 const { app, BrowserWindow } = require("electron");
 const path = require("path");
-// import installExtension, {
-//   REACT_DEVELOPER_TOOLS,
-// } from "electron-devtools-installer";
+import installExtension, {
+  REACT_DEVELOPER_TOOLS,
+} from "electron-devtools-installer";
 require("dotenv").config();
 console.log(process.env.PORT);
 const isDev = require("electron-is-dev");
@@ -41,20 +41,22 @@ const createWindow = () => {
     width: 1080,
     height: 720,
     webPreferences: {
-      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      nodeIntegration: true,
+      enableRemoteModule: true,
     },
   });
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+  console.log(MAIN_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
   if (isDev) {
     mainWindow.webContents.openDevTools();
   }
-  // installExtension(REACT_DEVELOPER_TOOLS)
-  //   .then((name) => console.log(`Added Extension:  ${name}`))
-  //   .catch((err) => console.log("An error occurred: ", err));
+  installExtension(REACT_DEVELOPER_TOOLS)
+    .then((name) => console.log(`Added Extension:  ${name}`))
+    .catch((err) => console.log("An error occurred: ", err));
 };
 
 // This method will be called when Electron has finished

src/preload.js

+window.dialog = require("electron").remote.dialog;

src/renderer.js

 import "./index.css";
+
 console.log(
   '👋 This message is being logged by "renderer.js", included via webpack'
 );