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 = {
haveperm: false,
connected: false
connected: false,
socket: io.connect()
}
}
componentDidMount() {
this.connect();
this.checksupport();
}
componentWillUnmount() {
this.setState({socket: this.state.socket.removeAllListeners()});
}
connect() {
let socket = io.connect();
let socket = this.state.socket;
let room = this.props.urlid;
@ -31,10 +37,30 @@ export default class NotifPage extends React.Component {
});
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) {
if (permission === 'granted') {
this.setState({haveperm: true});
@ -42,13 +68,9 @@ export default class NotifPage extends React.Component {
}
render() {
let supported = ("Notification" in window);
if (supported) {
Notification.requestPermission(permission => {
this.checkperm(permission);
}.bind(this));
}
let supported = this.state.supported;
let haveperm = this.state.haveperm;
let connected = this.state.connected;
return (
<div className="container">
@ -58,7 +80,7 @@ export default class NotifPage extends React.Component {
{ supported || <div className="error"><p>
<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
</p></div>}
{ !this.state.haveperm && supported && <div>
{ !haveperm && supported && <div>
<p>
Please give this site permission to display notifications.
<br />
@ -67,14 +89,14 @@ export default class NotifPage extends React.Component {
</a>
</p>
</div>}
{ !this.state.connected && supported && <div className="error">
{ !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>}
{ 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.
</p>}
</div>