✨ dialog working thru IPC

whoisryosuke · Dec 28, 2021 · 86cb4f7 · 86cb4f7
1 parent 75f2559
commit 86cb4f7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -11,7 +11,7 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { app, BrowserWindow, shell, ipcMain, dialog } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -33,6 +33,11 @@ ipcMain.on('ipc-example', async (event, arg) => {
   event.reply('ipc-example', msgTemplate('pong'));
 });
 
+ipcMain.handle('dialog:open', async (_, args) => {
+  const result = await dialog.showOpenDialog({ properties: ['openFile'] });
+  return result;
+});
+
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();

diff --git a/src/main/preload.js b/src/main/preload.js
@@ -1,6 +1,7 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('electron', {
+  showDialog: async () => ipcRenderer.invoke('dialog:open'),
   ipcRenderer: {
     myPing() {
       ipcRenderer.send('ipc-example', 'ping');

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -3,25 +3,30 @@ import icon from '../../assets/icon.svg';
 import './App.css';
 
 const Hello = () => {
+  console.log('electron window', window.electron);
+  console.log('lol');
+
+  const ping = () => {
+    // window.electron.ipcRenderer.once('ipc-example', (arg) => {
+    //   // eslint-disable-next-line no-console
+    //   console.log(arg);
+    // });
+    // window.electron.ipcRenderer.myPing();
+    window.electron.showDialog();
+  };
   return (
     <div>
       <div className="Hello">
         <img width="200px" alt="icon" src={icon} />
       </div>
       <h1>electron-react-boilerplate</h1>
       <div className="Hello">
-        <a
-          href="https://electron-react-boilerplate.js.org/"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button type="button">
-            <span role="img" aria-label="books">
-              📚
-            </span>
-            Read our docs
-          </button>
-        </a>
+        <button type="button" onClick={ping}>
+          <span role="img" aria-label="books">
+            📚
+          </span>
+          Read our docs
+        </button>
         <a
           href="https://github.com/sponsors/electron-react-boilerplate"
           target="_blank"