getting multiple windows in electronJS which has the same browserwindow instance to display different results

Viewed 276

I am trying to send data from a main window to multiple windows in electronJS.

How my app works is there is a main window with many selections. On clicking each selection, a new window will open, and the window will show data that is related to that selection.

The problem I am facing is that the data does not persist and keeps getting updated each time I click a new selection.

For example:

Main window: selection A,B,C,D

clicks on A

New window 1 pops up, displays data for A

clicks on B

New window 2 pops up, displays data for B. New window 1 displays data for B.

clicks on C

New window 3 pops up, displays data for C. New window 1 & 2 displays data for C.

I think the issue has got to do with the browserwindow instance, but I'm not quite sure how to fix it, because I won't know how many new windows would be opened. Is there a way to 'freeze' the data at the point in time for each instance?

I include my code for both my renderers and main.js. Data is passed from renderer(index) to main and then to renderer(instrument)

main.js

// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 1000,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  ipcMain.on('open-instrument-window', (event, instrument) => {
    openNewInstrumentWindow()
  })


  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
const openNewInstrumentWindow = () => {
  const instrumentWindow = new BrowserWindow({
    width: 1000,
    height: 1000,
    title: 'Instrument details',
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
  instrumentWindow.loadFile('instrument.html')
  instrumentWindow.webContents.openDevTools()
// this is where the data is send over to the renderer instrument
  ipcMain.on('a', (event, payload) => {
    instrumentWindow.webContents.send('your-relayed-message', payload);
  });
}

this is my renderer index code. I have extracted the relevant portion. ipcrenderer is used twice, first to open the new window, second is to send the data over to renderer instrument.

const searchResults = document.getElementsByClassName('search-result');
        for (let i = 0; i < searchResults.length; i++) {
            searchResults[i].onclick = () => {
                ipcRenderer.send('open-instrument-window')
                ipcRenderer.send('a', instruments[i]);
            }
        }

this is my renderer instrument code.

const getInstrumentDetail = (exchange) => {
    axios.get(`http://url${exchange}`)
        .then(response => {

            let instrument = response.data;
            document.getElementById('instrument-name').innerHTML = instrument.name;
        })
}
ipcRenderer.on('your-relayed-message', (event, payload) => {
    getInstrumentDetail(payload['exchange']);
});

Appreciate any tips or guidance to point me in the right direction.

0 Answers
Related