Feature settings

.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"]
+[{"/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"]

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 (
     <div className='App'>
-      <Navigation />
-      {/* <Settings /> */}
-      <header className='App-header'>
+      <StoreProvider>
+        <Navigation />
+        <header className='App-header'>
+          <Timer />
+        </header>
+      </StoreProvider>
+
+      {/* <header className='App-header'>
         <Timer />
-      </header>
+      </header> */}
     </div>
   )
 }

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 (
+    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
+  )
+}
+
+export const Context = createContext(initialState)
+export default Store

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) => (
-    <div
-      className={clsx(list, {
-        [fullList]: anchor === 'top' || anchor === 'bottom',
-      })}
-      role='presentation'
-      onClick={() => toggleSideBar()}
-      onKeyDown={() => toggleSideBar()}
-    >
-      <List>
-        <ListItem button>My Pomodoro App</ListItem>
-      </List>
+    <>
+      <div
+        className={clsx(list, {
+          [fullList]: anchor === 'top' || anchor === 'bottom',
+        })}
+        role='presentation'
+      >
+        <List>
+          <ListItem button>My Pomodoro App</ListItem>
+        </List>
 
-      <Divider />
+        <Divider />
 
-      <List>
-        {[
-          { name: 'Settings', icon: 'settings' },
-          { name: 'Log', icon: 'history' },
-          { name: 'FAQ', icon: 'help_outline' },
-        ].map((item) => (
-          <ListItem button key={item.name}>
-            <ListItemIcon childre=''>
-              <Icon>{item.icon}</Icon>
-            </ListItemIcon>
-            <ListItemText primary={item.name} />
-          </ListItem>
-        ))}
-      </List>
-    </div>
+        <List>
+          {[
+            {
+              name: 'Settings',
+              icon: 'settings',
+              action: () => dispatch({ type: SET_OPEN_SETTINGS }),
+            },
+            { name: 'Log', icon: 'history' },
+            { name: 'FAQ', icon: 'help_outline' },
+          ].map((item) => (
+            <ListItem button key={item.name} onClick={item.action}>
+              <ListItemIcon>
+                <Icon>{item.icon}</Icon>
+              </ListItemIcon>
+              <ListItemText primary={item.name} />
+            </ListItem>
+          ))}
+        </List>
+      </div>
+      {state.openSettings && <Settings />}
+    </>
   )
 
   return (

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 = () => {
           </IconButton>
         </Toolbar>
       </AppBar>
-      <SideBar isVisible={isVisible} toggleSideBar={toggleSideBar} />
+      <SideBar
+        onClick={() => toggleSideBar()}
+        isVisible={isVisible}
+        toggleSideBar={toggleSideBar}
+      />
     </>
   )
 }

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 (
+    <FormControl className={formControl}>
+      <InputLabel id='select-short-break-label'>
+        Select the length for long breaks
+      </InputLabel>
+      <Select
+        labelId='select-short-break-label'
+        id='short-break'
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        onChange={(e) =>
+          dispatch({ type: SET_LONG_BREAK_LENGTH, payload: e.target.value })
+        }
+        value={state.longBreakLength}
+      >
+        {[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30].map((option) => (
+          <MenuItem key={option} value={option * 60}>
+            {`${option} minutes`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}
+
+export default SelectSong

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 (
+    <FormControl className={formControl}>
+      <InputLabel id='select-short-break-label'>
+        Select the length for lunch breaks
+      </InputLabel>
+      <Select
+        labelId='select-short-break-label'
+        id='short-break'
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        onChange={(e) =>
+          dispatch({ type: SET_LUNCH_BREAK_LENGTH, payload: e.target.value })
+        }
+        value={state.lunchBreakLength}
+      >
+        {[20, 25, 30, 35, 40, 45, 50, 60, 90, 120].map((option) => (
+          <MenuItem key={option} value={option * 60}>
+            {`${option} minutes`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}
+
+export default SelectSong

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 (
+    <FormControl className={formControl}>
+      <InputLabel id='select-short-break-label'>
+        Select the pomodoro length
+      </InputLabel>
+      <Select
+        labelId='select-short-break-label'
+        id='short-break'
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        onChange={(e) =>
+          dispatch({ type: SET_POMODORO_LENGTH, payload: e.target.value })
+        }
+        value={state.pomodoroLength}
+      >
+        {[15, 20, 25, 30, 40, 45, 50, 55, 60].map((option) => (
+          <MenuItem key={option} value={option * 60}>
+            {`${option} minutes`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}
+
+export default SelectSong

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 (
+    <FormControl className={formControl}>
+      <InputLabel id='select-short-break-label'>
+        Select the length for short breaks
+      </InputLabel>
+      <Select
+        labelId='select-short-break-label'
+        id='short-break'
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        onChange={(e) =>
+          dispatch({ type: SET_SHORT_BREAK_LENGTH, payload: e.target.value })
+        }
+        value={state.shortBreakLength}
+      >
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((option) => (
+          <MenuItem key={option} value={option * 60}>
+            {`${option} ${option === 1 ? 'minute' : 'minutes'}`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}
+
+export default SelectSong