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>