React: convert functions to controls

src/renderer/views/header.js

@@ -1,39 +1,42 @@
-module.exports = Header
-
 const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-function Header (state) {
-  return (
-    <div className='header'>
-      {getTitle()}
-      <div className='nav left float-left'>
-        <i
-          className={'icon back ' + (state.location.hasBack() ? '' : 'disabled')}
-          title='Back'
-          onClick={dispatcher('back')}>
-          chevron_left
-        </i>
-        <i
-          className={'icon forward ' + (state.location.hasForward() ? '' : 'disabled')}
-          title='Forward'
-          onClick={dispatcher('forward')}>
-          chevron_right
-        </i>
+module.exports = class Header extends React.Component {
+  render () {
+    var loc = this.props.state.location
+    return (
+      <div key='header' className='header'>
+        {this.getTitle()}
+        <div className='nav left float-left'>
+          <i
+            className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
+            title='Back'
+            onClick={dispatcher('back')}>
+            chevron_left
+          </i>
+          <i
+            className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
+            title='Forward'
+            onClick={dispatcher('forward')}>
+            chevron_right
+          </i>
+        </div>
+        <div className='nav right float-right'>
+          {this.getAddButton()}
+        </div>
       </div>
-      <div className='nav right float-right'>
-        {getAddButton()}
-      </div>
-    </div>
-  )
+    )
+  }
 
-  function getTitle () {
+  getTitle () {
     if (process.platform !== 'darwin') return null
+    var state = this.props.state
     return (<div className='title ellipsis'>{state.window.title}</div>)
   }
 
-  function getAddButton () {
+  getAddButton () {
+    var state = this.props.state
     if (state.location.url() !== 'home') return null
     return (
       <i