From e0ec45196447e7cd86bde34af0a6f1e35851b9f4 Mon Sep 17 00:00:00 2001
From: Yashodhan Joshi <54112038+YJDoc2@users.noreply.github.com>
Date: Sat, 6 Mar 2021 14:21:46 +0530
Subject: [PATCH] Add ipc renderer temp demo

---
 app/electron/MyEvents/events.js   |  1 +
 app/electron/MyEvents/index.js    | 77 +++++++++++++++++++++++++++++++
 app/electron/MyEvents/newFile.js  |  7 +++
 app/electron/main.js              |  3 ++
 app/electron/preload.js           |  2 +
 app/src/pages/welcome/welcome.jsx |  2 +
 6 files changed, 92 insertions(+)
 create mode 100644 app/electron/MyEvents/events.js
 create mode 100644 app/electron/MyEvents/index.js
 create mode 100644 app/electron/MyEvents/newFile.js

diff --git a/app/electron/MyEvents/events.js b/app/electron/MyEvents/events.js
new file mode 100644
index 0000000..949db2c
--- /dev/null
+++ b/app/electron/MyEvents/events.js
@@ -0,0 +1 @@
+exports.MakeFileRequest = "Make-File";
diff --git a/app/electron/MyEvents/index.js b/app/electron/MyEvents/index.js
new file mode 100644
index 0000000..a6b0606
--- /dev/null
+++ b/app/electron/MyEvents/index.js
@@ -0,0 +1,77 @@
+const { MakeFileRequest } = require("./events");
+const newFile = require("./newFile");
+const validSendChannels = [MakeFileRequest];
+const validReceiveChannels = [MakeFileRequest];
+
+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) {
+              console.log(`requesting to make file '${filename}'`);
+            }
+
+            ipcRenderer.send(channel, {
+              filename,
+            });
+            break;
+          default:
+            break;
+        }
+      } else {
+        console.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:
+                console.log(`received file name '${args.filename}'`);
+                break;
+              default:
+                break;
+            }
+          }
+          func(args);
+        });
+      }
+    },
+    clearRendererBindings: () => {
+      // Clears all listeners
+      if (debug) {
+        console.log(`clearing all ipcRenderer listeners.`);
+      }
+
+      for (let i = 0; i < validReceiveChannels.length; i++) {
+        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) {
+      console.log(
+        `received a request to read store in electron main process.${JSON.stringify(
+          args
+        )}`
+      );
+      newFile(args.filename);
+    }
+  });
+};
diff --git a/app/electron/MyEvents/newFile.js b/app/electron/MyEvents/newFile.js
new file mode 100644
index 0000000..8bd48ba
--- /dev/null
+++ b/app/electron/MyEvents/newFile.js
@@ -0,0 +1,7 @@
+const fs = require("fs");
+
+module.exports = (filename) => {
+  console.log(`Calling my file function with filename ${filename}`);
+  console.log("Accessing fs :", fs.existsSync("./app/electron/my-functions"));
+  console.log("Exiting my file function");
+};
diff --git a/app/electron/main.js b/app/electron/main.js
index 45a8402..2c1616b 100644
--- a/app/electron/main.js
+++ b/app/electron/main.js
@@ -11,6 +11,7 @@ const {
   REDUX_DEVTOOLS,
   REACT_DEVELOPER_TOOLS,
 } = require("electron-devtools-installer");
+const MyEvents = require("./MyEvents");
 const Protocol = require("./protocol");
 const MenuBuilder = require("./menu");
 const i18nextBackend = require("i18next-electron-fs-backend");
@@ -96,6 +97,8 @@ async function createWindow() {
     ],
   });
 
+  MyEvents.mainBindings(ipcMain, win, fs, callback);
+
   // Load app
   if (isDev) {
     win.loadURL(selfHost);
diff --git a/app/electron/preload.js b/app/electron/preload.js
index 0e24c68..d07e5aa 100644
--- a/app/electron/preload.js
+++ b/app/electron/preload.js
@@ -1,5 +1,6 @@
 const { contextBridge, ipcRenderer } = require("electron");
 const fs = require("fs");
+const MyEvents = require("./MyEvents");
 const i18nextBackend = require("i18next-electron-fs-backend");
 const Store = require("secure-electron-store").default;
 const ContextMenu = require("secure-electron-context-menu").default;
@@ -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),
 });
diff --git a/app/src/pages/welcome/welcome.jsx b/app/src/pages/welcome/welcome.jsx
index 059a62c..4bf1247 100644
--- a/app/src/pages/welcome/welcome.jsx
+++ b/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 />