diff --git a/.eslintcache b/.eslintcache index 4f54327..cf6b2f5 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","/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"] \ No newline at end of file diff --git a/public/songs/alarm_clock.mp3 b/public/songs/alarm_clock.mp3 new file mode 100644 index 0000000..8e8b778 Binary files /dev/null and b/public/songs/alarm_clock.mp3 differ diff --git a/public/songs/alarm_not_too_loud.mp3 b/public/songs/alarm_not_too_loud.mp3 new file mode 100644 index 0000000..79e8bab Binary files /dev/null and b/public/songs/alarm_not_too_loud.mp3 differ diff --git a/public/songs/beat-alarm.mp3 b/public/songs/beat-alarm.mp3 new file mode 100644 index 0000000..cb512f7 Binary files /dev/null and b/public/songs/beat-alarm.mp3 differ diff --git a/public/songs/guitar_alarm.mp3 b/public/songs/guitar_alarm.mp3 new file mode 100644 index 0000000..9c2ca16 Binary files /dev/null and b/public/songs/guitar_alarm.mp3 differ diff --git a/public/songs/hickory_dickory_dock-notification.mp3 b/public/songs/hickory_dickory_dock-notification.mp3 new file mode 100644 index 0000000..dece98a Binary files /dev/null and b/public/songs/hickory_dickory_dock-notification.mp3 differ diff --git a/public/songs/pruzhina_electro.mp3 b/public/songs/pruzhina_electro.mp3 new file mode 100644 index 0000000..79d55b5 Binary files /dev/null and b/public/songs/pruzhina_electro.mp3 differ diff --git a/public/songs/samsung_s1.mp3 b/public/songs/samsung_s1.mp3 new file mode 100644 index 0000000..827b005 Binary files /dev/null and b/public/songs/samsung_s1.mp3 differ diff --git a/public/songs/shorty.mp3 b/public/songs/shorty.mp3 new file mode 100644 index 0000000..ffd5f33 Binary files /dev/null and b/public/songs/shorty.mp3 differ diff --git a/public/songs/zvuk_budilnika.mp3 b/public/songs/zvuk_budilnika.mp3 new file mode 100644 index 0000000..205a88d Binary files /dev/null and b/public/songs/zvuk_budilnika.mp3 differ diff --git a/src/App.js b/src/App.js index de59cc9..f15a4b9 100644 --- a/src/App.js +++ b/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 (
+ {/* */}
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() diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js new file mode 100644 index 0000000..1130141 --- /dev/null +++ b/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 ( + <> + setOpenModal(false)} + aria-labelledby='simple-modal-title' + aria-describedby='simple-modal-description' + > +
HI I am a MOdal
+ + + + ) +} + +export default Settings diff --git a/src/components/Timer/BreakControl.js b/src/components/Timer/BreakControl.js new file mode 100644 index 0000000..0a61e90 --- /dev/null +++ b/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 ( + <> + + + + + + + ) +} + +export default BreakControl diff --git a/src/components/Timer/TimerControl.js b/src/components/Timer/TimerControl.js index 2ee0682..0ac7e6b 100644 --- a/src/components/Timer/TimerControl.js +++ b/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 ( <> -
TimerControl
diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js index dbb7215..4ada9b9 100644 --- a/src/components/Timer/index.js +++ b/src/components/Timer/index.js @@ -1,26 +1,58 @@ -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) @@ -28,17 +60,30 @@ const Timer = (props) => { } else if (!isActive && time !== 0) { clearInterval(interval) } + return () => clearInterval(interval) - }, [isActive, time]) + }, [isActive, time, playSong]) return ( <> +