Revitalizing the title bar

Until now, our title bar was not really useful. Thanks to the Photon framework, we can already use it as a handle to drag and drop the window across the viewport, yet we are missing windowing actions such as close, maximize, and restore window.

Let's implement them:

./app/js/Components/Header.jsx

import { remote } from "electron"; 
const win = remote.getCurrentWindow(); 

export default class 

Header extends React.Component { 
//.... 
 onRestore = () => { 
    win.restore(); 
  } 

  onMaximize = () => { 
    win.maximize(); 
  } 

  onClose = () => { 
    win.close(); 


  } 
//... 
} 

Note

We do not go with methods, with properties keeping anonymous functions bound to the object scope. This trick is possible, thanks to babel-plugin-transform-class-properties, which we included in the manifest and Webpack configuration in Chapter 3, Creating a Chat System with Electron and React – Planning, Design, and Development.

We extended the component with handlers to...