Ipc renderer patch

app/electron/MyEvents/events.js

@@ -0,0 +1 @@
+exports.MakeFileRequest = "Make-File";

app/electron/MyEvents/index.js

@@ -0,0 +1,78 @@
+const { MakeFileRequest } = require("./events");
+const newFile = require("./newFile");
+
+const validSendChannels = [MakeFileRequest];
+const validReceiveChannels = [MakeFileRequest];
+const { log } = console;
+const debug = true;
+
+// THis is in front end
+// logs will appear in dev tools console
+// This first filters channels / type of requests
+// and if valid, only then passes on to backend
+exports.preloadBindings = (ipcRenderer /* fs */) => {
+  return {
+    send: (channel, filename) => {
+      if (validSendChannels.includes(channel)) {
+        switch (channel) {
+          case MakeFileRequest:
+            if (debug) {
+              log(`requesting to make file '${filename}'`);
+            }
+
+            ipcRenderer.send(channel, {
+              filename,
+            });
+            break;
+          default:
+            break;
+        }
+      } else {
+        log(`Invalid channel ${channel}`);
+      }
+    },
+    onReceive: (channel, func) => {
+      if (validReceiveChannels.includes(channel)) {
+        // Deliberately strip event as it includes "sender"
+        ipcRenderer.on(channel, (/* event, */ args) => {
+          if (debug) {
+            switch (channel) {
+              case MakeFileRequest:
+                log(`received file name '${args.filename}'`);
+                break;
+              default:
+                break;
+            }
+          }
+          func(args);
+        });
+      }
+    },
+    clearRendererBindings: () => {
+      // Clears all listeners
+      if (debug) {
+        log(`clearing all ipcRenderer listeners.`);
+      }
+
+      for (let i = 0; i < validReceiveChannels.length; i += 1) {
+        ipcRenderer.removeAllListeners(validReceiveChannels[i]);
+      }
+    },
+  };
+};
+
+// This is in backend
+// The logs will appear in console where npm run dev is done
+// this checks if channel are valid as well and takes actual actions
+exports.mainBindings = (ipcMain /* , browserWindow, fs, mpc */) => {
+  ipcMain.on(MakeFileRequest, (/* IpcMainEvent, */ args) => {
+    if (debug) {
+      log(
+        `received a request to read store in electron main process.${JSON.stringify(
+          args
+        )}`
+      );
+      newFile(args.filename);
+    }
+  });
+};

app/electron/MyEvents/newFile.js

@@ -0,0 +1,8 @@
+const fs = require("fs");
+
+const { log } = console;
+module.exports = (filename) => {
+  log(`Calling my file function with filename ${filename}`);
+  log("Accessing fs :", fs.existsSync("./app/electron/my-functions"));
+  log("Exiting my file function");
+};

app/electron/main.js

@@ -16,6 +16,7 @@ const Store = require("secure-electron-store").default;
 const ContextMenu = require("secure-electron-context-menu").default;
 const path = require("path");
 const fs = require("fs");
+const MyEvents = require("./MyEvents");
 const Protocol = require("./protocol");
 const MenuBuilder = require("./menu");
 
@@ -101,6 +102,8 @@ async function createWindow() {
     ],
   });
 
+  MyEvents.mainBindings(ipcMain, win, fs, callback);
+
   // Load app
   if (isDev) {
     win.loadURL(selfHost);

app/electron/preload.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const i18nextBackend = require("i18next-electron-fs-backend");
 const Store = require("secure-electron-store").default;
 const ContextMenu = require("secure-electron-context-menu").default;
+const MyEvents = require("./MyEvents");
 
 // Create the electron store to be made available in the renderer process
 const store = new Store();
@@ -13,4 +14,5 @@ contextBridge.exposeInMainWorld("api", {
   i18nextElectronBackend: i18nextBackend.preloadBindings(ipcRenderer),
   store: store.preloadBindings(ipcRenderer, fs),
   contextMenu: ContextMenu.preloadBindings(ipcRenderer),
+  api: MyEvents.preloadBindings(ipcRenderer, fs),
 });

app/src/pages/welcome/welcome.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ROUTES from "Constants/routes";
 import { Link } from "react-router-dom";
+import {MakeFileRequest} from '../../../electron/MyEvents/events';
 import "./welcome.css";
 
 class Welcome extends React.Component {
@@ -9,6 +10,7 @@ class Welcome extends React.Component {
       <div id="welcome">
         <h1 className="header">
           Thank you for trying out the secure-electron-template!
+          <button onClick={()=>{window.api.api.send(MakeFileRequest,"My-New-Filename");}}>Check Console</button>
         </h1>
         <div>
           <Link to={ROUTES.MOTD}>View a sample of using the store.</Link><br />