From e8e48fec650a93760eeccd11409f1feebc1eed30 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 25 Nov 2020 15:56:13 +0100 Subject: [PATCH 01/16] ref: simplify import statement --- src/components/Navivation/SideBar.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Navivation/SideBar.js b/src/components/Navivation/SideBar.js index d7c1ee6..e4a9ce1 100644 --- a/src/components/Navivation/SideBar.js +++ b/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() From a4d21aa03ba36f76732130a278f06443c5c94b2e Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Wed, 25 Nov 2020 16:12:46 +0100 Subject: [PATCH 02/16] feat: connect button shortbreak handler --- .eslintcache | 2 +- src/components/Timer/BreakControl.js | 55 ++++++++++++++++++++++++++++ src/components/Timer/TimerControl.js | 3 +- src/components/Timer/index.js | 7 ++++ 4 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 src/components/Timer/BreakControl.js diff --git a/.eslintcache b/.eslintcache index 4f54327..557bbcd 100644 --- a/.eslintcache +++ b/.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"] \ No newline at end of file +[{"/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"},{"size":1393,"mtime":1606315692196,"results":"5","hashOfConfig":"6"},{"size":1350,"mtime":1606316922632,"results":"7","hashOfConfig":"6"},{"size":1300,"mtime":1606317045091,"results":"8","hashOfConfig":"6"},{"size":1402,"mtime":1606316137806,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","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",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/BreakControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/SideBar.js",[]] \ No newline at end of file diff --git a/src/components/Timer/BreakControl.js b/src/components/Timer/BreakControl.js new file mode 100644 index 0000000..c29e4ec --- /dev/null +++ b/src/components/Timer/BreakControl.js @@ -0,0 +1,55 @@ +import React from 'react' +import { Toolbar, Button, Icon } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' + +const useBreakControlStyles = makeStyles((theme) => ({ + root: {}, + m: { + margin: theme.spacing(1), + }, + mr: { + marginRight: theme.spacing(1), + }, +})) + +const BreakControl = ({ isActive, setIsActive, time, setTime }) => { + const { root, m, mr } = useBreakControlStyles() + return ( + <> + + + + + + + ) +} + +export default BreakControl diff --git a/src/components/Timer/TimerControl.js b/src/components/Timer/TimerControl.js index 2ee0682..b7b0df4 100644 --- a/src/components/Timer/TimerControl.js +++ b/src/components/Timer/TimerControl.js @@ -1,7 +1,7 @@ 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: {}, @@ -19,7 +19,6 @@ const TimerControl = ({ isActive, setIsActive, time, setTime }) => { const { root, buttonSecondary, controllers } = useTimerControlStyles() return ( <> -
TimerControl
+ {`${minutes}:${seconds()}`} { setIsActive={setIsActive} time={time} setTime={setTime} + playSong={playSound} + setPlaySong={setPlaySong} /> From c8a32f428385aac1c19f3ab71d4a497d117b7ab3 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Thu, 26 Nov 2020 00:04:01 +0100 Subject: [PATCH 09/16] impr: memoize playSound. --- .eslintcache | 2 +- src/components/Timer/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintcache b/.eslintcache index 5953be8..b2fedfc 100644 --- a/.eslintcache +++ b/.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","/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"},{"size":1393,"mtime":1606315692196,"results":"7","hashOfConfig":"8"},{"size":2041,"mtime":1606344983402,"results":"9","hashOfConfig":"8"},{"size":1279,"mtime":1606321213736,"results":"10","hashOfConfig":"8"},{"size":1402,"mtime":1606316137806,"results":"11","hashOfConfig":"8"},{"size":292,"mtime":1606338862494,"results":"12","hashOfConfig":"8"},{"size":481,"mtime":1606267476511,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",["26"],"/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",[],{"ruleId":"27","severity":1,"message":"28","line":26,"column":9,"nodeType":"29","endLine":29,"endColumn":4,"suggestions":"30"},"react-hooks/exhaustive-deps","The 'playSound' function makes the dependencies of useEffect Hook (at line 50) change on every render. To fix this, wrap the definition of 'playSound' in its own useCallback() Hook.","VariableDeclarator",["31"],{"desc":"32","fix":"33"},"Wrap the definition of 'playSound' in its own useCallback() Hook.",{"range":"34","text":"35"},[766,846],"useCallback(() => {\n audioRef.current.play()\n setTimeout(() => stopSound(), 20000)\n })"] \ No newline at end of file +[{"/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"},{"size":1393,"mtime":1606315692196,"results":"7","hashOfConfig":"8"},{"size":2071,"mtime":1606345338953,"results":"9","hashOfConfig":"8"},{"size":1279,"mtime":1606321213736,"results":"10","hashOfConfig":"8"},{"size":1402,"mtime":1606316137806,"results":"11","hashOfConfig":"8"},{"size":292,"mtime":1606338862494,"results":"12","hashOfConfig":"8"},{"size":481,"mtime":1606267476511,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",[],"/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",[]] \ No newline at end of file diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js index 8f86613..cb30976 100644 --- a/src/components/Timer/index.js +++ b/src/components/Timer/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react' +import React, { useState, useEffect, useRef, useCallback } from 'react' import { makeStyles } from '@material-ui/core/styles' import TimerControl from './TimerControl' import BreakControl from './BreakControl' @@ -23,10 +23,10 @@ const Timer = () => { return time % 60 < 10 ? formatedSeconds : time % 60 } - const playSound = () => { + const playSound = useCallback(() => { audioRef.current.play() setTimeout(() => stopSound(), 20000) - } + }, []) const stopSound = () => { audioRef.current.pause() From dfd83b6a0837c8e3118ae02ffe52f49c63835938 Mon Sep 17 00:00:00 2001 From: giovanizanetti Date: Thu, 26 Nov 2020 01:08:08 +0100 Subject: [PATCH 10/16] feat: show stop sound icon button when sound is playing --- .eslintcache | 2 +- src/components/Timer/index.js | 28 +++++++++++++++++++++++----- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/.eslintcache b/.eslintcache index b2fedfc..d541018 100644 --- a/.eslintcache +++ b/.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","/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"},{"size":1393,"mtime":1606315692196,"results":"7","hashOfConfig":"8"},{"size":2071,"mtime":1606345338953,"results":"9","hashOfConfig":"8"},{"size":1279,"mtime":1606321213736,"results":"10","hashOfConfig":"8"},{"size":1402,"mtime":1606316137806,"results":"11","hashOfConfig":"8"},{"size":292,"mtime":1606338862494,"results":"12","hashOfConfig":"8"},{"size":481,"mtime":1606267476511,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",[],"/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",[]] \ No newline at end of file +[{"/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"},{"size":1393,"mtime":1606315692196,"results":"7","hashOfConfig":"8"},{"size":2527,"mtime":1606349188328,"results":"9","hashOfConfig":"8"},{"size":1279,"mtime":1606321213736,"results":"10","hashOfConfig":"8"},{"size":1402,"mtime":1606316137806,"results":"11","hashOfConfig":"8"},{"size":292,"mtime":1606347108159,"results":"12","hashOfConfig":"8"},{"size":481,"mtime":1606267476511,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1b58vae",{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",["26"],"/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",[],{"ruleId":"27","severity":1,"message":"28","line":6,"column":10,"nodeType":"29","messageId":"30","endLine":6,"endColumn":18},"no-unused-vars","'MusicOff' is defined but never used.","Identifier","unusedVar"] \ No newline at end of file diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js index cb30976..68aa39e 100644 --- a/src/components/Timer/index.js +++ b/src/components/Timer/index.js @@ -2,18 +2,26 @@ import React, { useState, useEffect, useRef, useCallback } from 'react' import { makeStyles } from '@material-ui/core/styles' import TimerControl from './TimerControl' import BreakControl from './BreakControl' +import { IconButton, Icon } from '@material-ui/core' +import { MusicOff } from '@material-ui/icons' + +//volume_off const useTimerStyles = makeStyles((theme) => ({ root: { fontSize: '100px', }, + ml: { + marginLeft: theme.spacing(-2), + }, })) const Timer = () => { - const { root } = useTimerStyles() + 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 audio = new Audio('/songs/beat-alarm.mp3') const audioRef = useRef() @@ -24,11 +32,16 @@ const Timer = () => { } const playSound = useCallback(() => { + setIsSongPlaying(true) audioRef.current.play() - setTimeout(() => stopSound(), 20000) + setTimeout(() => { + stopSound() + setIsSongPlaying(false) + }, 20000) }, []) const stopSound = () => { + setIsSongPlaying(false) audioRef.current.pause() } @@ -36,7 +49,7 @@ const Timer = () => { let interval = null if (time === 0) { setIsActive(false) - playSong && playSound() //play sound if the user choose to + playSong && playSound() // play sound if is in the user's settings } if (isActive) { interval = setInterval(() => { @@ -53,8 +66,6 @@ const Timer = () => { <>