Feature - Timer

.eslintcache

@@ -1 +1 @@
-[{"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js":"1","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js":"2"},{"size":1429,"mtime":1606266104851,"results":"3","hashOfConfig":"4"},{"size":1159,"mtime":1606267197658,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1b58vae",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",["10"],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",[],{"ruleId":"11","severity":1,"message":"12","line":4,"column":21,"nodeType":"13","messageId":"14","endLine":4,"endColumn":25},"no-unused-vars","'Stop' is defined but never used.","Identifier","unusedVar"]
+[{"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js":"1","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js":"2","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/BreakControl.js":"3","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/SideBar.js":"4","/Users/giovanizanetti/Projects/my-pomodoro/src/App.js":"5","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/style.js":"6","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/index.js":"7"},{"size":1563,"mtime":1606395557181,"results":"8","hashOfConfig":"9"},{"size":2379,"mtime":1606395937213,"results":"10","hashOfConfig":"9"},{"size":1375,"mtime":1606399622745,"results":"11","hashOfConfig":"9"},{"size":1402,"mtime":1606316137806,"results":"12","hashOfConfig":"9"},{"size":364,"mtime":1606399514516,"results":"13","hashOfConfig":"9"},{"size":481,"mtime":1606267476511,"results":"14","hashOfConfig":"9"},{"size":507,"mtime":1606398650770,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",["30"],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/BreakControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/SideBar.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/App.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/style.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/index.js",[],{"ruleId":"31","severity":1,"message":"32","line":20,"column":20,"nodeType":"33","messageId":"34","endLine":20,"endColumn":31},"no-unused-vars","'setPlaySong' is assigned a value but never used.","Identifier","unusedVar"]

src/App.js

@@ -1,11 +1,13 @@
 import './App.css'
 import Navigation from './components/Navivation'
 import Timer from './components/Timer'
+import Settings from './components/Settings'
 
 function App() {
   return (
     <div className='App'>
       <Navigation />
+      {/* <Settings /> */}
       <header className='App-header'>
         <Timer />
       </header>

src/components/Navivation/SideBar.js

@@ -8,10 +8,9 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  Icon,
 } from '@material-ui/core'
 
-import Icon from '@material-ui/core/Icon'
-
 export default function TemporaryDrawer({ toggleSideBar, isVisible }) {
   const { list, fullList } = useSideBarStyles()
 

src/components/Settings/index.js

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { Modal } from '@material-ui/core'
+
+const Settings = () => {
+  const [openModal, setOpenModal] = useState(false)
+
+  return (
+    <>
+      <Modal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        aria-labelledby='simple-modal-title'
+        aria-describedby='simple-modal-description'
+      >
+        <div>HI I am a MOdal</div>
+      </Modal>
+      <button onClick={() => setOpenModal(true)}></button>
+    </>
+  )
+}
+
+export default Settings

src/components/Timer/BreakControl.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Toolbar, Button, Icon } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useBreakControlStyles = makeStyles((theme) => ({
+  root: {
+    whiteSpace: 'nowrap',
+  },
+  m: {
+    margin: theme.spacing(1),
+  },
+  mr: {
+    marginRight: theme.spacing(1),
+  },
+}))
+
+const BreakControl = ({ setIsActive, setTime }) => {
+  const { root, m, mr } = useBreakControlStyles()
+
+  const handleBreak = (breakLengh) => {
+    setTime(breakLengh)
+    setIsActive(true)
+  }
+
+  return (
+    <>
+      <Toolbar variant='dense' className={root}>
+        <Button
+          fullWidth={true}
+          onClick={() => handleBreak(300)}
+          variant='contained'
+          className={m}
+        >
+          <Icon className={mr}>local_cafe</Icon>
+          Short Break
+        </Button>
+        <Button
+          fullWidth={true}
+          onClick={() => handleBreak(900)}
+          className={m}
+          variant='contained'
+        >
+          <Icon className={mr}>self_improvement</Icon>
+          Long Break
+        </Button>
+        <Button
+          fullWidth={true}
+          onClick={() => handleBreak(2700)}
+          className={m}
+          variant='contained'
+        >
+          <Icon className={mr}>restaurant</Icon>
+          Lunch Break
+        </Button>
+      </Toolbar>
+    </>
+  )
+}
+
+export default BreakControl

src/components/Timer/TimerControl.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Toolbar, Button } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { PlayArrow, Stop, Restore, Pause } from '@material-ui/icons'
+import { PlayArrow, Restore, Pause } from '@material-ui/icons'
 
 const useTimerControlStyles = makeStyles((theme) => ({
-  root: {},
+  root: { justifyContent: 'center' },
   buttonSecondary: {
     color: 'rgba(0,0,0,.87)',
     backgroundColor: '#4caf50',
@@ -13,15 +13,18 @@ const useTimerControlStyles = makeStyles((theme) => ({
   controllers: {
     margin: theme.spacing(1),
   },
+  mr: {
+    marginRight: theme.spacing(0.6),
+  },
 }))
 
-const TimerControl = ({ isActive, setIsActive, time, setTime }) => {
-  const { root, buttonSecondary, controllers } = useTimerControlStyles()
+const TimerControl = ({ isActive, setIsActive, setTime }) => {
+  const { root, buttonSecondary, controllers, mr } = useTimerControlStyles()
   return (
     <>
-      <div>TimerControl</div>
       <Toolbar variant='dense' className={root}>
         <Button
+          fullWidth={true}
           onClick={() => setIsActive(true)}
           variant='contained'
           className={buttonSecondary}
@@ -30,6 +33,7 @@ const TimerControl = ({ isActive, setIsActive, time, setTime }) => {
           Start
         </Button>
         <Button
+          fullWidth={true}
           onClick={() => setIsActive(!isActive)}
           className={controllers}
           variant='contained'
@@ -39,6 +43,7 @@ const TimerControl = ({ isActive, setIsActive, time, setTime }) => {
           Pause
         </Button>
         <Button
+          fullWidth={true}
           onClick={() => {
             setIsActive(false)
             setTime(1500)
@@ -47,7 +52,7 @@ const TimerControl = ({ isActive, setIsActive, time, setTime }) => {
           variant='contained'
           color='secondary'
         >
-          <Restore />
+          <Restore className={mr} />
           Reset
         </Button>
       </Toolbar>

src/components/Timer/index.js

@@ -1,44 +1,89 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import TimerControl from './TimerControl'
+import BreakControl from './BreakControl'
+import { IconButton, Icon } from '@material-ui/core'
 
 const useTimerStyles = makeStyles((theme) => ({
   root: {
     fontSize: '100px',
   },
+  ml: {
+    marginLeft: theme.spacing(-2),
+  },
 }))
 
-const Timer = (props) => {
-  const { root } = useTimerStyles()
+const Timer = () => {
+  const { root, ml } = useTimerStyles()
   const [time, setTime] = useState(1500)
   const [isActive, setIsActive] = useState(false)
+  const [playSong, setPlaySong] = useState(true)
+  const [isSongPlaying, setIsSongPlaying] = useState(false)
   const minutes = Math.floor(time / 60) % 60
+  const audioRef = useRef()
+  const seconds = time % 60 < 10 ? `0${time % 60}` : time % 60
+  const countDown = `${minutes}:${seconds}`
 
-  const seconds = () => {
-    const formatedSeconds = `0${time % 60}`
-    return time % 60 < 10 ? formatedSeconds : time % 60
-  }
+  document.title = countDown
 
+  // Song play
+  useEffect(() => {
+    setIsSongPlaying(false) // initial render do not play
+
+    const stopSound = () => {
+      audioRef.current.pause()
+      audioRef.current.currentTime = 0
+    }
+
+    if (isSongPlaying) {
+      audioRef.current.play()
+      setTimeout(() => {
+        stopSound()
+        setIsSongPlaying(false)
+      }, 20000)
+    } else {
+      stopSound()
+    }
+  }, [isSongPlaying])
+
+  // Countdown timer
   useEffect(() => {
     let interval = null
+    if (time === 0) {
+      setIsActive(false)
+      playSong && setIsSongPlaying(true) // play sound if is set in the user's settings
+    }
     if (isActive) {
       interval = setInterval(() => {
         setTime((time) => time - 1)
       }, 1000)
     } else if (!isActive && time !== 0) {
       clearInterval(interval)
     }
+
     return () => clearInterval(interval)
-  }, [isActive, time])
+  }, [isActive, time, playSong])
 
   return (
     <>
+      <audio
+        disableRemotePlayback={true}
+        ref={audioRef}
+        src='/songs/beat-alarm.mp3'
+      />
       <div>
-        <span className={root}>{`${minutes}:${seconds()}`}</span>
+        <BreakControl setIsActive={setIsActive} setTime={setTime} />
+        {isSongPlaying && (
+          <IconButton className={ml} onClick={() => setIsSongPlaying(false)}>
+            <Icon color='secondary'>music_off</Icon>
+          </IconButton>
+        )}
+
+        <span className={root}>{countDown}</span>
+
         <TimerControl
           isActive={isActive}
           setIsActive={setIsActive}
-          time={time}
           setTime={setTime}
         />
       </div>