diff --git a/.eslintcache b/.eslintcache index e4c08c7..41562b0 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js":"1"},{"size":2379,"mtime":1606400960926,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1b58vae","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",["6"],{"ruleId":"7","severity":1,"message":"8","line":20,"column":20,"nodeType":"9","messageId":"10","endLine":20,"endColumn":31},"no-unused-vars","'setPlaySong' is assigned a value but never used.","Identifier","unusedVar"] \ No newline at end of file +[{"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js":"1","/Users/giovanizanetti/Projects/my-pomodoro/src/App.js":"2","/Users/giovanizanetti/Projects/my-pomodoro/src/components/playground.js":"3","/Users/giovanizanetti/Projects/my-pomodoro/src/reducers/settings.js":"4","/Users/giovanizanetti/Projects/my-pomodoro/src/types.js":"5","/Users/giovanizanetti/Projects/my-pomodoro/src/StoreProvider/index.js":"6","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/SideBar.js":"7","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/index.js":"8","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/BreakControl.js":"9","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js":"10","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectShortBreak.js":"11","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/index.js":"12","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/style.js":"13","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/songs.js":"14","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectLongBreak.js":"15","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectLunchBreak.js":"16","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectPomodoroLength.js":"17","/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectSong.js":"18"},{"size":4003,"mtime":1606682693717,"results":"19","hashOfConfig":"20"},{"size":476,"mtime":1606566280870,"results":"21","hashOfConfig":"20"},{"size":1844,"mtime":1606429594873,"results":"22","hashOfConfig":"20"},{"size":2440,"mtime":1606682832372,"results":"23","hashOfConfig":"20"},{"size":1039,"mtime":1606681251918,"results":"24","hashOfConfig":"20"},{"size":820,"mtime":1606682978156,"results":"25","hashOfConfig":"20"},{"size":1770,"mtime":1606684216049,"results":"26","hashOfConfig":"20"},{"size":1135,"mtime":1606567292286,"results":"27","hashOfConfig":"20"},{"size":1536,"mtime":1606665201353,"results":"28","hashOfConfig":"20"},{"size":1679,"mtime":1606665916739,"results":"29","hashOfConfig":"20"},{"size":1335,"mtime":1606684560816,"results":"30","hashOfConfig":"20"},{"size":4813,"mtime":1606684598068,"results":"31","hashOfConfig":"20"},{"size":481,"mtime":1606267476511,"results":"32","hashOfConfig":"20"},{"size":600,"mtime":1606683975424,"results":"33","hashOfConfig":"20"},{"size":1327,"mtime":1606684572432,"results":"34","hashOfConfig":"20"},{"size":1320,"mtime":1606684568554,"results":"35","hashOfConfig":"20"},{"size":1299,"mtime":1606684564623,"results":"36","hashOfConfig":"20"},{"size":1265,"mtime":1606684554912,"results":"37","hashOfConfig":"20"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1b58vae",{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":7,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/index.js",["76","77","78"],"/Users/giovanizanetti/Projects/my-pomodoro/src/App.js",[],["79","80"],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/playground.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/reducers/settings.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/types.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/StoreProvider/index.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/SideBar.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/index.js",[],["81","82"],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/BreakControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Timer/TimerControl.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectShortBreak.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/index.js",["83","84","85","86","87","88","89"],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Navivation/style.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/songs.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectLongBreak.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectLunchBreak.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectPomodoroLength.js",[],"/Users/giovanizanetti/Projects/my-pomodoro/src/components/Settings/SelectSong.js",[],{"ruleId":"90","severity":1,"message":"91","line":27,"column":21,"nodeType":"92","messageId":"93","endLine":27,"endColumn":31},{"ruleId":"90","severity":1,"message":"94","line":27,"column":33,"nodeType":"92","messageId":"93","endLine":27,"endColumn":42},{"ruleId":"90","severity":1,"message":"95","line":27,"column":44,"nodeType":"92","messageId":"93","endLine":27,"endColumn":54},{"ruleId":"96","replacedBy":"97"},{"ruleId":"98","replacedBy":"99"},{"ruleId":"96","replacedBy":"100"},{"ruleId":"98","replacedBy":"101"},{"ruleId":"90","severity":1,"message":"102","line":1,"column":10,"nodeType":"92","messageId":"93","endLine":1,"endColumn":18},{"ruleId":"90","severity":1,"message":"103","line":15,"column":3,"nodeType":"92","messageId":"93","endLine":15,"endColumn":13},{"ruleId":"90","severity":1,"message":"104","line":22,"column":3,"nodeType":"92","messageId":"93","endLine":22,"endColumn":11},{"ruleId":"90","severity":1,"message":"105","line":23,"column":3,"nodeType":"92","messageId":"93","endLine":23,"endColumn":13},{"ruleId":"90","severity":1,"message":"106","line":24,"column":3,"nodeType":"92","messageId":"93","endLine":24,"endColumn":9},{"ruleId":"90","severity":1,"message":"107","line":58,"column":24,"nodeType":"92","messageId":"93","endLine":58,"endColumn":30},{"ruleId":"90","severity":1,"message":"108","line":58,"column":32,"nodeType":"92","messageId":"93","endLine":58,"endColumn":43},"no-unused-vars","'shortBreak' is assigned a value but never used.","Identifier","unusedVar","'longBreak' is assigned a value but never used.","'lunchBreak' is assigned a value but never used.","no-native-reassign",["109"],"no-negated-in-lhs",["110"],["109"],["110"],"'useState' is defined but never used.","'Typography' is defined but never used.","'MenuItem' is defined but never used.","'InputLabel' is defined but never used.","'Select' is defined but never used.","'button' is assigned a value but never used.","'formControl' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index f15a4b9..4c5b184 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,21 @@ import './App.css' import Navigation from './components/Navivation' import Timer from './components/Timer' -import Settings from './components/Settings' +import StoreProvider from './StoreProvider/index' function App() { return (
- - {/* */} -
+ + +
+ +
+ + + {/*
-
+
*/}
) } diff --git a/src/StoreProvider/index.js b/src/StoreProvider/index.js new file mode 100644 index 0000000..7ad617c --- /dev/null +++ b/src/StoreProvider/index.js @@ -0,0 +1,32 @@ +import React, { createContext, useReducer } from 'react' +import Reducer from '../reducers/settings' + +let initialState = { + automaticBreak: true, + automaticPomodoro: true, + alarmSong: '/songs/alarm_not_too_loud.mp3', + displayBreakMenu: true, + displayDocTitleTimer: true, + longBreakLength: 900, + lunchBreakLength: 2700, + playSong: true, + pomodoroLength: 1500, + pomodoroCount: 0, + pomodoroDailyTarget: 0, + pomodoroWeeklyTarget: 0, + sendNotifications: true, + shortBreakLength: 300, + openSettings: false, + error: null, + timerType: 'pomodoro', +} + +const Store = ({ children }) => { + const [state, dispatch] = useReducer(Reducer, initialState) + return ( + {children} + ) +} + +export const Context = createContext(initialState) +export default Store diff --git a/src/components/Navivation/SideBar.js b/src/components/Navivation/SideBar.js index e4a9ce1..b341e77 100644 --- a/src/components/Navivation/SideBar.js +++ b/src/components/Navivation/SideBar.js @@ -1,6 +1,10 @@ import React from 'react' import clsx from 'clsx' import { useSideBarStyles } from './style' +import { useContext } from 'react' +import { Context } from '../../StoreProvider/index' +import Settings from '../Settings' + import { Drawer, List, @@ -11,39 +15,47 @@ import { Icon, } from '@material-ui/core' +import { SET_OPEN_SETTINGS } from '../../types' + export default function TemporaryDrawer({ toggleSideBar, isVisible }) { + const [state, dispatch] = useContext(Context) const { list, fullList } = useSideBarStyles() const renderList = (anchor) => ( -
toggleSideBar()} - onKeyDown={() => toggleSideBar()} - > - - My Pomodoro App - + <> +
+ + My Pomodoro App + - + - - {[ - { name: 'Settings', icon: 'settings' }, - { name: 'Log', icon: 'history' }, - { name: 'FAQ', icon: 'help_outline' }, - ].map((item) => ( - - - {item.icon} - - - - ))} - -
+ + {[ + { + name: 'Settings', + icon: 'settings', + action: () => dispatch({ type: SET_OPEN_SETTINGS }), + }, + { name: 'Log', icon: 'history' }, + { name: 'FAQ', icon: 'help_outline' }, + ].map((item) => ( + + + {item.icon} + + + + ))} + +
+ {state.openSettings && } + ) return ( diff --git a/src/components/Navivation/index.js b/src/components/Navivation/index.js index fb44466..579675f 100644 --- a/src/components/Navivation/index.js +++ b/src/components/Navivation/index.js @@ -6,7 +6,6 @@ import SideBar from './SideBar' const Navigation = () => { const { root, alignNavItems, logo, menuButton } = useNavStyles() - const [isVisible, setIsVisible] = useState(false) const toggleSideBar = () => setIsVisible(!isVisible) @@ -28,7 +27,11 @@ const Navigation = () => { - + toggleSideBar()} + isVisible={isVisible} + toggleSideBar={toggleSideBar} + /> ) } diff --git a/src/components/Settings/SelectLongBreak.js b/src/components/Settings/SelectLongBreak.js new file mode 100644 index 0000000..acbea49 --- /dev/null +++ b/src/components/Settings/SelectLongBreak.js @@ -0,0 +1,45 @@ +import { useState, useContext } from 'react' +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core' +import { Context } from '../../StoreProvider/index' +import { SET_LONG_BREAK_LENGTH } from '../../types' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) + +const SelectSong = () => { + const { formControl } = useStyles() + const [state, dispatch] = useContext(Context) + const [open, setOpen] = useState(false) + + return ( + + + Select the length for long breaks + + + + ) +} + +export default SelectSong diff --git a/src/components/Settings/SelectLunchBreak.js b/src/components/Settings/SelectLunchBreak.js new file mode 100644 index 0000000..7db4b51 --- /dev/null +++ b/src/components/Settings/SelectLunchBreak.js @@ -0,0 +1,45 @@ +import { useState, useContext } from 'react' +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core' +import { Context } from '../../StoreProvider/index' +import { SET_LUNCH_BREAK_LENGTH } from '../../types' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) + +const SelectSong = () => { + const { formControl } = useStyles() + const [state, dispatch] = useContext(Context) + const [open, setOpen] = useState(false) + + return ( + + + Select the length for lunch breaks + + + + ) +} + +export default SelectSong diff --git a/src/components/Settings/SelectPomodoroLength.js b/src/components/Settings/SelectPomodoroLength.js new file mode 100644 index 0000000..8e89c05 --- /dev/null +++ b/src/components/Settings/SelectPomodoroLength.js @@ -0,0 +1,45 @@ +import { useState, useContext } from 'react' +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core' +import { Context } from '../../StoreProvider/index' +import { SET_POMODORO_LENGTH } from '../../types' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) + +const SelectSong = () => { + const { formControl } = useStyles() + const [state, dispatch] = useContext(Context) + const [open, setOpen] = useState(false) + + return ( + + + Select the pomodoro length + + + + ) +} + +export default SelectSong diff --git a/src/components/Settings/SelectShortBreak.js b/src/components/Settings/SelectShortBreak.js new file mode 100644 index 0000000..9cac923 --- /dev/null +++ b/src/components/Settings/SelectShortBreak.js @@ -0,0 +1,45 @@ +import { useState, useContext } from 'react' +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core' +import { Context } from '../../StoreProvider' +import { SET_SHORT_BREAK_LENGTH } from '../../types' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) + +const SelectSong = () => { + const { formControl } = useStyles() + const [state, dispatch] = useContext(Context) + const [open, setOpen] = useState(false) + + return ( + + + Select the length for short breaks + + + + ) +} + +export default SelectSong diff --git a/src/components/Settings/SelectSong.js b/src/components/Settings/SelectSong.js new file mode 100644 index 0000000..550d4ac --- /dev/null +++ b/src/components/Settings/SelectSong.js @@ -0,0 +1,47 @@ +import { useState, useContext } from 'react' +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core' +import { Context } from '../../StoreProvider/index' +import { SET_ALARM_SONG } from '../../types' +import { makeStyles } from '@material-ui/core/styles' +import songList from './songs' + +const useStyles = makeStyles((theme) => ({ + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) + +const SelectSong = () => { + const { formControl } = useStyles() + + const [state, dispatch] = useContext(Context) + const [open, setOpen] = useState(false) + + return ( + + + Select a sound for the alarm + + + + ) +} + +export default SelectSong diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js index 1130141..4d63660 100644 --- a/src/components/Settings/index.js +++ b/src/components/Settings/index.js @@ -1,21 +1,165 @@ -import { useState } from 'react' -import { Modal } from '@material-ui/core' +import { useState, useContext } from 'react' +import { Context } from '../../StoreProvider' +import SelectSong from './SelectSong' +import SelectShortBreak from './SelectShortBreak' +import SelectLongBreak from './SelectLongBreak' +import SelectLunchBreak from './SelectLunchBreak' +import SelectPomodoroLength from './SelectPomodoroLength' + +import { + Dialog, + DialogTitle, + DialogContent, + Button, + DialogActions, + Typography, + Icon, + IconButton, + FormControl, + FormControlLabel, + FormGroup, + Switch, + MenuItem, + InputLabel, + Select, +} from '@material-ui/core' + +import { + SET_PLAY_SONG, + SET_SEND_NOTIFICATIONS, + SET_DISPLAY_DOC_TITLE_TIMER, + SET_OPEN_SETTINGS, + SET_AUTOMATIC_BREAK, + SET_AUTOMATIC_POMODORO, + SET_DISPLAY_BREAK_MENU, +} from '../../types' + +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + modalHeader: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }, + button: { + display: 'block', + marginTop: theme.spacing(2), + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, +})) const Settings = () => { - const [openModal, setOpenModal] = useState(false) + const [state, dispatch] = useContext(Context) + + const { modalHeader, button, formControl } = useStyles() return ( - <> - setOpenModal(false)} - aria-labelledby='simple-modal-title' - aria-describedby='simple-modal-description' +
+ dispatch({ type: SET_OPEN_SETTINGS })} + aria-labelledby='customized-dialog-title' + open={state.openSettings} > -
HI I am a MOdal
- - - + dispatch({ type: SET_OPEN_SETTINGS })} + > +
+ Settings + dispatch({ type: SET_OPEN_SETTINGS })}> + close + +
+ + + {/* Settings */} + + + + dispatch({ type: SET_DISPLAY_DOC_TITLE_TIMER }) + } + name='Timer indication on the browser title' + /> + } + label='Timer indication on the browser title' + /> + dispatch({ type: SET_SEND_NOTIFICATIONS })} + name='Browser notifications' + /> + } + label='Browser notifications' + /> + dispatch({ type: SET_PLAY_SONG })} + name='Alarm' + /> + } + label='Alarm Song' + /> + dispatch({ type: SET_AUTOMATIC_BREAK })} + name='Automatic break' + /> + } + label='Automatic starts a new break when pomodoro is over' + /> + dispatch({ type: SET_AUTOMATIC_POMODORO })} + name='Automatic break' + /> + } + label='Automatic starts new pomodoro when break is over' + /> + dispatch({ type: SET_DISPLAY_BREAK_MENU })} + name='Automatic break' + /> + } + label='Enable breaks menu' + /> + + + + + + + + + + + + +
) } diff --git a/src/components/Settings/songs.js b/src/components/Settings/songs.js new file mode 100644 index 0000000..3f0a3de --- /dev/null +++ b/src/components/Settings/songs.js @@ -0,0 +1,16 @@ +const songList = [ + { name: 'Alarm-clock', path: '/songs/alarm_clock.mp3' }, + { name: 'Alarm not loud', path: '/songs/alarm_not_too_loud.mp3' }, + { name: 'Beat', path: '/songs/beat-alarm.mp3' }, + { name: 'Guitar', path: '/songs/guitar_alarm.mp3' }, + { + name: 'Dickory dock', + path: '/songs/hickory_dickory_dock-notification.mp3', + }, + { name: 'Electro', path: '/songs/pruzhina_electro.mp3' }, + { name: 'Samsung', path: '/songs/samsung_s1.mp3' }, + { name: 'Shorty', path: '/songs/shorty.mp3' }, + { name: 'ZvukBudilnika', path: '/songs/zvuk_budilnika.mp3' }, +] + +export default songList diff --git a/src/components/Timer/BreakControl.js b/src/components/Timer/BreakControl.js index 0a61e90..9842481 100644 --- a/src/components/Timer/BreakControl.js +++ b/src/components/Timer/BreakControl.js @@ -1,6 +1,7 @@ -import React from 'react' +import React, { useContext } from 'react' import { Toolbar, Button, Icon } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' +import { Context } from '../../StoreProvider/index' const useBreakControlStyles = makeStyles((theme) => ({ root: { @@ -15,6 +16,7 @@ const useBreakControlStyles = makeStyles((theme) => ({ })) const BreakControl = ({ setIsActive, setTime }) => { + const [state] = useContext(Context) const { root, m, mr } = useBreakControlStyles() const handleBreak = (breakLengh) => { @@ -27,7 +29,7 @@ const BreakControl = ({ setIsActive, setTime }) => { */}