Skip to content

Commit e5f6fc4

Browse files
StephWoodStephWood
committed
popUp refactor
1 parent 727ce6c commit e5f6fc4

File tree

4 files changed

+123
-102
lines changed

4 files changed

+123
-102
lines changed

‎main.js‎

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const {
1919
REDUX_DEVTOOLS,
2020
} = require("electron-devtools-installer");
2121
// Import Auto-Updater- Swell will update itself
22-
// const { autoUpdater } = require("electron-updater");
22+
const { autoUpdater } = require("electron-updater");
2323
// TouchBarButtons are our nav buttons(ex: Select All, Deselect All, Open Selected, Close Selected, Clear All)
2424
const { TouchBarButton, TouchBarSpacer } = TouchBar;
2525

@@ -41,7 +41,7 @@ const { createHttpLink } = require("apollo-link-http");
4141
const { ApolloLink } = require("apollo-link");
4242

4343
// proto-parser func for parsing .proto files
44-
const protoParserFunc = require('./src/client/protoParser.js');
44+
const protoParserFunc = require("./src/client/protoParser.js");
4545

4646
// require menu file
4747
require("./menu/mainMenu");
@@ -206,10 +206,10 @@ function createWindow() {
206206
webPreferences: {
207207
nodeIntegration: false,
208208
contextIsolation: true,
209-
enableRemoteModule: false,
209+
enableRemoteModule: false,
210210
sandbox: true,
211211
webSecurity: true,
212-
preload: path.resolve(__dirname, 'preload.js')
212+
preload: path.resolve(__dirname, "preload.js"),
213213
},
214214
icon: `${__dirname}/src/assets/icons/64x64.png`,
215215
});
@@ -280,8 +280,6 @@ function createWindow() {
280280
************** EVENT LISTENERS **********
281281
****************************************/
282282

283-
284-
285283
// app.on('ready') will be called when Electron has finished
286284
// initialization and is ready to create browser windows.
287285
// Some APIs can only be used after this event occurs.
@@ -305,10 +303,13 @@ app.on("window-all-closed", () => {
305303
}
306304
});
307305

308-
ipcMain.on('toMain', (e, args) => {
309-
console.log('received from ipcRenderer inside main: ', args);
310-
mainWindow.webContents.send('fromMain', `sending ${args} back to ipcRenderer`);
311-
})
306+
ipcMain.on("toMain", (e, args) => {
307+
console.log("received from ipcRenderer inside main: ", args);
308+
mainWindow.webContents.send(
309+
"fromMain",
310+
`sending ${args} back to ipcRenderer`
311+
);
312+
});
312313

