feat: added notification push

Molaryy · Oct 3, 2023 · ff7e60b · ff7e60b
1 parent 10825a5
commit ff7e60b
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bective</title>
+    <link rel="icon" href="/assets/bective-logo.png">
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/assets/bective-logo.png b/public/assets/bective-logo.png
diff --git a/public/assets/behance_logo_icon_257018.ico b/public/assets/behance_logo_icon_257018.ico
diff --git a/public/assets/logo-bective.ico b/public/assets/logo-bective.ico
diff --git a/public/assets/logo-bective.png b/public/assets/logo-bective.png
diff --git a/src/components/BreakTime.tsx b/src/components/BreakTime.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+const requestNotificationPermission = () => {
+  if (Notification.permission !== 'granted') {
+    Notification.requestPermission().then((permission: NotificationPermission) => {
+      if (permission !== 'granted') {
+        console.error('Notification permission granted.')
+      }
+    })
+  }
+}
+
+const sendNotification = () => {
+  const [canSendNotification, setCanSendNotification] = useState(true)
+
+  if (Notification.permission === 'granted' && canSendNotification) {
+    new Notification('Take a break time')
+    setCanSendNotification(false)
+  }
+}
+
+const BreakTime = () => {
+  useEffect(() => {
+    requestNotificationPermission()
+  }, [])
+  sendNotification()
+  return <></>
+}
+
+export default BreakTime
diff --git a/src/components/Form/TimerFormHandler.tsx b/src/components/Form/TimerFormHandler.tsx
@@ -2,6 +2,7 @@ import { FormEvent, useEffect, useState } from 'react'
 import TimerForm from './TimerForm.tsx'
 import pauseSound from '/assets/5-minutes-lofi.mp3'
 import workSound from '/assets/Wakey-Wakey.mp3'
+import BreakTime from '../BreakTime.tsx'
 
 const TimerFormHandler = () => {
   const [workTime, setWorkTime] = useState<string[]>(['00', '00', '00'])
@@ -12,6 +13,7 @@ const TimerFormHandler = () => {
   const [startWorkSound, setStartWorkSound] = useState<boolean[]>([false, false])
   const [storeWorkTime, setStoreWorkTime] = useState<string[] | null>(null)
   const [storePauseTime, setStorePauseTime] = useState<string[] | null>(null)
+  const [alertNotification, setAlertNotification] = useState(false)
 
   const handleFormSubmit = (event: FormEvent): void => {
     event.preventDefault()
@@ -36,7 +38,7 @@ const TimerFormHandler = () => {
   const handleContinueTimer = (): void => {
     setIsWorkTimerRunning(workTime.toString() != storeWorkTime?.toString())
     setIsPauseTimerRunning(pauseTime.toString() != storePauseTime?.toString())
-    !startPauseSound ? setStartPauseSound(true) : setStartPauseSound(false)
+    isWorkTimerRunning ? setStartPauseSound(false) : setStartPauseSound(true)
   }
 
   useEffect(() => {
@@ -49,6 +51,13 @@ const TimerFormHandler = () => {
       return
     }
 
+    if (alertNotification) {
+      setAlertNotification(false)
+    }
+    if (isPauseTimerRunning && !alertNotification) {
+      setAlertNotification(true)
+    }
+
     const timeInterval: number = setInterval(() => {
       if (isPauseTimerRunning) {
         setStartWorkSound([true, false])
@@ -96,7 +105,14 @@ const TimerFormHandler = () => {
         isWorking={isWorkTimerRunning}
         isInPause={isPauseTimerRunning}
       />
-      {startPauseSound ? <audio controls src={pauseSound} autoPlay hidden /> : <></>}
+      {startPauseSound ? (
+        <>
+          <BreakTime />
+          <audio controls src={pauseSound} autoPlay hidden />
+        </>
+      ) : (
+        <></>
+      )}
       {startWorkSound[0] && startWorkSound[1] ? (
         <audio controls src={workSound} autoPlay hidden />
       ) : (