From 9d6f33ea1c47b1064cf84874c22b0b15064a8f1a Mon Sep 17 00:00:00 2001 From: Sasha Drmic Date: Tue, 24 Mar 2020 16:35:45 +0100 Subject: [PATCH] :sparkles: Add icons to notification and use SW --- src/index.js | 2 +- src/scenes/Timer/assets/alarm.png | Bin 0 -> 1383 bytes src/scenes/Timer/assets/alarm.svg | 1 - src/scenes/Timer/assets/coffee.png | Bin 0 -> 417 bytes src/scenes/Timer/assets/work.png | Bin 0 -> 345 bytes src/scenes/Timer/components/ToggleButton.js | 15 +++++++++++---- src/scenes/Timer/reducer.js | 2 +- 7 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 src/scenes/Timer/assets/alarm.png delete mode 100644 src/scenes/Timer/assets/alarm.svg create mode 100644 src/scenes/Timer/assets/coffee.png create mode 100644 src/scenes/Timer/assets/work.png diff --git a/src/index.js b/src/index.js index da92739..d0a1461 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..835b58af96c9aa76d1beec90cc62183d2dce38ef GIT binary patch literal 1383 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wSy!M1o(uw0_hFkmPv3lh_2g=28Hd+4 z?bii%&+d=juJGOe{pI{Ei$sMP7+AzST^vIy7~fvM9`)Emfc1egcjC>0IgWA94>mrT z^Lfwz;M@hGJq4?yTYL}Kzkly>HT0_3ztj6_jfE~ubEtXNTFU9`X+71=C;WQKv6g9T zT%Y+InY7(w(}cFRq)rv%=^YP`J?oBMVVSybLtV4pawmULFVU*33&CrQCp0)UH!fr3 zy(v^%#;tXZpH0t4Lsj?J8Woc}H^0PgUwC2TOYKy_7i!g8f43icoc#0U&im3lf)c$i zH-GAQbjLVA?~w7#X%ay%;#nUW|9T^R;;cANh>W?({xcueT*^}VpE%=-<26;c6TMH? z>uGpdo(fF7JWYPyCdpgUSu1k3-pZHCOJ9HZYT4TD%vT(5)K(~5md=W{dMH}ZY>@68 zu3PiyQ1a$$H`TY@_FNpgm-l<<-XB$+p&!Dk%65scv(Gzq^_GCjU(|MfqyQb0@-b*w#1}Oq}8~$8_UN>0RXt%v1GLZt?R(gx?FzNL9S(z4Wj3h0Pht zhgLY;UtE#5c}~lr8n?IJMFbLsw>=CtFZMchHKiWo&A2TR){*c=McPTWfva_rU;n#jADK5<&D}M{ zY_=7HYGr-(9K+Ug)lADoxTLZ(R&WITiLy);ukdFu5@DOLGH}K|{Rh*W{40-@zvo_| z<^QwM>0d3Q?n|)`A{sIK^cOfjzwHUJ%SU0*JyLK_X+RR3Z8H?z(dRH#A6o0@c*_cT3vx}WL{*>`s5lAysk@2rOUf& zjWoNW@6%N;0#-O{1ujSzi_7Zo;$mjzDiaJk=Q%ehdQQgWtF1kWt?@yD%VY0XL_d&x zGV7EZ_w|>B|CgOyJs~=H15d@2(p4?bW(c2Hn#*PXFz{NY?5{OD+@`R$ew1n2r7Now1LE8AXFHAKyu7b6vQ#(mct?Tj6~LTwicLKiLPl6@&- zJCkL~Cox-ozAZe)U*1#&?AZ9ya@j)7#LL@F1Q*U;lz*pnn;i4*TQWk=Hv7)Eb>cCd zC-L8;;MktBgadKP)8?HO4qFw@GdDPW~UNkc2nl~lhTKYk-KL*+}@sl{~tq(>#DU+lr8Uqic3#dKbLh*2~7aB C#U%>> literal 0 HcmV?d00001 diff --git a/src/scenes/Timer/assets/alarm.svg b/src/scenes/Timer/assets/alarm.svg deleted file mode 100644 index e5ee213..0000000 --- a/src/scenes/Timer/assets/alarm.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/scenes/Timer/assets/coffee.png b/src/scenes/Timer/assets/coffee.png new file mode 100644 index 0000000000000000000000000000000000000000..f8402dff94c9be2bd9d1dedc74dfb5d30360dd14 GIT binary patch literal 417 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>V9fAzaSW+oe0zs6?Qnub`$zVp z1}x472LulAU9f(`VC!YT6TrhP;>zgSA8;Vx3xl&E%V7f+*Rr;kU(Wu1`tzf`!*7pC z9FCJzJb~y}bK)aw#_9#ESqW z`#n;^6B@#WGP$g|_BC2hiWC=lFtbJL!Qu(k|0O+55BPslzd!5AGf(9b2WQ1uDa#i# z2L#XHis=9IZUy_a1H7!+4R=pCeK{btBi%_Wfib61`9kc^M^y}F2ZRf{L1EB)DcW42Fp25@A&t;ucLK6V;1ekpQ literal 0 HcmV?d00001 diff --git a/src/scenes/Timer/assets/work.png b/src/scenes/Timer/assets/work.png new file mode 100644 index 0000000000000000000000000000000000000000..c227767f4004b3e88a48cda0adef4d4c3ba0532a GIT binary patch literal 345 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wSy%50(?STfixAtkwwcQfyPOd1o;Is zs5BqH|9^kA1k2>#-xtp|czpZ$ZU=?U?L60uCBOd%s#@Ub;uuoF`1Zz8(IW-|EEf$q z&gMLqe_`ZZ{V8K(J=51;w^$e$K4^4J4p}qBYw5}JH+(jn5dA5kc|+t$AeY-b-l-3! zyxzcEBOG+l%Zl-!cCFNcsYe234Fu{KnK%?07?6n%S#un;BTD@iaMZSaX$rQRkSx-p zR&=&I;j-i>(HmwF&ULjHyRKf^v?y9>Lq1UR0X_zX17ZT6rc!HPo$deykf*Dk%Q~lo FCIDMWWL5wG literal 0 HcmV?d00001 diff --git a/src/scenes/Timer/components/ToggleButton.js b/src/scenes/Timer/components/ToggleButton.js index 5026923..3d964e0 100644 --- 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 index 72948ec..4283bf9 100644 --- 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 }, }