Better timer (Resolve #96) (#103)

* feat: add long break * feat: Add an option to lengthen the current session * feat: Terminate current session early and get a broken Pomodoro record * feat: showing downloading progress in taskbar * feat: pause icon in tray
zxch3n · Oct 23, 2019 · 3539bb2 · 3539bb2
1 parent 4de5406
commit 3539bb2
Show file tree

Hide file tree

Showing 12 changed files with 327 additions and 66 deletions.
diff --git a/src/main/AutoUpdater.ts b/src/main/AutoUpdater.ts
@@ -22,13 +22,18 @@ export class AutoUpdater {
 
         autoUpdater.on('error', err => {
             sendStatusToWindow('error', 'Error in auto-updater. ' + err);
+            sendStatusToWindow('error', err);
         });
         autoUpdater.on('download-progress', progressObj => {
             let log_message = 'Download speed: ' + progressObj.bytesPerSecond;
             log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
             log_message =
                 log_message + ' (' + progressObj.transferred + '/' + progressObj.total + ')';
-            sendStatusToWindow('download-progress', log_message);
+            console.log(log_message);
+            sendStatusToWindow('download-progress', {
+                percent: progressObj.percent,
+                bytesPerSecond: progressObj.bytesPerSecond
+            });
         });
         autoUpdater.on('update-downloaded', info => {
             console.log(info);

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -114,11 +114,24 @@ app.on('ready', async () => {
     });
 
     await createWindow();
-    const autoUpdater = new AutoUpdater((type: string, info: string) => {
+    const autoUpdater = new AutoUpdater((type: string, info: any) => {
         console.log(info);
         if (win) {
             win.webContents.send(type, info);
         }
+
+        if (type === 'download-progress') {
+            const { percent } = info;
+            if (win) {
+                win.setProgressBar(percent / 100);
+            }
+        }
+
+        if (type === 'update-downloaded' || type === 'error') {
+            if (win) {
+                win.setProgressBar(-1);
+            }
+        }
     });
 
     ipcMain.on('download-update', () => {

diff --git a/src/renderer/components/Setting/Setting.tsx b/src/renderer/components/Setting/Setting.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TimerActionTypes, TimerState } from '../Timer/action';
 import styled from 'styled-components';
-import { Button, Icon, message, notification, Popconfirm, Slider, Switch } from 'antd';
+import { Button, Col, Icon, message, notification, Popconfirm, Row, Slider, Switch } from 'antd';
 import { deleteAllUserData, exportDBData } from '../../monitor/sessionManager';
 import { writeFile } from 'fs';
 import { shell, remote, app } from 'electron';
@@ -38,6 +38,10 @@ const marks = {
 
 const restMarks = {
     5: '5min',
+    10: '10min'
+};
+
+const longBreakMarks = {
     10: '10min',
     15: '15min',
     20: '20min'
@@ -61,6 +65,14 @@ export const Setting: React.FunctionComponent<Props> = (props: Props) => {
         props.setRestDuration(v * 60);
     }, []);
 
+    const onChangeLongBreak = React.useCallback((v: number | [number, number]) => {
+        if (v instanceof Array) {
+            return;
+        }
+
+        props.setLongBreakDuration(v * 60);
+    }, []);
+
     const switchScreenshot = React.useCallback((v: boolean) => {
         if (v) {
             props.setScreenShotInterval(5000);
@@ -131,24 +143,41 @@ export const Setting: React.FunctionComponent<Props> = (props: Props) => {
                 <Slider
                     marks={marks}
                     step={1}
-                    min={process.env.NODE_ENV === 'production' ? 15 : 2}
+                    min={process.env.NODE_ENV === 'production' ? 20 : 2}
                     max={60}
                     value={props.focusDuration / 60}
                     onChange={onChangeFocus}
                 />
             </SliderContainer>
 
-            <h4>Rest Duration</h4>
-            <SliderContainer>
-                <Slider
-                    marks={restMarks}
-                    step={1}
-                    min={process.env.NODE_ENV === 'production' ? 5 : 1}
-                    max={20}
-                    value={props.restDuration / 60}
-                    onChange={onChangeRest}
-                />
-            </SliderContainer>
+            <Row>
+                <Col span={12}>
+                    <h4>Short Break</h4>
+                    <SliderContainer>
+                        <Slider
+                            marks={restMarks}
+                            step={1}
+                            min={process.env.NODE_ENV === 'production' ? 5 : 1}
+                            max={10}
+                            value={props.restDuration / 60}
+                            onChange={onChangeRest}
+                        />
+                    </SliderContainer>
+                </Col>
+                <Col span={12}>
+                    <h4>Long Break</h4>
+                    <SliderContainer>
+                        <Slider
+                            marks={longBreakMarks}
+                            step={1}
+                            min={10}
+                            max={20}
+                            value={props.longBreakDuration / 60}
+                            onChange={onChangeLongBreak}
+                        />
+                    </SliderContainer>
+                </Col>
+            </Row>
 
             <h4>Start On Boot </h4>
             <ButtonWrapper>

diff --git a/src/renderer/components/Timer/SessionEndingMask.tsx b/src/renderer/components/Timer/SessionEndingMask.tsx
@@ -1,5 +1,5 @@
 import { Button, List, Popover, Row } from 'antd';
-import { actions } from '../Timer/action';
+import { actions, LONG_BREAK_INTERVAL } from '../Timer/action';
 import { PomodoroNumView } from './PomodoroNumView';
 import React from 'react';
 import styled from 'styled-components';
@@ -8,6 +8,12 @@ import { RootState } from '../../reducers';
 import { KanbanBoardState } from '../Kanban/Board/action';
 import { Dispatch } from 'redux';
 
+const ButtonContainer = styled.div`
+    position: absolute;
+    top: 16px;
+    right: 16px;
+`;
+
 const Mask = styled.div`
     left: 0;
     top: 0;
@@ -54,13 +60,15 @@ export interface InputProps {
     onCancel: () => void;
     onStart: () => void;
     pomodoroNum: number;
+    extendCurrentSession: (timeInMinutes: number) => void;
 }
 
 export interface MaskProps extends InputProps {
     setBoard: any;
     isFocusing: boolean;
     boardId?: string;
     boards: KanbanBoardState;
+    isLongBreak: boolean;
 }
 
 const _TimerMask = (props: MaskProps) => {
@@ -97,6 +105,21 @@ const _TimerMask = (props: MaskProps) => {
         props.onStart();
     };
 
+    const extend10 = React.useCallback(
+        (event: any) => {
+            event.stopPropagation();
+            props.extendCurrentSession(10);
+        },
+        [props.extendCurrentSession]
+    );
+    const extend5 = React.useCallback(
+        (event: any) => {
+            event.stopPropagation();
+            props.extendCurrentSession(5);
+        },
+        [props.extendCurrentSession]
+    );
+
     return (
         <Mask style={{ display: props.showMask ? 'flex' : 'none' }} onClick={props.onCancel}>
             <MaskInnerContainer>
@@ -110,27 +133,45 @@ const _TimerMask = (props: MaskProps) => {
                             </ProjectName>
                         </Popover>
                     ) : (
-                        <ProjectName>Resting</ProjectName>
+                        <ProjectName>Break</ProjectName>
                     )}
                     <h1 style={{ color: 'white', fontSize: '3.5em', marginBottom: '1em' }}>
                         Session Finished
                     </h1>
                 </Row>
                 <Button size="large" onClick={onStartClick}>
-                    Start {props.isFocusing ? 'Resting' : 'Focusing'}
+                    Start
+                    {!props.isFocusing
+                        ? ' Focusing'
+                        : props.isLongBreak
+                        ? ' Long Break'
+                        : ' Short Break'}
                 </Button>
                 <Row style={{ marginTop: '2em' }}>
                     <h1 style={{ color: 'white' }}>Today Pomodoros</h1>
                     <PomodoroNumView num={props.pomodoroNum} color={'#f9ec52'} showNum={false} />
                 </Row>
             </MaskInnerContainer>
+            {props.isFocusing ? (
+                <ButtonContainer>
+                    <Button style={{ margin: 4 }} title={'Extend 5 minutes'} onClick={extend5}>
+                        +5
+                    </Button>
+                    <Button style={{ margin: 4 }} title={'Extend 10 minutes'} onClick={extend10}>
+                        +10
+                    </Button>
+                </ButtonContainer>
+            ) : (
+                undefined
+            )}
         </Mask>
     );
 };
 
 export const TimerMask = connect(
     (state: RootState, props: InputProps) => ({
         isFocusing: state.timer.isFocusing,
+        isLongBreak: !((state.timer.iBreak + 1) % LONG_BREAK_INTERVAL),
         boardId: state.timer.boardId,
         boards: state.kanban.boards
     }),