Notification permission ask added

public/css_styles/styles.css

@@ -3,16 +3,20 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 17vh;
+  height: 14vh;
   padding: 0vh 1vw;
   box-sizing: border-box;
 }
 .header-main-page a {
   text-decoration: none;
 }
+.header-main-page .title-link {
+  width: fit-content;
+}
 .header-main-page h1 {
   color: #ffffff;
   font-size: 3vw;
+  display: inline;
   font-family: "Raleway", sans-serif;
   font-weight: 700;
   margin: 0;
@@ -25,6 +29,41 @@
   color: #4c8ad5;
 }
 
+.notification-select {
+  background-color: #1FAB89;
+  height: 3vh;
+  display: flex;
+  align-items: flex-end;
+  padding-left: 1vw;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: "Rambla", sans-serif;
+}
+.notification-select p {
+  display: inline-block;
+  align-self: center;
+  padding: 0;
+  margin: 0;
+  margin-right: 1vw;
+}
+.notification-select button {
+  height: 80%;
+  width: 5%;
+  margin-right: 0.5vw;
+  border: none;
+  border-radius: 2px;
+  align-self: center;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+.notification-select button.yes {
+  background-color: #4caf50;
+}
+.notification-select button.no {
+  background-color: #d32f2f;
+}
+
 @media (max-width: 991.98px) {
   .header-main-page {
     height: auto;
@@ -37,12 +76,31 @@
   .header-main-page h3 {
     font-size: 13pt;
   }
+
+  .notification-select {
+    height: auto;
+    flex-wrap: wrap;
+  }
+  .notification-select p {
+    width: 100%;
+    margin-top: 1vh;
+    margin-bottom: 1vh;
+  }
+  .notification-select button {
+    height: 30px;
+    width: 20%;
+    margin-bottom: 1vh;
+  }
 }
 .header-main-page.dark-mode-component {
   background-color: #303841;
   border-bottom: 1px solid #ffffff72;
 }
 
+.notification-select.dark-mode-component {
+  background-color: #3A4750;
+}
+
 .banner-login {
   background-color: #D17262;
   color: white;

public/sass_styles/_header.scss

@@ -7,7 +7,7 @@
     // align-items: center;
     justify-content: center;
 
-    height: 17vh;
+    height: 14vh;
     padding: 0vh 1vw;
 
     box-sizing: border-box;
@@ -15,11 +15,18 @@
     a {
         text-decoration: none;
     }
+    
+    .title-link {
+        width: fit-content;
+    }
 
     h1 {
         color: #ffffff;
 
         font-size: 3vw;
+
+        display: inline;
+
         @include titleFont();
         @include normalizeTitle();
     }
@@ -30,28 +37,98 @@
         color: $lightest-color-dark;
     }
 }
+.notification-select {
 
+    background-color: $second-color;
+    height: 3vh;
 
+    display: flex;
+    align-items: flex-end;
 
-
- @media (max-width: 991.98px) {
-    .header-main-page {
-    height: auto;
-    padding: 3vw 0px;
-
-    align-items: center;
+    padding-left: 1vw;
     
-    h1 {
-        font-size: 26pt;
+    box-sizing: border-box;
+
+    color: #fff;
+
+    @include bodyFont();
+
+    p { 
+        display: inline-block;
+
+        align-self: center;
+
+        padding: 0;
+
+        margin: 0;
+        margin-right: 1vw;
     }
 
-    h3 {
-        font-size: 13pt;
-    }
-    }
- }
+    button {
+        height: 80%;
+        width: 5%;
 
- .header-main-page.dark-mode-component {
-     background-color: $main-color-dark;
-     border-bottom: 1px solid #ffffff72;
- }
+        margin-right: 0.5vw;
+        
+        border: none;
+        border-radius: 2px;
+
+        align-self: center;
+
+        color: #fff;
+        font-weight: bold;
+
+        cursor: pointer;
+    }
+
+    button.yes {
+        background-color: rgb(76, 175, 80);
+    }
+
+    button.no {
+        background-color: rgb(211, 47, 47);
+    }
+}
+
+@media (max-width: 991.98px) {
+    .header-main-page {
+        height: auto;
+        padding: 3vw 0px;
+
+        align-items: center;
+        
+        h1 {
+            font-size: 26pt;
+        }
+
+        h3 {
+            font-size: 13pt;
+        }
+    }
+
+    .notification-select {
+        height: auto;
+        flex-wrap: wrap;
+
+        p {
+            width: 100%;
+            margin-top: 1vh;
+            margin-bottom: 1vh;
+        }
+
+        button {
+            height: 30px;
+            width: 20%;
+            margin-bottom: 1vh;
+        }
+    }
+}
+
+.header-main-page.dark-mode-component {
+    background-color: $main-color-dark;
+    border-bottom: 1px solid #ffffff72;
+}
+
+.notification-select.dark-mode-component {
+    background-color: $second-color-dark;
+}

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}
+
                 />