Require multiple elements not working as expected

I am making an app and I am creating a custom titlebar (so I have disabled the title bar that comes by default, obviously) and I am at the moment doing the buttons that closes and minimizes the window (there won’t be a maximize button).

Okay, I have the view ready and both button elements in the DOM have an addEventListener which minimizes the window if the minimize button is pressed, or creates a dialog to confirm if are you sure that you want to close the window if the close button is pressed.

Now, here is the problem:
To accomplish this, I need two elements, the dialog element and the getCurrentWindow function, then, knowing that, these are my resorts:

If I do

let remote = require(‘electron’).remote;

I can make the window to minimize, but I can’t create the dialog because I get an error saying showMessageBoxSync is not a function.

But, if I do

let dialog = require(‘electron’).remote;

I can make a dialog but I can’t make the window to minimize because I get an error saying window.minimize is not a function.

So I thought that I should get both at the same time like this

let { remote, dialog } = require(‘electron’).remote

would solve my problem, but with this, only the first element works. If the first element is “remote”, I get the window to be minimized, but the dialog doesn’t work, and viceversa, if “dialog” is first, then the dialog works, but I can’t make the window to minimize.

But I managed to solve it (at least my problem) with this code:

let remote = require(‘electron’).remote;
let dialog = require(‘electron’).remote.dialog;

And now, everything works perfectly, but my problem now is:
Is this the correct way to solve my problem? If not, how should I have done it? Here is my JS code.

let remote = require(‘electron’).remote;
let dialog = require(‘electron’).remote.dialog;

document.getElementById(“appMainMenuConfigBtn”).addEventListener(“click”, () => {
alert(“Config button”);
});

document.getElementById(“appMainMenuMinBtn”).addEventListener(“click”, () => {
remote.getCurrentWindow().minimize();
});

document.getElementById(“appMainMenuExitBtn”).addEventListener(“click”, () => {
let createdDialog = createDialog(“Closing CRTF”, [‘Yes’, ‘No’], 2, ‘Are you sure that you want to close Clash Royale Trade Finder?’);
if ( createdDialog === 0 ) {
remote.getCurrentWindow().close();
}
});

function createDialog ( titleDialog, buttonsDialog, defaultIdDialog, messageDialog ) {
let createdDialog = dialog.showMessageBoxSync(null, {
title: titleDialog,
buttons: buttonsDialog,
defaultId: defaultIdDialog,
message: messageDialog,
})
return createdDialog;
}

I made a mistake in the post. The big code should be displayed like this:

let remote = require(‘electron’).remote;
let dialog = require(‘electron’).remote.dialog;

And now, everything works perfectly, but my problem now is:
Is this the correct way to solve my problem? If not, how should I have done it? Here is my JS code.

let remote = require(‘electron’).remote;
let dialog = require(‘electron’).remote.dialog;

document.getElementById(“appMainMenuConfigBtn”).addEventListener(“click”, () => {
alert(“Config button”);
});

document.getElementById(“appMainMenuMinBtn”).addEventListener(“click”, () => {
remote.getCurrentWindow().minimize();
});

document.getElementById(“appMainMenuExitBtn”).addEventListener(“click”, () => {
let createdDialog = createDialog(“Closing CRTF”, [‘Yes’, ‘No’], 2, ‘Are you sure that you want to close Clash Royale Trade Finder?’);
if ( createdDialog === 0 ) {
remote.getCurrentWindow().close();
}
});

function createDialog ( titleDialog, buttonsDialog, defaultIdDialog, messageDialog ) {
let createdDialog = dialog.showMessageBoxSync(null, {
title: titleDialog,
buttons: buttonsDialog,
defaultId: defaultIdDialog,
message: messageDialog,
})
return createdDialog;
}