Notifications

Author: Yadro

src/components/SettingsModal/SettingsModal.tsx

@@ -1,5 +1,14 @@
 import React, { useCallback, useState } from 'react';
-import { Form, Modal, Select, Space, TimePicker } from 'antd';
+import {
+  Checkbox,
+  Divider,
+  Form,
+  Modal,
+  Select,
+  Space,
+  TimePicker,
+} from 'antd';
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import { observer } from 'mobx-react';
 // eslint-disable-next-line import/named
 import moment, { Moment } from 'moment';
@@ -24,6 +33,9 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
     const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
       false
     );
+    const [showNotifications, setShowNotifications] = useState<boolean>(
+      settings.showNotifications
+    );
     const [profile, setProfile] = useState<string>(settings.currentProfile);
     const [workingHours, setWorkingHours] = useState<Moment | null>(
       moment(settings.numberOfWorkingHours).utcOffset(0)
@@ -35,9 +47,10 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
         numberOfWorkingHours: workingHours
           ? timeToMs(workingHours?.toDate())
           : DEFAULT_SETTINGS.numberOfWorkingHours,
+        showNotifications,
       });
       onClose();
-    }, [profile, workingHours, onClose]);
+    }, [profile, workingHours, showNotifications, onClose]);
 
     const handleChangeProfile = useCallback((selected: string) => {
       setProfile(selected);
@@ -53,6 +66,10 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
       []
     );
 
+    const handleChangeNotifications = useCallback((e: CheckboxChangeEvent) => {
+      setShowNotifications(e.target.checked);
+    }, []);
+
     return (
       <Modal
         title="Settings"
@@ -81,7 +98,8 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
             />
           </Space>
         </Form.Item>
-        <Form.Item label="Number of working hours">
+        <Divider />
+        <Form.Item label="Number of working hours" labelCol={{ span: 10 }}>
           <TimePicker
             value={workingHours}
             onChange={(value) => setWorkingHours(value)}
@@ -91,6 +109,12 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
             allowClear={false}
           />
         </Form.Item>
+        <Form.Item label="Notifications" labelCol={{ span: 10 }}>
+          <Checkbox
+            checked={showNotifications}
+            onChange={handleChangeNotifications}
+          />
+        </Form.Item>
       </Modal>
     );
   }

src/modules/settings/SettingsStore.ts

@@ -20,8 +20,15 @@ export default class SettingsStore {
   }
 
   setSettings(newSettings: ISettings) {
-    const { currentProfile, numberOfWorkingHours } = newSettings;
+    const {
+      currentProfile,
+      numberOfWorkingHours,
+      showNotifications,
+    } = newSettings;
+
     this.settings.numberOfWorkingHours = numberOfWorkingHours;
+    this.settings.showNotifications = showNotifications;
+    this.rootStore.tasksStore.removeReminder();
     this.setActiveProfile(currentProfile);
     this.service.save(this.settings);
   }

src/modules/settings/models/ISettings.ts

@@ -1,4 +1,5 @@
 export interface ISettings {
   currentProfile: string;
   numberOfWorkingHours: number;
+  showNotifications: boolean;
 }

src/modules/settings/models/SettingsModel.ts

@@ -6,14 +6,15 @@ export const DEFAULT_SETTINGS = {
   profiles: ['profile1'],
   numberOfWorkingHours: 8 * 60 * 60 * 1000,
   isFirstLoad: true,
+  showNotifications: true,
 };
 
 export default class SettingsModel extends AbstractModel {
   currentProfile: string = DEFAULT_SETTINGS.currentProfile;
   profiles: string[] = DEFAULT_SETTINGS.profiles;
   numberOfWorkingHours: number = DEFAULT_SETTINGS.numberOfWorkingHours;
   isFirstLoad: boolean = DEFAULT_SETTINGS.isFirstLoad;
-  // TODO showNotifications
+  showNotifications: boolean = DEFAULT_SETTINGS.showNotifications;
 
   constructor(data: any) {
     super();
@@ -23,6 +24,7 @@ export default class SettingsModel extends AbstractModel {
       profiles: observable,
       numberOfWorkingHours: observable,
       isFirstLoad: observable,
+      showNotifications: observable,
     });
   }
 }

src/modules/tasks/TaskStore.ts

@@ -191,11 +191,15 @@ export default class TaskStore {
   }
 
   private setupReminder(task?: TaskModel) {
-    if (this.interval !== undefined) {
-      clearInterval(this.interval);
+    BadgeService.setBadge(!!task);
+
+    if (!this.rootStore.settingsStore.settings.showNotifications) {
+      return;
     }
+
+    this.removeReminder();
+
     if (task) {
-      BadgeService.setBadge(true);
       console.log('Setup: Task in progress');
       this.interval = setInterval(() => {
         console.log('Task in progress');
@@ -204,7 +208,6 @@ export default class TaskStore {
         });
       }, 40 * 60 * 1000);
     } else {
-      BadgeService.setBadge(false);
       console.log('Setup: No tasks in progress');
       this.interval = setInterval(() => {
         console.log('No tasks in progress');
@@ -214,4 +217,10 @@ export default class TaskStore {
       }, 15 * 60 * 1000);
     }
   }
+
+  removeReminder() {
+    if (this.interval !== undefined) {
+      clearInterval(this.interval);
+    }
+  }
 }