tanner/Notica
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customize notifications, add icon, and don't change state when unmounted

Browse Source
This commit is contained in:
Tanner Collin 2016-12-24 19:29:24 -07:00
parent 71598b8d76
commit edf3843ee5
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

48
src/ui/NotifPage.js
View File

@ -8,16 +8,22 @@ export default class NotifPage extends React.Component {
this.state = { this.state = {
haveperm: false, haveperm: false,
connected: false connected: false,
socket: io.connect()
} }
} }
componentDidMount() { componentDidMount() {
this.connect(); this.connect();
this.checksupport();
}
componentWillUnmount() {
this.setState({socket: this.state.socket.removeAllListeners()});
} }
connect() { connect() {
let socket = io.connect(); let socket = this.state.socket;
let room = this.props.urlid; let room = this.props.urlid;
@ -31,10 +37,30 @@ export default class NotifPage extends React.Component {
}); });
socket.on('message', (data) => { socket.on('message', (data) => {
new Notification(data); new Notification(
data || 'Received a notification!',
{
body: 'Notification from Notica',
badge: 'assets/img/icon.png',
icon: 'assets/img/icon.png',
image: 'assets/img/icon.png',
vibrate: 200
}
);
}); });
} }
checksupport() {
let supported = ('Notification' in window);
this.setState({supported: supported});
if (supported) {
Notification.requestPermission(permission => {
this.checkperm(permission);
}.bind(this));
}
}
checkperm(permission) { checkperm(permission) {
if (permission === 'granted') { if (permission === 'granted') {
this.setState({haveperm: true}); this.setState({haveperm: true});
@ -42,13 +68,9 @@ export default class NotifPage extends React.Component {
} }
render() { render() {
let supported = ("Notification" in window); let supported = this.state.supported;
let haveperm = this.state.haveperm;
if (supported) { let connected = this.state.connected;
Notification.requestPermission(permission => {
this.checkperm(permission);
}.bind(this));
}
return ( return (
<div className="container"> <div className="container">
@ -58,7 +80,7 @@ export default class NotifPage extends React.Component {
{ supported || <div className="error"><p> { supported || <div className="error"><p>
<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications. <i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
</p></div>} </p></div>}
{ !this.state.haveperm && supported && <div> { !haveperm && supported && <div>
<p> <p>
Please give this site permission to display notifications. Please give this site permission to display notifications.
<br /> <br />
@ -67,14 +89,14 @@ export default class NotifPage extends React.Component {
</a> </a>
</p> </p>
</div>} </div>}
{ !this.state.connected && supported && <div className="error"> { !connected && supported && <div className="error">
<p> <p>
<i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server. <i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server.
<br /> <br />
Attempting to reconnect... Attempting to reconnect...
</p> </p>
</div>} </div>}
{ this.state.haveperm && this.state.connected && supported && <p> { haveperm && connected && supported && <p>
<i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications. <i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications.
</p>} </p>}
</div> </div>