Notica/src/ui/NotifPage.js

'use strict';
import React from 'react';
import io from 'socket.io-client';
import { Router, Route, Link } from 'react-router';
import QRCode from 'qrcode.react';

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

		this.state = {
			supported: false,
			registration: null,
			haveperm: false,
			connected: false,
			socket: io.connect()
		}
	}

	componentDidMount() {
		this.connect();
		this.checksupport();
	}

	componentWillUnmount() {
		this.setState({socket: this.state.socket.removeAllListeners()});
	}

	connect() {
		let socket = this.state.socket;

		let room = this.props.urlid;

		socket.on('connect', () => {
			socket.emit('room', room);
			this.setState({connected: true});

			socket.on('disconnect', () => {
				this.setState({connected: false});
			});
		});

		socket.on('message', (data) => {
			console.log("Notification: " + data);
			this.sendNotification(data);
		});
	}

	sendNotification(data) {
		let title = data || 'Received a notification!';

		let options = {
			body: 'Notification from Notica',
			icon: 'img/icon.png',
			iconUrl: 'img/icon.png',
			vibrate: [200, 100, 200]
		};

		if (this.state.registration) {
			console.log(this.state.registration.showNotification(title, options));
		} else {
			console.log(new Notification(title, options));
		}
	}

	checksupport() {
		let supported = ('Notification' in window);
		this.setState({supported: supported});

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

				try {
					navigator.serviceWorker.register('/js/sw.js').then((reg) => {
						this.setState({registration: reg});
					});
				} catch (e) { // If we are on a browser without serviceWorker
					this.setState({registration: false});
				}
			}.bind(this));
		}
	}

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

	render() {
		let supported = this.state.supported;
		let haveperm = this.state.haveperm;
		let connected = this.state.connected;
		let urlid = this.props.urlid;

		return (
			<div className="container">
				<div className="row">
					<div className="twelve columns">
						<h4>Notification Page</h4>
						{ supported || <div className="error"><p>
							<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
						</p></div>}
						{ !haveperm && supported && <div>
							<p>
								Please give this site permission to display notifications.
								<br />
								<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
									Check Again
								</a>
							</p>
						</div>}
						{ !connected && supported && <div className="error">
							<p>
								<i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server.
								<br />
								Attempting to reconnect...
							</p>
						</div>}
						{ haveperm && connected && supported && <p>
							<i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications.
						</p>}
					</div>
				</div>
				<div className="row">
					<div className="six columns">
						<h4>Examples</h4>
						<p>Here are some different ways to use Notica:</p>
						<p>
							Just run it from your terminal: <br />
							<code>
								$ notica
							</code>
						</p>
						<p>
							Add a custom message: <br />
							<code>
								$ notica Hello world!
							</code>
						</p>
						<p>
							Get an alert when a command finishes: <br />
							<code>
								$ sudo apt-get update; notica Done!
							</code>
						</p>
						<p>
							Get an alert when a command succeeds: <br />
							<code>
								$ make all && notica Success!
							</code>
						</p>
						<p>
							Get an alert when a command fails: <br />
							<code>
								$ make all || notica Failed!
							</code>
						</p>
					</div>
					<div className="six columns">
						<h4>Tips</h4>
						<p>Bookmark this page! It is unique to the function in your <code className="smallcode">.bashrc</code> file.
						Notifications will be sent to all open pages with the same ID code in the URL.</p>
						<p>
							Use quotes on messages with special characters: <br />
							<code>
								$ notica "This is awesome :)"
							</code>
						</p>
						<p>
							Need to set Notica up again? <br />
							<Link to={'/home/' + urlid}>
								Click here to go back to the instructions.
							</Link>
						</p>
						<p>
							Open this page on your phone:
							<center><QRCode value={'https://notica.us/' + urlid} /></center>
						</p>
					</div>
				</div>
			</div>
		);
	}
}