103 |
104 | )
105 | }
106 |
107 | const toPercentage = (seconds, total) =>
108 | parseInt(Math.round(((seconds / total) * 100).toFixed(0)), 10)
109 | const formatValue = (seconds, total) => {
110 | return seconds > 60
111 | ? Math.floor(seconds / 60).toFixed(0) +
112 | ':' +
113 | (seconds % 60).toString().padStart(2, '0') +
114 | 'm'
115 | : seconds + 's'
116 | }
117 |
--------------------------------------------------------------------------------
/TESTCASES.md:
--------------------------------------------------------------------------------
1 | # Test Cases
2 |
3 | ### Welcome Guide
4 |
5 | Upon first starting the app, there should be a welcome guide that introduces the user to the application
6 |
7 | Scroll through the 7 steps and ensure that it exits to the main menu
8 |
9 | ### Minimize/Maximize
10 |
11 | At the top right, select the downward directing arrow
12 |
13 | Confirm the UI changes to exclude the settings cog, preferences, session count and analytics.
14 |
15 | Select the now upward facing arrow
16 |
17 | Confirm the UI changes to include the settings cog, preferences, session count and analytics.
18 |
19 | ### Settings
20 |
21 | At the top right, select the cog icon
22 |
23 | A drop down menu should appear with the options: Enable notifications, Enable launch at login, autohide window on start, auto show window on finish and enable drag window
24 |
25 | ##### Enable drag window (currently failing)
26 |
27 | Ensure you cannot drag the window around
28 |
29 | Select the option "Enable drag window" from the settinds drop down
30 |
31 | Ensure that the window is now movable
32 |
33 | ### Pomodoro Preferences
34 |
35 | At the bottom right, select the stopwatch icon
36 |
37 | Confirm that a menu pops up.
38 |
39 | Change the Work time option to 1 min (for next test)
40 | Change the Break time option to 1 min (for next test)
41 |
42 | Ensure that the Repeat option is set to 0 and that the user can increase the number of cycles by 2.
43 |
44 | Ensure that the user cannot decrease the number of cycles below 0
45 |
46 | Ensure that the "Add a delay" option is set to 0 and that the user can increase the number of cycles by 2.
47 |
48 | Ensure that the user cannot decrease the number of "Add a delay" below 0
49 |
50 | ### Start
51 |
52 | At the bottom, select the icon that looks like a play button
53 |
54 | Confirm the Pomodoro clock begins
55 |
56 | After one minute, ensure that a bell dings and the break timer starts
57 |
58 | After one minute, the break should end and the UI should return to normal
59 |
60 | ### Analytics
61 |
62 | At the bottom left, select the icon that looks like a bar graph
63 |
64 | Confirm a new menu pops up
65 |
66 | Find the box that is titled Total and ensure the number beside the flame icon is the same as the one at the very top left of the application
67 |
68 | Ensure there are three options to choose from: Week, Months and Goals
69 |
70 | When Week is selected, there should be a bar graph that displays the number of minutes worked. It should be greater than 1 after running the "Start" test
71 |
72 | When Months is selected, there should be a checkered graph that displays the days that the pomodoro clock was started. It should be highlighted on the current day.
73 |
74 | When Goals is selected, the user should be given the option to add a Goals
75 |
76 | ##### Add a Goal
77 |
78 | Select the plus icon on the left
79 |
80 | The user should be able to decrease the amount of work to .1, but no lower
81 |
82 | The user should be able to select the unit of time: day, week, month or year
83 |
84 | Select the blue button on the far right
85 |
86 | A new goal should appear
87 |
88 | Exit the menu
89 |
90 | ### Session Count
91 |
92 | At the top left, ensure there is a flame icon with a number beside it
93 |
94 | Start the pomodoro clock once again
95 |
96 | Ensure the number increases by 1
97 |
98 | ### Work-Till Functionality
99 |
100 | Directly above the start button, ensure there is an option to work until a certain time
101 |
102 | Push that button and ensure a pomodoro session starts
103 |
104 | Stop the session by selecting the start button again, which should now be a stop button
105 |
--------------------------------------------------------------------------------
/packages/app/src/components/Footer/Goals.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 |
3 | function Goals() {
4 | const [goals, setGoals] = useState([])
5 |
6 | const [hour, setHour] = useState(1)
7 | const [type, setType] = useState('day')
8 |
9 | const [isShow, setIsShow] = useState(false)
10 |
11 | useEffect(() => {
12 | window.ipcRenderer.send('getGoalsData')
13 |
14 | window.ipcRenderer.on('getGoalsData', (event, payload) => {
15 | setGoals(payload.reverse())
16 | })
17 |
18 | window.ipcRenderer.on('refreshGoals', () => {
19 | window.ipcRenderer.send('getGoalsData')
20 | })
21 |
22 | return () => {
23 | window.ipcRenderer.removeAllListeners('getGoalsData')
24 | window.ipcRenderer.removeAllListeners('refreshGoals')
25 | }
26 | }, [])
27 |
28 | function addGoal() {
29 | if (hour <= 0) return
30 |
31 | const isCreated = goals.findIndex(goal => {
32 | return goal.type === type && goal.value === hour * 60
33 | })
34 | if (isCreated !== -1) return
35 |
36 | window.ipcRenderer.send('addGoal', {
37 | value: hour * 60,
38 | type
39 | })
40 |
41 | // Hide input
42 | setIsShow(false)
43 | }
44 |
45 | function removeGoal(type, value) {
46 | window.ipcRenderer.send('removeGoal', {
47 | type,
48 | value
49 | })
50 | }
51 |
52 | function toggleAddGoalCard() {
53 | isShow ? setIsShow(false) : setIsShow(true)
54 | }
55 |
56 | return (
57 |
43 |
44 | ## Features
45 |
46 | Click on the arrows to get more informations about these features
47 |
48 |
49 | ⏱️ Change work time and pause time
50 |
51 |
Want to work 27 min ? You can.
52 |
53 |
54 |
55 |
56 |
57 |
58 | ⏲️ Automagically set the timer till the next hour
59 |
60 |
Want to work until 8 PM ? You can set the timer automagically for you.
61 | Note: It will revert your settings after the timer.
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | 🚩 Goals
70 |
71 |
Want to work at least 1 hour a day ? You can create a goal for that.
72 |
73 |
74 |
75 |
76 |
77 |
78 | 🔥 Streak
79 |
80 |
It counts how many times you finished a pomodoro.
81 |
82 |
83 |
84 |
85 |
86 |
87 | 📊 Statistics
88 |
89 |
It gives you insights about your productivity.
90 |
91 |
92 |
93 |
94 |
95 |
96 | 🔁 Cycles
97 |
98 |
If set, it will automatically stop the pomodoro after `x` times.
99 |
100 |
101 |
102 |
103 |
104 | ## Want to contribute ?
105 |
106 | ### Prerequisites
107 | * Have [Node.js](https://nodejs.org/en/) installed (> 8)
108 | * Have [Yarn](https://yarnpkg.com/en/) installed (> 1.4.2)
109 |
110 | ### Steps
111 |
112 | 1. Clone the repository
113 | ```sh
114 | $ git clone https://github.com/KeziahMoselle/tempus.git
115 | ```
116 | 2. Create a new branch (i.e: feat-new-feature)
117 |
118 | 3. Install dependencies :
119 | ```sh
120 | $ cd tempus && yarn
121 | ```
122 |
123 | 4. Run the app
124 |
125 | In a browser :
126 | ```sh
127 | $ yarn web
128 | ```
129 |
130 | In Electron :
131 | ```sh
132 | $ yarn electron
133 | ```
134 |
135 | ### Build
136 |
137 | To build the app (without Electron) you will need to run :
138 |
139 | The `/build` directory is in `packages/app/build`
140 |
141 | ```sh
142 | $ yarn build:app
143 | ```
144 |
145 | To build the app with Electron you will need to run :
146 |
147 | The `/build` directory is in `packages/electron/dist`
148 |
149 | ```sh
150 | $ yarn build:electron
151 | ```
152 |
153 | ### Tests
154 |
155 | Run tests for the application only :
156 | ```sh
157 | $ yarn test:app
158 | ```
159 |
160 | Run tests for the Electron app :
161 | ```sh
162 | $ yarn test:electron
163 | ```
164 |
165 | See [Test Cases (need to implement)](./TESTCASES.md)
166 |
167 | ### Project tree
168 |
169 | ```
170 | |-- packages
171 | |-- app The React app
172 | | |-- build The build of the React app
173 | | |-- public .html and assets go here
174 | | |-- src React components and assets for the components
175 | |-- core Modules being shared between the browser and Node
176 | |-- electron
177 | |-- assets Assets like tray icons
178 | |-- dist The build of the electron app
179 | |-- tests Tests
180 | |-- utils Utility functions
181 | ```
182 |
183 | ## Built With
184 |
185 | * [Electron](https://electronjs.org/) - framework for creating native applications with web technologies
186 | * [React](https://reactjs.org) - A JavaScript library for building user interfaces
187 |
188 | ## Contributors
189 |
190 | Thank you ❤️
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 | ## License
201 |
202 | This project is licensed under the [MIT License](LICENSE).
203 |
--------------------------------------------------------------------------------
/packages/app/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import './assets/index.css'
3 | import Header from './components/Header'
4 | import Counter from './components/Counter'
5 | import Controls from './components/Controls'
6 | import Welcome from './components/Welcome/index'
7 |
8 | class App extends Component {
9 | state = {
10 | state: '', // Can be '', 'counting' or 'pausing'
11 | total: 1500, // Total of seconds for the counting interval
12 | count: 0, // Count the seconds to `total`
13 | totalPause: 300, // Total of seconds for the pausing interval
14 | countPause: 0, // Count the seconds for `totalPause`
15 | numberOfCycle: 0, // Repeat the counter `x` times (0 mean infinity)
16 | countCycle: 0, // Count the number of repetition
17 | sessionStreak: 0, // Count the streak this session
18 | loadedConfig: false, // Is the config has been fetched
19 | nextHour: null,
20 | workTillDelayedMinutes: 0, // Delayed minutes for 'Work till' (Allow working until 1.)
21 | shouldResetValues: {
22 | // Used for `workTillNearestHour()`
23 | shouldReset: false, // Should we revert the old values ?
24 | oldTotal: null, // Old value for total seconds
25 | oldCycle: null // Old value for cycle
26 | },
27 | finishedWelcome: false,
28 | allowDrag: false,
29 | windowStyle: 'restored' // Can be 'compacted' or 'restored'
30 | }
31 |
32 | componentDidMount() {
33 | if (localStorage.getItem('finishedWelcome')) {
34 | this.setState({
35 | finishedWelcome: true
36 | })
37 | }
38 |
39 | // Listeners from the Tray menu
40 | window.ipcRenderer.on('start', () => {
41 | if (this.state.state === '') {
42 | this.start()
43 | } else {
44 | this.stop()
45 | }
46 | })
47 |
48 | window.ipcRenderer.on('stop', () => {
49 | if (this.state.state) {
50 | this.stop()
51 | }
52 | })
53 | // Send `handshake` event to receive new value from the store
54 | window.ipcRenderer.send('handshake')
55 | // Receive new values from the store
56 | window.ipcRenderer.once('handshake', (event, data) => {
57 | this.setState({
58 | total: data.work,
59 | totalPause: data.pause,
60 | sessionStreak: data.sessionStreak,
61 | numberOfCycle: data.numberOfCycle,
62 | loadedConfig: true,
63 | allowDrag: data.isDraggable,
64 | workTillDelayedMinutes: data.workTillDelayedMinutes
65 | })
66 |
67 | // Interval to update `this.state.nextHour`
68 | this.updateNextHour(data.workTillDelayedMinutes)
69 | })
70 | }
71 |
72 | /**
73 | * Launch the counter
74 | * Creates the `countInterval` variable
75 | * Send `counting` event to the main process
76 | */
77 | start = displayWorkNotification => {
78 | if (this.state.state === 'counting') return // If already counting return
79 | this.countInterval = setInterval(this.increment, 1000)
80 | this.setState({
81 | state: 'counting'
82 | })
83 |
84 | // Update icon at 25%
85 | this.timeout25 = setTimeout(() => {
86 | window.ipcRenderer.send('updateTrayIcon', 'one')
87 | }, this.state.total * 0.25 * 1000)
88 |
89 | // Update icon at 50%
90 | this.timeout50 = setTimeout(() => {
91 | window.ipcRenderer.send('updateTrayIcon', 'two')
92 | }, this.state.total * 0.5 * 1000)
93 |
94 | // Update icon at 75%
95 | this.timeout75 = setTimeout(() => {
96 | window.ipcRenderer.send('updateTrayIcon', 'three')
97 | }, this.state.total * 0.75 * 1000)
98 |
99 | // Update icon at 90%
100 | this.timeout90 = setTimeout(() => {
101 | window.ipcRenderer.send('updateTrayIcon', 'four')
102 | }, this.state.total * 0.9 * 1000)
103 |
104 | window.ipcRenderer.send('counting', displayWorkNotification)
105 | }
106 |
107 | /**
108 | * Triggered every 1s when `state.state` = counting
109 | * Increment the `state.count`
110 | * Create the `pauseInterval` when `state.count` > `state.total`
111 | */
112 | increment = () => {
113 | if (this.state.count >= this.state.total) {
114 | // The work interval is finished
115 | this.stop()
116 | this.setState(prevState => ({
117 | state: 'pausing',
118 | sessionStreak: prevState.sessionStreak + 1,
119 | countCycle: prevState.countCycle + 1
120 | }))
121 |
122 | /* Cycles */
123 | // The maximum number of cycle has been reached
124 | if (
125 | this.state.numberOfCycle > 0 &&
126 | this.state.countCycle >= this.state.numberOfCycle
127 | ) {
128 | this.setState({
129 | countCycle: 0
130 | })
131 |
132 | // Get the old values back
133 | if (this.state.shouldResetValues.shouldReset) {
134 | this.revertValues()
135 | }
136 |
137 | // Display the notification 'You finished the pomodoro'
138 | window.ipcRenderer.send('finished')
139 | window.ipcRenderer.send('updateData', this.state.total / 60)
140 |
141 | new Audio('./assets/audio/notification-long.wav').play()
142 |
143 | return this.stop()
144 | }
145 |
146 | new Audio('./assets/audio/notification.wav').play()
147 |
148 | /* Streak */
149 | window.ipcRenderer.send('updateData', this.state.total / 60)
150 | /* Set pause state */
151 | window.ipcRenderer.send('pausing')
152 | /* Begin to count pause */
153 | return (this.pauseInterval = setInterval(this.incrementPause, 1000))
154 | }
155 |
156 | // Continue to increment the count variable
157 | this.setState(prevState => ({
158 | count: prevState.count + 1
159 | }))
160 | }
161 |
162 | /**
163 | * Triggered every 1s when `state.isPause` = true
164 | * Increment the `state.countPause`
165 | * Switch to the `countInterval`
166 | */
167 | incrementPause = () => {
168 | // Max value for `state.countPause`
169 | if (this.state.countPause >= this.state.totalPause) {
170 | new Audio('./assets/audio/notification.wav').play()
171 | this.stop()
172 | return this.start(true) // True to display the work notification
173 | }
174 | this.setState(prevState => ({
175 | countPause: prevState.countPause + 1
176 | }))
177 | }
178 |
179 | /**
180 | * Work till the nearest hour
181 | */
182 | workTillNearestHour = () => {
183 | const date = new Date()
184 | const minutes = date.getMinutes() // i.e 32 (min)
185 | const seconds = date.getSeconds() // i.e 16 (sec)
186 | const secondsOfWork =
187 | (60 - minutes + this.state.workTillDelayedMinutes) * 60 - seconds
188 |
189 | // Get old values to restore them later
190 | const { total, numberOfCycle } = this.state
191 |
192 | this.setState({
193 | total: secondsOfWork,
194 | numberOfCycle: 1,
195 | shouldResetValues: {
196 | shouldReset: true,
197 | oldTotal: total,
198 | oldCycle: numberOfCycle
199 | }
200 | })
201 |
202 | // Start the counter, but it will automatically stop after `secondsOfWork` seconds
203 | this.start()
204 | }
205 |
206 | updateNextHour = value => {
207 | const date = new Date()
208 |
209 | date.setHours(date.getHours() + 1)
210 |
211 | let minutesValue
212 | if (value === undefined) {
213 | minutesValue = this.state.workTillDelayedMinutes
214 | } else {
215 | minutesValue = value
216 | }
217 | date.setMinutes(minutesValue)
218 |
219 | const nextHour = date.toLocaleString('en-US', {
220 | hour: 'numeric',
221 | minute: '2-digit',
222 | hour12: true
223 | })
224 |
225 | this.setState({
226 | nextHour: nextHour
227 | })
228 |
229 | const [, minutes] = new Date().toLocaleTimeString().split(':') // i.e 32
230 |
231 | // Run again the next hour to update the UI
232 | this.updateNextHourInterval = setInterval(
233 | this.updateNextHour,
234 | 1000 * 60 * (60 - minutes)
235 | )
236 | }
237 |
238 | /**
239 | * Will revert old values after `workTillNearestHour`
240 | */
241 | revertValues = () => {
242 | const { oldTotal, oldCycle } = this.state.shouldResetValues
243 | // Restore old values
244 | this.setState({
245 | total: oldTotal,
246 | numberOfCycle: oldCycle,
247 | shouldResetValues: {
248 | shouldReset: false
249 | }
250 | })
251 | }
252 |
253 | /**
254 | * Clear all intervals
255 | * Clear the state
256 | * Send `idle` event to the main process
257 | */
258 | stop = isManual => {
259 | clearInterval(this.countInterval)
260 | clearInterval(this.pauseInterval)
261 |
262 | clearTimeout(this.timeout25)
263 | clearTimeout(this.timeout50)
264 | clearTimeout(this.timeout75)
265 | clearTimeout(this.timeout90)
266 |
267 | this.setState({
268 | state: '',
269 | count: 0,
270 | countPause: 0
271 | })
272 |
273 | if (isManual && this.state.shouldResetValues.shouldReset) {
274 | this.revertValues()
275 |
276 | // Display the notification 'You finished the pomodoro'
277 | // If it's manual -> don't show
278 | window.ipcRenderer.send('finished', isManual)
279 | }
280 |
281 | if (isManual) {
282 | // Cancel the pausing timeout 'You must work during...'
283 | window.ipcRenderer.send('pausing', isManual)
284 | }
285 |
286 | window.ipcRenderer.send('idle')
287 | }
288 |
289 | resetTime = () => {
290 | this.setState({
291 | total: 1500,
292 | totalPause: 300,
293 | numberOfCycle: 0
294 | })
295 | window.ipcRenderer.send('updateConfig', {
296 | work: 1500,
297 | pause: 300,
298 | numberOfCycle: 0
299 | })
300 | }
301 |
302 | /**
303 | * Set a new value for work time
304 | */
305 | setWork = minutes => {
306 | const seconds = parseInt(minutes) * 60
307 | if (!seconds) return
308 | this.setState({
309 | total: seconds
310 | })
311 | }
312 |
313 | /**
314 | * Set a new value for pause time
315 | */
316 | setPause = minutes => {
317 | const seconds = parseInt(minutes) * 60
318 | if (!seconds) return
319 | this.setState({
320 | totalPause: seconds
321 | })
322 | }
323 |
324 | /**
325 | * Set a new value for numberOfCycle
326 | */
327 | setNumberOfCycle = newValue => {
328 | if (newValue < 0) return
329 | this.setState({
330 | numberOfCycle: parseInt(newValue, 10)
331 | })
332 | }
333 |
334 | /**
335 | * Set a new value for workTillDelayedMinutes
336 | */
337 | setWorkTillDelayedMinutes = newValue => {
338 | if (newValue < 0) return
339 | if (newValue > 59) return
340 |
341 | clearInterval(this.updateNextHourInterval)
342 |
343 | this.setState({
344 | workTillDelayedMinutes: parseInt(newValue, 10)
345 | })
346 |
347 | this.updateNextHour(parseInt(newValue, 10))
348 | }
349 |
350 | /**
351 | * Set the style of the window
352 | */
353 | winCompact = () => {
354 | window.ipcRenderer.send('win-compact')
355 | this.setState({
356 | windowStyle: 'compacted'
357 | })
358 | }
359 |
360 | winRestore = () => {
361 | window.ipcRenderer.send('win-restore')
362 | this.setState({
363 | windowStyle: 'restored'
364 | })
365 | }
366 |
367 | /**
368 | * Show a confirmation dialog before quit the app
369 | */
370 | quit = () => {
371 | window.ipcRenderer.send('win-close')
372 | }
373 |
374 | finishedWelcome = () => {
375 | this.setState({
376 | finishedWelcome: true
377 | })
378 | localStorage.setItem('finishedWelcome', true)
379 | }
380 |
381 | render() {
382 | if (this.state.finishedWelcome) {
383 | return (
384 |
45 | 
53 | 
60 | 
70 | 
75 | 
80 | 
101 | 
3 | 
16 |
17 |
18 |
19 | 
20 |
21 |
22 |
23 | 
24 |
25 |
26 |
27 | 
28 |
29 |
30 |
31 | 
32 |
33 |
34 | 
38 | 
42 | 
54 | 
65 | 
74 | 
83 | 
92 | 
101 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 |
199 |
200 | ## License
201 |
202 | This project is licensed under the [MIT License](LICENSE).
203 |
--------------------------------------------------------------------------------
/packages/app/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import './assets/index.css'
3 | import Header from './components/Header'
4 | import Counter from './components/Counter'
5 | import Controls from './components/Controls'
6 | import Welcome from './components/Welcome/index'
7 |
8 | class App extends Component {
9 | state = {
10 | state: '', // Can be '', 'counting' or 'pausing'
11 | total: 1500, // Total of seconds for the counting interval
12 | count: 0, // Count the seconds to `total`
13 | totalPause: 300, // Total of seconds for the pausing interval
14 | countPause: 0, // Count the seconds for `totalPause`
15 | numberOfCycle: 0, // Repeat the counter `x` times (0 mean infinity)
16 | countCycle: 0, // Count the number of repetition
17 | sessionStreak: 0, // Count the streak this session
18 | loadedConfig: false, // Is the config has been fetched
19 | nextHour: null,
20 | workTillDelayedMinutes: 0, // Delayed minutes for 'Work till' (Allow working until 1.)
21 | shouldResetValues: {
22 | // Used for `workTillNearestHour()`
23 | shouldReset: false, // Should we revert the old values ?
24 | oldTotal: null, // Old value for total seconds
25 | oldCycle: null // Old value for cycle
26 | },
27 | finishedWelcome: false,
28 | allowDrag: false,
29 | windowStyle: 'restored' // Can be 'compacted' or 'restored'
30 | }
31 |
32 | componentDidMount() {
33 | if (localStorage.getItem('finishedWelcome')) {
34 | this.setState({
35 | finishedWelcome: true
36 | })
37 | }
38 |
39 | // Listeners from the Tray menu
40 | window.ipcRenderer.on('start', () => {
41 | if (this.state.state === '') {
42 | this.start()
43 | } else {
44 | this.stop()
45 | }
46 | })
47 |
48 | window.ipcRenderer.on('stop', () => {
49 | if (this.state.state) {
50 | this.stop()
51 | }
52 | })
53 | // Send `handshake` event to receive new value from the store
54 | window.ipcRenderer.send('handshake')
55 | // Receive new values from the store
56 | window.ipcRenderer.once('handshake', (event, data) => {
57 | this.setState({
58 | total: data.work,
59 | totalPause: data.pause,
60 | sessionStreak: data.sessionStreak,
61 | numberOfCycle: data.numberOfCycle,
62 | loadedConfig: true,
63 | allowDrag: data.isDraggable,
64 | workTillDelayedMinutes: data.workTillDelayedMinutes
65 | })
66 |
67 | // Interval to update `this.state.nextHour`
68 | this.updateNextHour(data.workTillDelayedMinutes)
69 | })
70 | }
71 |
72 | /**
73 | * Launch the counter
74 | * Creates the `countInterval` variable
75 | * Send `counting` event to the main process
76 | */
77 | start = displayWorkNotification => {
78 | if (this.state.state === 'counting') return // If already counting return
79 | this.countInterval = setInterval(this.increment, 1000)
80 | this.setState({
81 | state: 'counting'
82 | })
83 |
84 | // Update icon at 25%
85 | this.timeout25 = setTimeout(() => {
86 | window.ipcRenderer.send('updateTrayIcon', 'one')
87 | }, this.state.total * 0.25 * 1000)
88 |
89 | // Update icon at 50%
90 | this.timeout50 = setTimeout(() => {
91 | window.ipcRenderer.send('updateTrayIcon', 'two')
92 | }, this.state.total * 0.5 * 1000)
93 |
94 | // Update icon at 75%
95 | this.timeout75 = setTimeout(() => {
96 | window.ipcRenderer.send('updateTrayIcon', 'three')
97 | }, this.state.total * 0.75 * 1000)
98 |
99 | // Update icon at 90%
100 | this.timeout90 = setTimeout(() => {
101 | window.ipcRenderer.send('updateTrayIcon', 'four')
102 | }, this.state.total * 0.9 * 1000)
103 |
104 | window.ipcRenderer.send('counting', displayWorkNotification)
105 | }
106 |
107 | /**
108 | * Triggered every 1s when `state.state` = counting
109 | * Increment the `state.count`
110 | * Create the `pauseInterval` when `state.count` > `state.total`
111 | */
112 | increment = () => {
113 | if (this.state.count >= this.state.total) {
114 | // The work interval is finished
115 | this.stop()
116 | this.setState(prevState => ({
117 | state: 'pausing',
118 | sessionStreak: prevState.sessionStreak + 1,
119 | countCycle: prevState.countCycle + 1
120 | }))
121 |
122 | /* Cycles */
123 | // The maximum number of cycle has been reached
124 | if (
125 | this.state.numberOfCycle > 0 &&
126 | this.state.countCycle >= this.state.numberOfCycle
127 | ) {
128 | this.setState({
129 | countCycle: 0
130 | })
131 |
132 | // Get the old values back
133 | if (this.state.shouldResetValues.shouldReset) {
134 | this.revertValues()
135 | }
136 |
137 | // Display the notification 'You finished the pomodoro'
138 | window.ipcRenderer.send('finished')
139 | window.ipcRenderer.send('updateData', this.state.total / 60)
140 |
141 | new Audio('./assets/audio/notification-long.wav').play()
142 |
143 | return this.stop()
144 | }
145 |
146 | new Audio('./assets/audio/notification.wav').play()
147 |
148 | /* Streak */
149 | window.ipcRenderer.send('updateData', this.state.total / 60)
150 | /* Set pause state */
151 | window.ipcRenderer.send('pausing')
152 | /* Begin to count pause */
153 | return (this.pauseInterval = setInterval(this.incrementPause, 1000))
154 | }
155 |
156 | // Continue to increment the count variable
157 | this.setState(prevState => ({
158 | count: prevState.count + 1
159 | }))
160 | }
161 |
162 | /**
163 | * Triggered every 1s when `state.isPause` = true
164 | * Increment the `state.countPause`
165 | * Switch to the `countInterval`
166 | */
167 | incrementPause = () => {
168 | // Max value for `state.countPause`
169 | if (this.state.countPause >= this.state.totalPause) {
170 | new Audio('./assets/audio/notification.wav').play()
171 | this.stop()
172 | return this.start(true) // True to display the work notification
173 | }
174 | this.setState(prevState => ({
175 | countPause: prevState.countPause + 1
176 | }))
177 | }
178 |
179 | /**
180 | * Work till the nearest hour
181 | */
182 | workTillNearestHour = () => {
183 | const date = new Date()
184 | const minutes = date.getMinutes() // i.e 32 (min)
185 | const seconds = date.getSeconds() // i.e 16 (sec)
186 | const secondsOfWork =
187 | (60 - minutes + this.state.workTillDelayedMinutes) * 60 - seconds
188 |
189 | // Get old values to restore them later
190 | const { total, numberOfCycle } = this.state
191 |
192 | this.setState({
193 | total: secondsOfWork,
194 | numberOfCycle: 1,
195 | shouldResetValues: {
196 | shouldReset: true,
197 | oldTotal: total,
198 | oldCycle: numberOfCycle
199 | }
200 | })
201 |
202 | // Start the counter, but it will automatically stop after `secondsOfWork` seconds
203 | this.start()
204 | }
205 |
206 | updateNextHour = value => {
207 | const date = new Date()
208 |
209 | date.setHours(date.getHours() + 1)
210 |
211 | let minutesValue
212 | if (value === undefined) {
213 | minutesValue = this.state.workTillDelayedMinutes
214 | } else {
215 | minutesValue = value
216 | }
217 | date.setMinutes(minutesValue)
218 |
219 | const nextHour = date.toLocaleString('en-US', {
220 | hour: 'numeric',
221 | minute: '2-digit',
222 | hour12: true
223 | })
224 |
225 | this.setState({
226 | nextHour: nextHour
227 | })
228 |
229 | const [, minutes] = new Date().toLocaleTimeString().split(':') // i.e 32
230 |
231 | // Run again the next hour to update the UI
232 | this.updateNextHourInterval = setInterval(
233 | this.updateNextHour,
234 | 1000 * 60 * (60 - minutes)
235 | )
236 | }
237 |
238 | /**
239 | * Will revert old values after `workTillNearestHour`
240 | */
241 | revertValues = () => {
242 | const { oldTotal, oldCycle } = this.state.shouldResetValues
243 | // Restore old values
244 | this.setState({
245 | total: oldTotal,
246 | numberOfCycle: oldCycle,
247 | shouldResetValues: {
248 | shouldReset: false
249 | }
250 | })
251 | }
252 |
253 | /**
254 | * Clear all intervals
255 | * Clear the state
256 | * Send `idle` event to the main process
257 | */
258 | stop = isManual => {
259 | clearInterval(this.countInterval)
260 | clearInterval(this.pauseInterval)
261 |
262 | clearTimeout(this.timeout25)
263 | clearTimeout(this.timeout50)
264 | clearTimeout(this.timeout75)
265 | clearTimeout(this.timeout90)
266 |
267 | this.setState({
268 | state: '',
269 | count: 0,
270 | countPause: 0
271 | })
272 |
273 | if (isManual && this.state.shouldResetValues.shouldReset) {
274 | this.revertValues()
275 |
276 | // Display the notification 'You finished the pomodoro'
277 | // If it's manual -> don't show
278 | window.ipcRenderer.send('finished', isManual)
279 | }
280 |
281 | if (isManual) {
282 | // Cancel the pausing timeout 'You must work during...'
283 | window.ipcRenderer.send('pausing', isManual)
284 | }
285 |
286 | window.ipcRenderer.send('idle')
287 | }
288 |
289 | resetTime = () => {
290 | this.setState({
291 | total: 1500,
292 | totalPause: 300,
293 | numberOfCycle: 0
294 | })
295 | window.ipcRenderer.send('updateConfig', {
296 | work: 1500,
297 | pause: 300,
298 | numberOfCycle: 0
299 | })
300 | }
301 |
302 | /**
303 | * Set a new value for work time
304 | */
305 | setWork = minutes => {
306 | const seconds = parseInt(minutes) * 60
307 | if (!seconds) return
308 | this.setState({
309 | total: seconds
310 | })
311 | }
312 |
313 | /**
314 | * Set a new value for pause time
315 | */
316 | setPause = minutes => {
317 | const seconds = parseInt(minutes) * 60
318 | if (!seconds) return
319 | this.setState({
320 | totalPause: seconds
321 | })
322 | }
323 |
324 | /**
325 | * Set a new value for numberOfCycle
326 | */
327 | setNumberOfCycle = newValue => {
328 | if (newValue < 0) return
329 | this.setState({
330 | numberOfCycle: parseInt(newValue, 10)
331 | })
332 | }
333 |
334 | /**
335 | * Set a new value for workTillDelayedMinutes
336 | */
337 | setWorkTillDelayedMinutes = newValue => {
338 | if (newValue < 0) return
339 | if (newValue > 59) return
340 |
341 | clearInterval(this.updateNextHourInterval)
342 |
343 | this.setState({
344 | workTillDelayedMinutes: parseInt(newValue, 10)
345 | })
346 |
347 | this.updateNextHour(parseInt(newValue, 10))
348 | }
349 |
350 | /**
351 | * Set the style of the window
352 | */
353 | winCompact = () => {
354 | window.ipcRenderer.send('win-compact')
355 | this.setState({
356 | windowStyle: 'compacted'
357 | })
358 | }
359 |
360 | winRestore = () => {
361 | window.ipcRenderer.send('win-restore')
362 | this.setState({
363 | windowStyle: 'restored'
364 | })
365 | }
366 |
367 | /**
368 | * Show a confirmation dialog before quit the app
369 | */
370 | quit = () => {
371 | window.ipcRenderer.send('win-close')
372 | }
373 |
374 | finishedWelcome = () => {
375 | this.setState({
376 | finishedWelcome: true
377 | })
378 | localStorage.setItem('finishedWelcome', true)
379 | }
380 |
381 | render() {
382 | if (this.state.finishedWelcome) {
383 | return (
384 |