[TaskList, Timer] Render custom title, Timer functionality

Author: Dmitry Yadrikhinsky

package.json

@@ -249,6 +249,7 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "dependencies": {
+    "@ant-design/icons": "4.6.2",
     "antd": "4.15.0",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",

src/base/repositories/AbstractFileRepository.ts

@@ -1,10 +1,6 @@
 const fs = require('fs');
 
-type RecordUnknown = unknown | unknown[];
-
-export default abstract class AbstractFileRepository<
-  T extends RecordUnknown = RecordUnknown
-> {
+export default abstract class AbstractFileRepository<T = any> {
   folder: string = 'profile1';
   fileName: string = 'defaultFileName.json';
 

src/models/TaskModel.ts

@@ -1,9 +1,12 @@
 import AbstractModel from '../base/AbstractModel';
 import { ITreeItem } from '../types/ITreeItem';
+import { computed, makeObservable, observable } from 'mobx';
 
 interface ITaskModel extends ITreeItem<ITaskModel> {
   projectId: string;
   checked: boolean;
+  time: number[][];
+  active: boolean;
 }
 
 export default class TaskModel extends AbstractModel implements ITaskModel {
@@ -12,9 +15,31 @@ export default class TaskModel extends AbstractModel implements ITaskModel {
   children: TaskModel[] = [];
   projectId: string = '';
   checked: boolean = false;
+  active: boolean = false;
+  time: number[][] = [];
 
   constructor(props: ITaskModel) {
     super();
     this.load(props);
+    makeObservable(this, {
+      key: observable,
+      title: observable,
+      children: observable,
+      projectId: observable,
+      checked: observable,
+      active: observable,
+      time: observable,
+      duration: computed,
+    });
+  }
+
+  get duration() {
+    return this.time.reduce((prev: number, range: number[]) => {
+      if (range.length > 0) {
+        const duration = (range[1] ? range[1] : Date.now()) - range[0];
+        return prev + duration;
+      }
+      return 0;
+    }, 0);
   }
 }

src/screens/projects/Projects.tsx

@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { Button, Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
-import { useHistory } from 'react-router-dom';
+import { Key } from 'rc-tree/lib/interface';
+
+import './Projects.less';
 
 import TaskInput from './components/TaskInput';
 import rootStore from '../../services/RootStore';
 import TreeList from './components/TreeList';
 import TaskModel from '../../models/TaskModel';
 import ProjectModel from '../../models/ProjectModel';
 import ProjectModal from './components/ProjectModal';
-import { Key } from 'rc-tree/lib/interface';
-import './Projects.less';
+import TaskNode from './components/TaskNode/TaskNode';
 
 const { Sider } = Layout;
 
@@ -29,6 +30,9 @@ const TaskList = TreeList(
     getCheckedKeys() {
       return tasksStore.getCheckedKeys(projectStore.activeProject);
     },
+    titleRender(node: TaskModel) {
+      return <TaskNode model={node} />;
+    },
   }
 );
 

src/screens/projects/components/TaskNode/TaskNode.less

@@ -0,0 +1,15 @@
+.task-node {
+  display: flex;
+}
+
+.task-title {
+  flex: 1;
+}
+
+.task-node__actions {
+  display: none;
+}
+
+.task-node:hover .task-node__actions {
+  display: inline;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CaretRightFilled, DeleteOutlined } from '@ant-design/icons';
+import TaskModel from '../../../../models/TaskModel';
+import './TaskNode.less';
+
+interface TaskNodeProps {
+  model: TaskModel;
+}
+
+export default function TaskNode({ model }: TaskNodeProps) {
+  return (
+    <div className="task-node">
+      <span className="task-title">{model.title}</span>
+      <span className="task-node__actions">
+        <CaretRightFilled />
+        <DeleteOutlined />
+      </span>
+    </div>
+  );
+}

src/screens/projects/components/TreeList.tsx

@@ -15,8 +15,10 @@ export default function TreeList<T extends ITreeItem>(
   updateData: (items: T[]) => void,
   options?: {
     checkable?: boolean;
+    selectable?: boolean;
     onCheck?: (checkedKeys: React.Key[]) => void;
     getCheckedKeys?: () => React.Key[];
+    titleRender?: (nodeData: T) => React.ReactNode;
   }
 ) {
   return observer(function TreeList({ onSelect }: TreeListProps) {
@@ -95,11 +97,13 @@ export default function TreeList<T extends ITreeItem>(
         checkedKeys={options?.getCheckedKeys?.()}
         checkable={options?.checkable}
         draggable
+        selectable={options?.selectable}
         blockNode
         onDrop={onDrop}
         treeData={data}
         onSelect={onSelect}
         onCheck={options?.checkable ? options?.onCheck : undefined}
+        titleRender={options?.titleRender}
       />
     );
   });

src/services/tasks/TaskFactory.ts

@@ -1,3 +1,13 @@
 import AbstractFactory from '../../base/AbstractFactory';
+import TaskRecordModel from '../../models/TaskRecordModel';
+import TaskModel from '../../models/TaskModel';
 
-export default class TaskFactory extends AbstractFactory {}
+export default class TaskFactory extends AbstractFactory {
+  createTasks(data: TaskRecordModel): TaskRecordModel {
+    const newData: TaskRecordModel = {};
+    Object.keys(data).forEach((projectId) => {
+      newData[projectId] = this.createList(TaskModel, data[projectId]);
+    });
+    return newData;
+  }
+}

src/services/tasks/TaskRepository.ts

@@ -1,5 +1,8 @@
 import AbstractFileRepository from '../../base/repositories/AbstractFileRepository';
+import TaskRecordModel from '../../models/TaskRecordModel';
 
-export default class TaskRepository extends AbstractFileRepository {
+export default class TaskRepository extends AbstractFileRepository<
+  TaskRecordModel
+> {
   fileName = 'tasks.json';
 }

src/services/tasks/TaskService.ts

@@ -8,8 +8,8 @@ export default class TaskService implements IService<TaskRecordModel> {
   taskFactory: TaskFactory = new TaskFactory();
 
   getAll(): TaskRecordModel {
-    const tasks = this.taskRepository.restore({});
-    return tasks as TaskRecordModel;
+    const data: TaskRecordModel = this.taskRepository.restore({});
+    return this.taskFactory.createTasks(data);
   }
 
   save(data: TaskRecordModel) {