313314
// Auto Updating Functionality
314315
const sendStatusToWindow = (text) => {
@@ -350,9 +351,9 @@ const sendStatusToWindow = (text) => {
350351
// // You could call autoUpdater.quitAndInstall(); immediately
351352
// autoUpdater.quitAndInstall();
352353
// });
353-
// ipcMain.on("quit-and-install", () => {
354-
// autoUpdater.quitAndInstall();
355-
// });
354+
ipcMain.on("quit-and-install", () => {
355+
autoUpdater.quitAndInstall();
356+
});
356357
// App page reloads when user selects "Refresh" from pop-up dialog
357358
ipcMain.on("fatalError", () => {
358359
console.log("received fatal error");
@@ -471,50 +472,55 @@ ipcMain.on("import-collection", (event, args) => {
471472
});
472473

473474
// ============ CONFIRM CLEAR HISTORY / RESPONSE COMMUNICATION ===============
474-
ipcMain.on('confirm-clear-history', (event) => {
475+
ipcMain.on("confirm-clear-history", (event) => {
475476
const opts = {
476477
type: "warning",
477478
buttons: ["Okay", "Cancel"],
478479
message: "Are you sure you want to clear history?",
479480
};
480481

481-
dialog.showMessageBox(null, opts)
482-
.then((response) => {
483-
console.log('response to clear-history : ', response)
484-
mainWindow.webContents.send('clear-history-response', response)
485-
})
486-
.catch(err => console.log(`Error on 'confirm-clear-history': ${err}`));
482+
dialog
483+
.showMessageBox(null, opts)
484+
.then((response) => {
485+
console.log("response to clear-history : ", response);
486+
mainWindow.webContents.send("clear-history-response", response);
487+
})
488+
.catch((err) => console.log(`Error on 'confirm-clear-history': ${err}`));
487489
});
488490

489-
ipcMain.on('import-proto', (event) => {
490-
console.log('import-proto event fired!!')
491+
ipcMain.on("import-proto", (event) => {
492+
console.log("import-proto event fired!!");
491493
let importedProto;
492-
dialog.showOpenDialog({
493-
buttonLabel : "Import Proto File",
494-
properties: ['openFile', 'multiSelections'],
495-
filters: [ { name: 'Protos', extensions: ['proto'] } ]
496-
})
497-
.then(filePaths => {
498-
if (!filePaths) return undefined;
499-
// read uploaded proto file & save protoContent in the store
500-
fs.readFile(filePaths.filePaths[0], 'utf-8', (err, file) => {
501-
// handle read error
502-
if (err) {
503-
return console.log('error reading file : ', err);
504-
};
505-
importedProto = file;
506-
protoParserFunc(importedProto)
507-
.then(protoObj => {
508-
console.log('finished with logic. about to send importedProto : ', importedProto, ' and protoObj : ', protoObj)
509-
mainWindow.webContents.send('proto-info', importedProto, protoObj)
510-
})
494+
dialog
495+
.showOpenDialog({
496+
buttonLabel: "Import Proto File",
497+
properties: ["openFile", "multiSelections"],
498+
filters: [{ name: "Protos", extensions: ["proto"] }],
499+
})
500+
.then((filePaths) => {
501+
if (!filePaths) return undefined;
502+
// read uploaded proto file & save protoContent in the store
503+
fs.readFile(filePaths.filePaths[0], "utf-8", (err, file) => {
504+
// handle read error
505+
if (err) {
506+
return console.log("error reading file : ", err);
507+
}
508+
importedProto = file;
509+
protoParserFunc(importedProto).then((protoObj) => {
510+
console.log(
511+
"finished with logic. about to send importedProto : ",
512+
importedProto,
513+
" and protoObj : ",
514+
protoObj
515+
);
516+
mainWindow.webContents.send("proto-info", importedProto, protoObj);
517+
});
518+
});
519+
})
520+
.catch((err) => {
521+
console.log(err);
511522
});
512-
})
513-
.catch(err => {
514-
console.log(err);
515-
})
516-
517-
})
523+
});
518524

519525
// ipcMain listener that
520526
ipcMain.on("http1-fetch-message", (event, arg) => {

‎preload.js‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1-
const { ipcRenderer, contextBridge } = require('electron');
1+
const { ipcRenderer, contextBridge } = require("electron");
22

3-
contextBridge.exposeInMainWorld(
4-
'api', {
5-
send: (channel, data) => {
6-
// allowlist channels
7-
const allowedChannels = ['toMain', 'confirm-clear-history', 'import-proto' ];
8-
if (allowedChannels.includes(channel)) {
9-
ipcRenderer.send(channel, data);
10-
}
11-
},
12-
receive: (channel, cb) => {
13-
console.log('listening on channel : ', channel)
14-
// allowlist channels
15-
const allowedChannels = ['fromMain', 'add-collection', 'clear-history-response', 'proto-info'];
16-
if (allowedChannels.includes(channel)){
17-
ipcRenderer.on(channel, (event, ...args) => cb(...args));
18-
}
19-
},
20-
}
21-
)
3+
contextBridge.exposeInMainWorld("api", {
4+
send: (channel, data) => {
5+
// allowlist channels
6+
const allowedChannels = [
7+
"toMain",
8+
"confirm-clear-history",
9+
"import-proto",
10+
"quit-and-install",
11+
];
12+
if (allowedChannels.includes(channel)) {
13+
ipcRenderer.send(channel, data);
14+
}
15+
},
16+
receive: (channel, cb) => {
17+
console.log("listening on channel : ", channel);
18+
// allowlist channels
19+
const allowedChannels = [
20+
"fromMain",
21+
"add-collection",
22+
"clear-history-response",
23+
"proto-info",
24+
"message",
25+
];
26+
if (allowedChannels.includes(channel)) {
27+
ipcRenderer.on(channel, (event, ...args) => cb(...args));
28+
}
29+
},
30+
});

‎src/client/components/containers/App.jsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import React, { Component } from 'react';
2-
import '../../../assets/style/App.scss';
3-
const { api } = window;
1+
import React, { Component } from "react";
2+
import "../../../assets/style/App.scss";
3+
const { api } = window;
44
// import ContentsContainer from './ContentsContainer.jsx';
55
// import ReqResCtrl from '../../controllers/reqResController';
6-
import SidebarContainer from './SidebarContainer.jsx';
7-
// import UpdatePopUpContainer from './UpdatePopUpContainer.jsx';
8-
import historyController from '../../controllers/historyController';
9-
import collectionsController from '../../controllers/collectionsController';
6+
import SidebarContainer from "./SidebarContainer.jsx";
7+
import UpdatePopUpContainer from "./UpdatePopUpContainer.jsx";
8+
import historyController from "../../controllers/historyController";
9+
import collectionsController from "../../controllers/collectionsController";
1010
// const EventEmitter = require('events');
1111
// const {dialog} = require('electron').remote
1212
class App extends Component {
1313
constructor(props) {
1414
super(props);
1515
}
1616

17-
componentDidMount() {// This file will listen on all of these channels(selectAll, deselectAll, etc) for any communication from the main.js file(aka the main process)
17+
componentDidMount() {
18+
// This file will listen on all of these channels(selectAll, deselectAll, etc) for any communication from the main.js file(aka the main process)
1819
// ipcRenderer.send('check-for-update');
1920
// api.send('check-for-update')
2021
// ipcRenderer.on('selectAll', ReqResCtrl.selectAllReqRes); // if the selectAll touchbar button was clicked (then run this method called selectAllReqRes) that is located in the connectionController...likewise for the rest
@@ -46,15 +47,14 @@ class App extends Component {
4647

4748
historyController.getHistory();
4849
collectionsController.getCollections();
49-
5050
}
5151

5252
render() {
53-
api.receive('fromMain', (data) => console.log(data));
54-
api.send('toMain', 'MEAT WITH SAUCE')
53+
api.receive("fromMain", (data) => console.log(data));
54+
api.send("toMain", "MEAT WITH SAUCE");
5555
return (
5656
<div id="app">
57-
{/* <UpdatePopUpContainer /> */}
57+
<UpdatePopUpContainer />
5858
<SidebarContainer />
5959
{/* <ContentsContainer /> */}
6060
</div>

‎src/client/components/containers/UpdatePopUpContainer.jsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,65 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { ipcRenderer } from 'electron';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
// import { ipcRenderer } from 'electron';
4+
const { api } = window;
45

5-
const mapDispatchToProps = dispatch => ({});
6+
const mapDispatchToProps = (dispatch) => ({});
67

78
class UpdatePopUpContainer extends Component {
89
constructor(props) {
910
super(props);
1011
this.state = {
1112
show: false,
12-
message: '',
13+
message: "",
1314
};
1415
this.toggleShow = this.toggleShow.bind(this);
1516
this.handleUpdateClick = this.handleUpdateClick.bind(this);
1617
}
1718

1819
componentDidMount() {
19-
ipcRenderer.on('message', (e, text) => {
20+
api.receive("message", (e, text) => {
2021
this.setState({ show: true, message: text });
2122
});
2223
}
2324

2425
toggleShow() {
2526
this.setState({
2627
show: !this.state.show,
27-
})
28+
});
2829
}
2930

3031
handleUpdateClick() {
3132
this.toggleShow();
32-
ipcRenderer.send('quit-and-install');
33+
// ipcRenderer.send('quit-and-install');
34+
api.send("quit-and-install");
3335
}
3436

3537
render() {
36-
37-
return this.state.show
38-
? (
39-
<div className='update_popup'>
38+
return this.state.show ? (
39+
<div className="update_popup">
4040
<p>{this.state.message}</p>
41-
{this.state.message === 'Update downloaded.' &&
41+
{this.state.message === "Update downloaded." && (
4242
<>
43-
<p class="updateMessage">Do you want to restart and install now? <br /> (If not, will auto-install on restart.)</p>
44-
<button className='update popup-btn' onClick={this.handleUpdateClick}>Update</button>
43+
<p class="updateMessage">
44+
Do you want to restart and install now? <br /> (If not, will
45+
auto-install on restart.)
46+
</p>
47+
<button
48+
className="update popup-btn"
49+
onClick={this.handleUpdateClick}
50+
>
51+
Update
52+
</button>
4553
</>
46-
}
47-
<button className='dismiss popup-btn' onClick={this.toggleShow}>
54+
)}
55+
<button className="dismiss popup-btn" onClick={this.toggleShow}>
4856
Dismiss
4957
</button>
5058
</div>
51-
)
52-
: <></>
59+
) : (
60+
<></>
61+
);
5362
}
5463
}
5564

56-
export default connect(
57-
null,
58-
mapDispatchToProps,
59-
)(UpdatePopUpContainer);
65+
export default connect(null, mapDispatchToProps)(UpdatePopUpContainer);

0 commit comments

Comments
 (0)