[Timer] useTaskDuration

Author: Dmitry Yadrikhinsky

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   extends: [
     'plugin:import/errors',
     'plugin:react/recommended',

src/hooks/TaskHooks.ts

@@ -0,0 +1,36 @@
+import { msToTime } from '../helpers/DateTime';
+import TaskModel from '../models/TaskModel';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ *
+ * @param model
+ */
+export function useTaskDuration(model: TaskModel | undefined) {
+  model = model || ({} as TaskModel);
+
+  const intervalRef = useRef<NodeJS.Timeout>();
+  const [duration, setDuration] = useState<string>('');
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+    const duration = model.duration;
+    if (duration !== 0) {
+      setDuration(msToTime(duration));
+    }
+    if (model.active) {
+      intervalRef.current = setInterval(() => {
+        setDuration(msToTime(model?.duration || 0));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [model, model.active]);
+
+  return duration;
+}

src/models/ProjectModel.ts

@@ -7,10 +7,11 @@ export default class ProjectModel extends AbstractModel
   implements IProjectItem {
   key: string = '';
   title: string = '';
-  children: IProjectItem[] = [];
+  children: ProjectModel[] = [];
 
   constructor(props: IProjectItem) {
     super();
     this.load(props);
+    this.children = props.children?.map((json) => new ProjectModel(json)) || [];
   }
 }

src/screens/projects/components/TaskNode/TaskNode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import {
   CaretRightFilled,
   DeleteOutlined,
@@ -9,7 +9,7 @@ import './TaskNode.less';
 
 import TaskModel from '../../../../models/TaskModel';
 import rootStore from '../../../../services/RootStore';
-import { msToTime } from '../../../../helpers/DateTime';
+import { useTaskDuration } from '../../../../hooks/TaskHooks';
 
 const { tasksStore } = rootStore;
 
@@ -18,25 +18,7 @@ interface TaskNodeProps {
 }
 
 export default function TaskNode({ model }: TaskNodeProps) {
-  const intervalRef = useRef<NodeJS.Timeout>();
-  const [duration, setDuration] = useState<string>('');
-
-  useEffect(() => {
-    const duration = model.duration;
-    if (duration !== 0) {
-      setDuration(msToTime(duration));
-    }
-    if (model.active) {
-      intervalRef.current = setInterval(() => {
-        setDuration(msToTime(model.duration));
-      }, 1000);
-    }
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [model.active]);
+  const duration = useTaskDuration(model);
 
   return (
     <div className="task-node">

src/services/projects/ProjectStore.ts

@@ -17,14 +17,16 @@ export default class ProjectStore {
     this.projectService.save(this.projects);
   }
 
+  get(projectId: string): ProjectModel | undefined {
+    return this.getRecursive(this.projects, projectId);
+  }
+
   add(project: ProjectModel) {
     this.projects.push(project);
     this.projects = this.projects.slice();
     this.projectService.save(this.projects);
   }
 
-  delete(project: ProjectModel) {}
-
   setActiveProject(projectId: string) {
     this.activeProject = projectId;
   }
@@ -33,4 +35,23 @@ export default class ProjectStore {
     this.projects = this.projectService.getAll();
     this.activeProject = Object.keys(this.projects)[0];
   }
+
+  private getRecursive(
+    projects: ProjectModel[],
+    projectId: string
+  ): ProjectModel | undefined {
+    for (const projectKey in projects) {
+      const project = projects[projectKey];
+      if (project.key === projectId) {
+        return project;
+      }
+      if (Array.isArray(project.children)) {
+        const found = this.getRecursive(project.children, projectId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return undefined;
+  }
 }

src/services/tasks/TaskStore.ts

@@ -31,8 +31,6 @@ export default class TaskStore {
     this.tasksService.save(this.tasks);
   }
 
-  delete(projectId: string, task: TaskModel) {}
-
   startTimer(task: TaskModel) {
     if (this.activeTask) {
       this.endTimer(this.activeTask);
@@ -89,7 +87,8 @@ export default class TaskStore {
   }
 
   private findActiveTaskRecursive(tasks: TaskModel[]): TaskModel | undefined {
-    return tasks.find((task) => {
+    for (const taskKey in tasks) {
+      const task = tasks[taskKey];
       if (task.active) {
         return task;
       }
@@ -99,8 +98,8 @@ export default class TaskStore {
           return found;
         }
       }
-      return false;
-    });
+    }
+    return undefined;
   }
 
   private getCheckedKeysRecursive(tasks: TaskModel[], checkedIds: string[]) {