Throttle

Author: Yadro

src/config.ts

@@ -1,3 +1,5 @@
 export const Features = {
   myDay: false,
 };
+
+export const THROTTLE_SAVE_JSON_MS = 500;

src/helpers/Throttle.ts

@@ -0,0 +1,14 @@
+export default function throttle(func: (...args: any[]) => void, ms: number) {
+  let timer: number | undefined;
+
+  function wrapper(this: any, ...args: any[]) {
+    if (timer !== undefined) {
+      window.clearTimeout(timer);
+    }
+    timer = window.setTimeout(() => {
+      func.apply(this, args);
+    }, ms);
+  }
+
+  return wrapper;
+}

src/modules/tasks/TaskStore.ts

@@ -1,4 +1,4 @@
-import { autorun, makeAutoObservable, observable } from 'mobx';
+import { autorun, makeAutoObservable } from 'mobx';
 import { v4 as uuid } from 'uuid';
 import TaskService from './TaskService';
 import TaskModel, { ITimeRangeModel } from './models/TaskModel';
@@ -16,13 +16,19 @@ import {
   ETimeRangeEvents,
 } from '../../services/gaService/EEvents';
 import { DEFAULT_PROJECT_ID } from '../projects/models/ProjectModel';
+import throttle from '../../helpers/Throttle';
+import { THROTTLE_SAVE_JSON_MS } from '../../config';
 
 export default class TaskStore {
   tasks: TasksByProject = {};
   activeTask: TaskModel | undefined;
   versionHash = uuid();
   private tasksService = new TaskService();
   private interval: NodeJS.Timeout | undefined;
+  private saveInStorage = throttle(() => {
+    this.tasksService.save(this.tasks);
+    this.updateVersion();
+  }, THROTTLE_SAVE_JSON_MS);
 
   constructor(private rootStore: RootStore) {
     makeAutoObservable(this);
@@ -36,13 +42,12 @@ export default class TaskStore {
 
   set(projectId: string, tasksInProject: TaskModel[]) {
     this.tasks[projectId] = tasksInProject;
-    this.tasksService.save(this.tasks);
+    this.saveInStorage();
   }
 
   setTime(task: TaskModel, timeIndex: number, timeRange: ITimeRangeModel) {
     task.time[timeIndex] = timeRange;
-    this.tasksService.save(this.tasks);
-    this.updateVersion();
+    this.saveInStorage();
     GaService.event(EEventCategory.TimeRange, ETimeRangeEvents.Update);
   }
 
@@ -51,9 +56,8 @@ export default class TaskStore {
       this.stopTimer();
     }
 
-    task.time.splice(timeIndex, 1);
-    this.tasksService.save(this.tasks);
-    this.updateVersion();
+    task.time.splice(timeIndex, 1); // TODO move to task
+    this.saveInStorage();
     GaService.event(EEventCategory.TimeRange, ETimeRangeEvents.Delete);
   }
 
@@ -94,8 +98,7 @@ export default class TaskStore {
       this.tasks[projectId] = [];
     }
     this.tasks[projectId] = [...this.tasks[projectId], task];
-    this.updateVersion();
-    this.tasksService.save(this.tasks);
+    this.saveInStorage();
     GaService.event(EEventCategory.Tasks, ETasksEvents.Create);
   }
 
@@ -130,36 +133,31 @@ export default class TaskStore {
         );
       }
     }
-    this.tasksService.save(this.tasks);
-    this.updateVersion();
+    this.saveInStorage();
     GaService.event(EEventCategory.Tasks, ETasksEvents.Delete);
   }
 
   removeProjectTasks(projectKey: string) {
     delete this.tasks[projectKey];
-    this.tasksService.save(this.tasks);
-    this.updateVersion();
+    this.saveInStorage();
   }
 
   startTimer(task: TaskModel) {
     this.stopTimer(true);
     this.activeTask = task;
     task.start();
     this.setupReminder(task);
-    this.tasksService.save(this.tasks);
-    this.updateVersion();
+    this.saveInStorage();
   }
 
   stopTimer(silent?: boolean) {
     if (this.activeTask) {
       this.activeTask.stop();
-      // this.activeTask = undefined;
     }
 
     if (!silent) {
       this.setupReminder();
-      this.tasksService.save(this.tasks);
-      this.updateVersion();
+      this.saveInStorage();
     }
   }
 
@@ -193,7 +191,7 @@ export default class TaskStore {
         checkTaskFn
       );
 
-      this.set(projectId, this.tasks[projectId]);
+      this.saveInStorage();
     }
     GaService.event(EEventCategory.Tasks, ETasksEvents.Check);
   }
@@ -212,7 +210,7 @@ export default class TaskStore {
         markExpanded
       );
 
-      this.set(projectId, this.tasks[projectId]);
+      this.saveInStorage();
     }
   }