Notification permission ask added

src/App.js

@@ -28,6 +28,8 @@ function App() {
 
   const [KonamiCodeActive, setKonamiCodeActive] = useState(false)
 
+  const [notificationPermission, setNotificationPermission] = useState(undefined)
+
   const auth = getAuth()
 
   onAuthStateChanged(auth, (user) => {
@@ -49,6 +51,14 @@ function App() {
       root.style.flexDirection ='column'
       
   }
+
+  React.useEffect(() => {
+    const permission = localStorage.getItem("notification-permission")
+
+    if (permission !== undefined && permission !== null) {
+      setNotificationPermission(permission === "true" ? true : false)      
+    }
+  }, [])
   
   return (
     <Router>
@@ -60,6 +70,9 @@ function App() {
           setDarkmode={setDarkmode}
 
           KonamiCodeActive= {KonamiCodeActive}
+
+          notificationPermission={notificationPermission}
+          setNotificationPermission={setNotificationPermission}
         />
         
         <Switch>
@@ -128,6 +141,8 @@ function App() {
 
               setKonamiCodeActive = {setKonamiCodeActive}
               KonamiCodeActive= {KonamiCodeActive}
+
+              notificationPermission={notificationPermission}
             />
 
             <GoDownArrow 

src/components/Header.jsx

@@ -4,9 +4,23 @@ import GoToAccount from './Header Childrens/GoToAccount'
 
 const Header = (props) => {
 
+    const getPermisionDesktopNotification = async () => {
+              
+        let permission = await Notification.requestPermission();
+  
+        if (permission === 'granted') {
+            props.setNotificationPermission(true)
+            localStorage.setItem("notification-permission", true)
+        } else { 
+            props.setNotificationPermission(false)
+            localStorage.setItem("notification-permission", false)
+        }
+    }
+
     return (
+        <>
         <header className={props.darkMode ? 'header-main-page dark-mode-component' : 'header-main-page'} >
-            <a href="/">
+            <a href="/" className='title-link'>
                 <h1>Clockify Pomodoro Timer</h1>
             </a>
             <DarkMode
@@ -21,6 +35,19 @@ const Header = (props) => {
                 {props.KonamiCodeActive ? 'Konami Code ON' : null}
             </div>
         </header>
+        {
+            props.notificationPermission === undefined || process.env.REACT_APP_ENVIROMENT !== "production" ?
+                <div className={props.darkMode ? 'notification-select dark-mode-component' : 'notification-select'}>
+                    <p>Do you want to recibe a notification when a Pomodoro cicle ends?</p>
+                    <button className="yes" onClick={getPermisionDesktopNotification}>YES</button>
+                    <button className="no" onClick={() => {
+                        props.setNotificationPermission(false)
+                        localStorage.setItem("notification-permission", false)
+                    }}>Nah</button>
+                </div>
+            : null
+        }
+        </>
     )
 }
 

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -29,26 +29,9 @@ const MainPomodoroTimer = (props) => {
     const [controlKonamiCode, setControlKonamiCode] = useState(true)
     
     const [velocity, setVelocity] = useState(1) 
-    
-    const [notificationPermission, setNotificationPermission] = useState('')
 
     const setTimeStyle = () => setTimeStyleExternal(props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime)
 
-    const getPermisionDesktopNotification = async () => {
-            
-        let permission = await Notification.requestPermission();
-
-        if (permission === 'granted') {
-
-            await setNotificationPermission(true)
-        
-        } else {
-
-            setNotificationPermission(false)
-        }
-        
-    }
-
     React.useEffect (() => {
 
         if (actualStyle !== props.style) {
@@ -61,10 +44,7 @@ const MainPomodoroTimer = (props) => {
             detectKeys(props.setKonamiCodeActive)
 
             setControlKonamiCode(false)
-        }
-
-        getPermisionDesktopNotification()
-    
+        }    
     })
 
     const startTimer = () => {
@@ -188,7 +168,7 @@ const MainPomodoroTimer = (props) => {
 
                         playAudio('work')
 
-                        if (notificationPermission) {
+                        if (props.notificationPermission) {
 
                             new Notification('Pomodoro ended');
                         }
@@ -245,7 +225,7 @@ const MainPomodoroTimer = (props) => {
 
                         playAudio('rest')
 
-                        if (notificationPermission) {
+                        if (props.notificationPermission) {
 
                             new Notification('Rest ended');
                         }

src/components/MainPomodoro.jsx

@@ -20,8 +20,6 @@ const MainPomodoro = (props) => {
 
 
     const showStyles = () => {
-        
-
         setDisplayHidden(!displayHidden)
     }
 
@@ -37,9 +35,6 @@ const MainPomodoro = (props) => {
         }
     })
 
-
-
-
     return (
         <div className={props.darkMode ? 'main-pomodoro-container dark-mode-component' : 'main-pomodoro-container'}>
             <div className="main-pomodoro">
@@ -86,6 +81,8 @@ const MainPomodoro = (props) => {
                 setKonamiCodeActive={props.setKonamiCodeActive}
                 KonamiCodeActive= {props.KonamiCodeActive}
 
+                notificationPermission={props.notificationPermission}
+
                 />