feat(ui): manage notification in settings screen (#14)

ui/package.json

@@ -29,6 +29,7 @@
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.8",
+    "react-switch": "^5.0.1",
     "react-use-form-state": "^0.9.1",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",

ui/src/components/Box.module.css

@@ -2,6 +2,7 @@
 .box {
   background-color: #c4c4c461;
   padding: 1em;
+  margin-bottom: 1em;
 }
 
 .box > legend {

ui/src/helpers/index.ts

@@ -9,3 +9,4 @@ export * from './isValidForm'
 export * from './matchResponse'
 export * from './matchState'
 export * from './regexp'
+export * from './notification'

ui/src/helpers/notification.ts

@@ -0,0 +1,44 @@
+import { API_BASE_URL } from '../constants'
+
+function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+  const rawData = window.atob(base64)
+  return Uint8Array.from(Array.from(rawData).map(char => char.charCodeAt(0)))
+}
+
+export const isNotificationSupported = () => 'Notification' in window
+export const isNotificationGranted = () => isNotificationSupported() && Notification.permission == 'granted'
+
+export const unSubscribePush = async (registration: ServiceWorkerRegistration) => {
+  let subscription = await registration.pushManager.getSubscription()
+  if (subscription) {
+    const ok = await subscription.unsubscribe()
+    if (!ok) {
+      throw new Error('Unable to renew push manager subscription.')
+    }
+    return
+  }
+}
+
+export const subscribePush = async (registration: ServiceWorkerRegistration) => {
+  let applicationServerKey: Uint8Array | undefined
+  try {
+    let subscription = await registration.pushManager.getSubscription()
+    if (!subscription) {
+      // No subscription: creat a new one
+      const res = await fetch(API_BASE_URL)
+      const data = await res.json()
+      applicationServerKey = urlBase64ToUint8Array(data.vapid)
+      subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey
+      })
+    }
+    console.log('Subscribed to push manager:', subscription.endpoint)
+    return subscription
+  } catch (err) {
+    console.error('Error when creating push subscription:', err)
+    throw err
+  }
+}

ui/src/index.tsx

@@ -8,7 +8,6 @@ import App from './App'
 import authService from './auth'
 import configureStore from './configureStore'
 import { getOnlineStatus } from './helpers'
-import { setupNotification } from './notification'
 import * as serviceWorker from './serviceWorker'
 
 const run = () => {
@@ -17,7 +16,6 @@ const run = () => {
   const store = configureStore(history, initialState)
   ReactDOM.render(<App store={store} history={history} />, document.getElementById('root'))
   serviceWorker.register()
-  setupNotification()
   localStorage.setItem('last_run', new Date().toISOString())
 }
 

ui/src/serviceWorker.ts

@@ -1,5 +1,3 @@
-import { subscribePush } from './notification'
-
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
@@ -17,8 +15,6 @@ function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
-      // Subscribe to Push manager
-      subscribePush(registration)
       // Update
       registration.onupdatefound = () => {
         const installingWorker = registration.installing

ui/src/settings/SettingsPage.tsx

@@ -14,7 +14,6 @@ import AddCategoryForm from './categories/AddCategoryForm'
 import CategoriesTab from './categories/CategoriesTab'
 import EditCategoryTab from './categories/EditCategoryTab'
 import Header from './components/Header'
-import NotificationButton from './components/NotificationButton'
 import Tabs from './components/Tabs'
 import PreferencesTab from './preferences/PreferencesTab'
 import AddRuleForm from './rules/AddRuleForm'
@@ -32,12 +31,9 @@ const items = [
 type AllProps = RouteComponentProps<{}>
 
 const Actions = () => (
-  <>
-    <a href="https://about.readflow.app/docs/en/" rel="noreferrer noopener" target="_blank">
-      Go to docs
-    </a>
-    <NotificationButton />
-  </>
+  <a href="https://about.readflow.app/docs/en/" rel="noreferrer noopener" target="_blank">
+    Go to docs
+  </a>
 )
 
 const PageHeader = () => (