'use strict';
import React from 'react';
import io from 'socket.io-client';

export default class NotifPage extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			haveperm: false
		}
	}

	componentDidMount() {
		let socket = io.connect();

		let room = this.props.urlid;

		socket.on('connect', () => {
			socket.emit('room', room);
		});

		socket.on('message', (data) => {
			new Notification(data);
		});
	}

	checkperm(permission) {
		if (permission === 'granted') {
			this.setState({haveperm: true});
		}
	}

	render() {
		let supported = ("Notification" in window);

		if (supported) {
			Notification.requestPermission(permission => {
				this.checkperm(permission);
			}.bind(this));
		}

		return (
			<div className="container">
				<div className="row">
					<div className="twelve columns">
						<h4>Notification Page</h4>
						{ supported || <div className="error"><p>
							Error: This browser does not support desktop notifications :(
						</p></div>}
						{ !this.state.haveperm && supported && <div>
							<p>
								Please give this site permission to display notifications.
							</p>
							<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
								Check Again
							</a>
						</div>}
						{ this.state.haveperm && supported && <p>
							This page is now monitoring for notifications.
						</p>}
					</div>
				</div>
			</div>
		);
	}
}

@@ -199,15 +199,36 @@
 erm:
+ false,%0A%09%09%09connected:
  false%0A
-
 %09%09%7D%0A
@@ -250,24 +250,59 @@
 idMount() %7B%0A
+%09%09this.connect();%0A%09%7D%0A%0A%09connect() %7B%0A
 %09%09let socket
@@ -382,16 +382,16 @@
 () =%3E %7B%0A
-
 %09%09%09socke
@@ -412,16 +412,135 @@
  room);%0A
+%09%09%09this.setState(%7Bconnected: true%7D);%0A%0A%09%09%09socket.on('disconnect', () =%3E %7B%0A%09%09%09%09this.setState(%7Bconnected: false%7D);%0A%09%09%09%7D);%0A
 %09%09%7D);%0A%0A%09
@@ -1460,35 +1460,281 @@
 %09%09%09%09%09%09%7B 
-this.state.haveperm
+!this.state.connected && supported && %3Cdiv className=%22error%22%3E%0A%09%09%09%09%09%09%09%3Cp%3E%0A%09%09%09%09%09%09%09%09Error: Unable to connect to the Notica server :(%0A%09%09%09%09%09%09%09%3C/p%3E%0A%09%09%09%09%09%09%09%3Cp%3E%0A%09%09%09%09%09%09%09%09Attempting to reconnect...%0A%09%09%09%09%09%09%09%3C/p%3E%0A%09%09%09%09%09%09%3C/div%3E%7D%0A%09%09%09%09%09%09%7B this.state.haveperm && this.state.connected
  && supp
@@ -1770,12 +1770,8 @@
  is 
-now 
 moni

Add connection error checking to notification page