How to send data back to container in electron-react-boilerplate?

[vjtc0n]

In electron-react-boilerplate, I follow your code to this:

ipcMain.on('reminders', (event, arg) => {
    console.log("Attempting to create notification");
    const notification = notifier.notify('Calendar', arg)
    notification.on('buttonClicked', (text, buttonIndex, options) => {
      if (text === 'Snooze') {
        console.log("Snooze!")
      }
      notification.close()
    })
  });

In my Container, I want to press a button, then showing the Notification, here is the code:

class ContainerA extends Component {
  onPress() {
    notifier('reminders', {
      message: 'Event begins in 10 minutes',
      icon: 'http://cl.ly/J49B/3951818241085781941.png',
      buttons: ['Dismiss', 'Snooze'],
      duration: 30000
    });
  }
  
  render() {}
}

How can my container know which buttons I pressed ?

Thank you!

[cgerikj]

notification.on('buttonClicked', (text, buttonIndex, options) =>

The text variable contains the text of the pressed button and buttonIndex contains its index (0, 1, etc)

[vjtc0n]

@cgerikj sorry, but I think you haven't understood my point.
Let me explain a little bit.

What I want is something like this:

onPress() {
   notifier('reminders', {
      message: 'Event begins in 10 minutes',
      icon: 'http://cl.ly/J49B/3951818241085781941.png',
      buttons: ['Dismiss', 'Snooze'],
     duration: 30000
  })
   .then((buttonIndex) => {
       // Now container knows what button is.
    });
}

Thanks.

[bayleedev]

Your container can call setState once the buttonIndex is returned.

onPress() {
   var notification = notifier('reminders', {
      message: 'Event begins in 10 minutes',
      icon: 'http://cl.ly/J49B/3951818241085781941.png',
      buttons: ['Dismiss', 'Snooze'],
     duration: 30000
  })
  notification.on('buttonClicked', (text, buttonIndex, options) => {
    this.setState({ buttonIndex }) // setState so you can use `buttonIndex` in `render()`
  })
}

Does this answer your question?

[vjtc0n]

@blainesch No :(

I'm using this example: https://github.com/Slapbox/electron-notification-demo

Could anyone tag Slapbox into this thread ?

[Nantris]

Just an FYI that notifications currently do not work in a packaged version of electron-react-boilerplate. I'm hoping to find a solution for this, but it may be quite a while

Edit: React-Electron-Boilerplate works just fine with this repo. You must add the dependency to your SECOND package.json, located within the app folder.

---

What you need to do is first:

notifier should be called from your main.js (in the boilerplate, main.development.js)

You may already know this, in Electron there are two processes, the main and the renderer

In short, what you need to do is communicate from the renderer, to the main process to tell it to create a notification. The way you communicate between the two is using ipc

See the documentation for ipcRenderer and ipcMain

Main.js

ipcMain.on('reminders', (event, arg) => {
  console.log(arg.extraArg1); // Will output 'If you need to pass additional data' -- (see extraArg1 below)
  const reminder = notifier.notify(arg.message, {
    message: arg.message,
    duration: arg.duration,
    icon: reminderIcon,
    buttons: ['Btn1', 'Btn2'],
  });
  reminder.on('buttonClicked', (text) => {
    if (text === 'Btn1') {
      mainWindow.webContents.send('reminders', { msg: 'example message1'});
      reminder.close();
    } else if (text === 'Btn2') {
      mainWindow.webContents.send('reminders', { msg: 'example message2' });
      reminder.close();
  });
});

Renderer side - Sending a request to execute the code to create a notification (See above)

const ipcNotifierOptions = {
          message: 'Your message'
          duration: '3600000',
          extraArg1: 'If you need to pass additional data'
        };
        ipcRenderer.send('reminders', ipcNotifierOptions);

Renderer side - Receiving the button clicked and taking an action

ipcRenderer.on('reminders', (evt, arg) => {
        if (arg.msg === 'Btn1') {
          // Do something
        } else if (arg.msg === 'Btn2') {
          // Do something else
        }
      });

I hope this helps. Let me know if anything is unclear, or possibly broken, as the above is a modified version of my code and not tested as written.

[vjtc0n]

@slapbox
I got this error:

Uncaught Exception:
TypeError: Cannot read property 'on' of undefined
    at EventEmitter.<anonymous> (/Users/vjtc0n/Desktop/reactjs-boilerplate/app/main.development.js:93:5)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)
    at WebContents.<anonymous> (/Users/vjtc0n/Desktop/reactjs-boilerplate/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:240:37)
    at emitTwo (events.js:106:13)
    at WebContents.emit (events.js:191:7)

I will really appreciate if you could make another example :(

[Nantris]

Sorry, missed an important point.

At the beginning of your files you'll need to import the ipcRenderer or ipcMain as they are used. import {ipcMain} from 'electron' for example

I also noticed I made a mistake in my code example:

change: rclReminder.on('buttonClicked', (text) => { to
reminder.on('buttonClicked', (text) => {

I think that should get you up and running! Let me know if it doesn't.