Merge pull request #877 from asmsuechan/add-realtime-info

Add RealtimeNotification

Author: kohei-takata

browser/components/RealtimeNotification.js

@@ -0,0 +1,55 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './RealtimeNotification.styl'
+
+const electron = require('electron')
+const { shell } = electron
+
+class RealtimeNotification extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      notifications: []
+    }
+  }
+
+  componentDidMount () {
+    this.fetchNotifications()
+  }
+
+  fetchNotifications () {
+    const notificationsUrl = 'https://raw.githubusercontent.com/BoostIO/notification/master/notification.json'
+    fetch(notificationsUrl)
+      .then(response => {
+        return response.json()
+      })
+      .then(json => {
+        this.setState({notifications: json.notifications})
+      })
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  render () {
+    const { notifications } = this.state
+    const link = notifications.length > 0
+      ? <a href={notifications[0].linkUrl}
+        onClick={(e) => this.handleLinkClick(e)}
+      >
+        {notifications[0].text}
+      </a>
+    : ''
+
+    return (
+      <div>{link}</div>
+    )
+  }
+}
+
+RealtimeNotification.propTypes = {}
+
+export default CSSModules(RealtimeNotification, styles)

browser/components/RealtimeNotification.styl

@@ -0,0 +1,2 @@
+.realtime-notification
+  font-size 1em

browser/main/StatusBar/index.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -59,7 +60,9 @@ class StatusBar extends React.Component {
           {Math.floor(config.zoom * 100)}%
         </button>
 
-        <div styleName='blank' />
+        <RealtimeNotification
+          styleName='realtime-notification'
+        />
 
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>