✨ Add icons to notification and use SW

sasa95 · Mar 24, 2020 · 9d6f33e · 9d6f33e
1 parent f5070ba
commit 9d6f33e
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 7 deletions.
diff --git a/src/index.js b/src/index.js
@@ -15,4 +15,4 @@ ReactDOM.render(
   document.getElementById('root')
 )
 
-serviceWorker.unregister()
+serviceWorker.register()
diff --git a/src/scenes/Timer/assets/alarm.png b/src/scenes/Timer/assets/alarm.png
diff --git a/src/scenes/Timer/assets/alarm.svg b/src/scenes/Timer/assets/alarm.svg
diff --git a/src/scenes/Timer/assets/coffee.png b/src/scenes/Timer/assets/coffee.png
diff --git a/src/scenes/Timer/assets/work.png b/src/scenes/Timer/assets/work.png
diff --git a/src/scenes/Timer/components/ToggleButton.js b/src/scenes/Timer/components/ToggleButton.js
@@ -15,7 +15,9 @@ import {
   saveInterval,
 } from '../actions'
 import chime from '../assets/chime.mp3'
-import icon from '../assets/alarm.svg'
+import work from '../assets/work.png'
+import alarm from '../assets/alarm.png'
+import coffee from '../assets/coffee.png'
 
 const ActionIcon = styled(IconButton)`
   border: 1px solid #bababa;
@@ -72,7 +74,7 @@ const ToggleButton = () => {
       setTitle(type, calculatedTimeLeft)
 
       if (!calculatedProgress) {
-        setTimeout(() => {
+        setTimeout(async () => {
           dispatch(setNextTimer())
           audio.play()
 
@@ -83,9 +85,14 @@ const ToggleButton = () => {
             const msg =
               type === TYPES.work.id ? 'Take a break ☕️' : 'Start working 👨‍💻'
 
-            new Notification(msg, {
-              icon,
+            const icon = type === TYPES.work.id ? coffee : work
+
+            const registration = await navigator.serviceWorker.ready
+
+            registration.showNotification(msg, {
               vibrate: [100, 50, 100],
+              badge: alarm,
+              icon,
             })
           }
         }, 1000)

diff --git a/src/scenes/Timer/reducer.js b/src/scenes/Timer/reducer.js
@@ -8,7 +8,7 @@ export const STATUSES = {
 
 export const TYPES = {
   work: { id: 'WORK', duration: 25 },
-  shortBreak: { id: 'SHORT_BREAK', duration: 0.1 },
+  shortBreak: { id: 'SHORT_BREAK', duration: 5 },
   longBreak: { id: 'LONG_BREAK', duration: 20 },
 }