Work on notifications utilities

src/pages/Settings.tsx

@@ -21,6 +21,7 @@ import {
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import {styles} from './PageLayout.styles';
 import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefaultTheme} from '../utilities/settings';
+import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
 import {themes} from '../types/HyperspaceTheme';
 
 interface ISettingsState {
@@ -38,7 +39,7 @@ class SettingsPage extends Component<any, ISettingsState> {
 
         this.state = {
             darkModeEnabled: getUserDefaultBool('darkModeEnabled'),
-            pushNotificationsEnabled: getUserDefaultBool('enablePushNotifications'),
+            pushNotificationsEnabled: canSendNotifications(),
             deleteNotificationsOnRead: getUserDefaultBool('clearNotificationsOnRead'),
             selectThemeName: getUserDefaultTheme().key,
             themeDialogOpen: false
@@ -145,15 +146,29 @@ class SettingsPage extends Component<any, ISettingsState> {
                 <Paper className={classes.pageListConstraints}>
                     <List>
                         <ListItem>
-                            <ListItemText primary="Enable push notifications"/>
+                            <ListItemText 
+                                primary="Enable push notifications"
+                                secondary={
+                                    browserSupportsNotificationRequests()?
+                                    "":
+                                    "Notifications aren't supported in this browser."
+                                }
+                            />
                             <ListItemSecondaryAction>
-                                <Switch checked={this.state.pushNotificationsEnabled} onChange={this.togglePushNotifications}/>
+                                <Switch 
+                                    checked={this.state.pushNotificationsEnabled} 
+                                    onChange={this.togglePushNotifications}
+                                    disabled={!browserSupportsNotificationRequests()}
+                                />
                             </ListItemSecondaryAction>
                         </ListItem>
                         <ListItem>
                             <ListItemText primary="Clear on read" secondary="Delete a notification once you read it"/>
                             <ListItemSecondaryAction>
-                                <Switch checked={this.state.deleteNotificationsOnRead} onChange={this.toggleClearNotifsOnRead}/>
+                                <Switch 
+                                    checked={this.state.deleteNotificationsOnRead} 
+                                    onChange={this.toggleClearNotifsOnRead}
+                                />
                             </ListItemSecondaryAction>
                         </ListItem>
                     </List>
@@ -165,7 +180,7 @@ class SettingsPage extends Component<any, ISettingsState> {
                         <ListItem>
                             <ListItemText primary="Configure on Mastodon" secondary="Configure your account settings on Mastodon"/>
                             <ListItemSecondaryAction>
-                                <IconButton>
+                                <IconButton href={(localStorage.getItem("baseurl") as string) + "/settings/preferences"} target="_blank" rel="noreferrer">
                                     <OpenInNewIcon/>
                                 </IconButton>
                             </ListItemSecondaryAction>

src/utilities/notifications.tsx

@@ -0,0 +1,54 @@
+import {getUserDefaultBool, setUserDefaultBool} from './settings';
+
+/**
+ * Get the person's permission to send notification requests.
+ */
+export function getNotificationRequestPermission() {
+    if ('Notification' in window) {
+        Notification.requestPermission();
+        let request = Notification.permission;
+        if (request === "granted") {
+            setUserDefaultBool('enablePushNotifications', true);
+        } else {
+            setUserDefaultBool('enablePushNotifications', false);
+        }
+    } else {
+        console.warn("Notifications aren't supported in this browser. The setting will be disabled.");
+        setUserDefaultBool('enablePushNotifications', false);
+    }
+}
+
+/**
+ * Get the browser's notification support
+ * @returns Boolean value that determines whether the browser supports the Notification API
+ */
+export function browserSupportsNotificationRequests(): boolean {
+    return ('Notification' in window);
+}
+
+/**
+ * Get the user default for sending push notifications
+ * @returns Boolean value of `enablePushNotifications`
+ */
+export function canSendNotifications() {
+    return getUserDefaultBool('enablePushNotifications');
+}
+
+/**
+ * Sends a push notification based on user preference
+ * @param title The primary title of the push notification
+ * @param body The contents of the push notification
+ */
+export function sendNotificationRequest(title: string, body: string) {
+    if (canSendNotifications()) {
+        let notif = new Notification(title, {
+            body: body
+        });
+
+        notif.onclick = () => {
+            window.focus();
+        };
+    } else {
+        console.warn('The person has opted to not receive push notifications.');
+    }
+}