From 3d52a117b1629196e0831175d7056266130666a9 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Wed, 5 Feb 2020 20:06:35 +0100
Subject: [PATCH] Add button for requesting notification permission

---
 ui/src/index.tsx                    |  2 --
 ui/src/layout/Navigation.tsx        | 21 ++++++++++++++++++++-
 ui/src/snack/browserNotification.ts |  4 ++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 64ac1b1..536f2fc 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -14,7 +14,6 @@ import {UserStore} from './user/UserStore';
 import {MessagesStore} from './message/MessagesStore';
 import {ClientStore} from './client/ClientStore';
 import {PluginStore} from './plugin/PluginStore';
-import * as Notifications from './snack/browserNotification';
 import {registerReactions} from './reactions';
 
 const defaultDevConfig = {
@@ -62,7 +61,6 @@ const initStores = (): StoreMapping => {
 };
 
 (function clientJS() {
-    Notifications.requestPermission();
     if (process.env.NODE_ENV === 'production') {
         config.set(window.config || defaultProdConfig);
     } else {
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index 711c46b..773b275 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -7,6 +7,8 @@ import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
+import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
+import {Button, Typography} from '@material-ui/core';
 
 const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> => ({
     drawerPaper: {
@@ -29,9 +31,15 @@ interface IProps {
 }
 
 @observer
-class Navigation extends Component<IProps & Styles & Stores<'appStore'>> {
+class Navigation extends Component<
+    IProps & Styles & Stores<'appStore'>,
+    {showRequestNotification: boolean}
+> {
+    public state = {showRequestNotification: mayAllowPermission()};
+
     public render() {
         const {classes, loggedIn, appStore} = this.props;
+        const {showRequestNotification} = this.state;
         const apps = appStore.getItems();
 
         const userApps =
@@ -73,6 +81,17 @@ class Navigation extends Component<IProps & Styles & Stores<'appStore'>> {
                 <Divider />
                 <div>{loggedIn ? userApps : placeholderItems}</div>
                 <Divider />
+                <Typography align="center" style={{marginTop: 10}}>
+                    {showRequestNotification ? (
+                        <Button
+                            onClick={() => {
+                                requestPermission();
+                                this.setState({showRequestNotification: false});
+                            }}>
+                            Enable Notifications
+                        </Button>
+                    ) : null}
+                </Typography>
             </Drawer>
         );
     }
diff --git a/ui/src/snack/browserNotification.ts b/ui/src/snack/browserNotification.ts
index bc788ba..2a968bb 100644
--- a/ui/src/snack/browserNotification.ts
+++ b/ui/src/snack/browserNotification.ts
@@ -2,6 +2,10 @@ import Notify from 'notifyjs';
 import removeMarkdown from 'remove-markdown';
 import {IMessage} from '../types';
 
+export function mayAllowPermission(): boolean {
+    return Notify.needsPermission && Notify.isSupported() && Notification.permission !== 'denied';
+}
+
 export function requestPermission() {
     if (Notify.needsPermission && Notify.isSupported()) {
         Notify.requestPermission(