Last active day

Author: Yadro

.vscode/settings.json

@@ -10,6 +10,11 @@
   "javascript.format.enable": false,
   "typescript.format.enable": false,
 
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+
   "search.exclude": {
     ".git": true,
     ".eslintcache": true,

src/helpers/ArrayHelper.ts

@@ -44,3 +44,7 @@ export function mapCurrentNext<T, R = any>(
   }
   return result;
 }
+
+export function last<T>(arr: T[]): T | undefined {
+  return arr[arr.length - 1];
+}

src/helpers/DateTime.ts

@@ -1,5 +1,6 @@
 import { ITimeRangeModel } from '../modules/tasks/models/TaskModel';
-import { format } from 'date-fns';
+import { format, isSameMonth, isSameYear } from 'date-fns';
+
 import { iterPrevCurrent } from './ArrayHelper';
 
 function timePad(time: number): string {
@@ -45,6 +46,17 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   return timeItemsToString(sign, hrs, mins, secs, showSeconds);
 }
 
+export function taskLastActiveDateFormat(date: Date) {
+  const now = new Date();
+  if (isSameMonth(date, now)) {
+    return format(date, 'E dd');
+  }
+  if (isSameYear(date, now)) {
+    return format(date, 'dd/MM');
+  }
+  return format(date, 'dd/MM/yy');
+}
+
 export function timeToMs(date: Date) {
   const hours = date.getHours();
   const minutes = date.getMinutes();

src/helpers/TreeModelHelper.ts

@@ -1,14 +1,9 @@
-import { toJS } from 'mobx';
-
 import { ITreeItem, ITreeItemWithParent } from '../types/ITreeItem';
 import { TaskInMyDay } from '../modules/tasks/models/TaskInMyDay';
 import TaskModel from '../modules/tasks/models/TaskModel';
 import TaskFactory from '../modules/tasks/TaskFactory';
 import ProjectModel from '../modules/projects/models/ProjectModel';
 
-// @ts-ignore TODO remove
-window.toJS = toJS;
-
 const TreeModelHelper = {
   getPathToNode<T extends ITreeItemWithParent = ITreeItemWithParent>(node: T) {
     const result: string[] = [];

src/modules/tasks/models/TaskModel.ts

@@ -154,7 +154,7 @@ export default class TaskModel extends AbstractModel
     const normalDate = startOfDay(date);
     const found = this.datesInProgress.find((d) => isSameDay(d, normalDate));
     if (!found) {
-      this.datesInProgress.push(normalDate);
+      this.datesInProgress = [...this.datesInProgress, normalDate];
     }
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useCallback } from 'react';
+import React, { SyntheticEvent, useCallback, useMemo } from 'react';
 import {
   CaretRightFilled,
   DeleteOutlined,
@@ -12,6 +12,8 @@ import TaskModel from '../../../../modules/tasks/models/TaskModel';
 import rootStore from '../../../../modules/RootStore';
 import * as TaskHooks from '../../../../hooks/TaskHooks';
 import { Features } from '../../../../config';
+import { last } from '../../../../helpers/ArrayHelper';
+import { taskLastActiveDateFormat } from '../../../../helpers/DateTime';
 
 const { tasksStore } = rootStore;
 
@@ -24,6 +26,14 @@ export default observer(function TaskNode({ task }: TaskNodeProps) {
 
   const duration = TaskHooks.useTaskDuration(task);
 
+  const lastDateInProgress = useMemo(() => {
+    const lastDate = last(task.datesInProgress);
+    if (lastDate) {
+      return taskLastActiveDateFormat(lastDate)
+    }
+    return undefined;
+  }, [task.datesInProgress]);
+
   const preventDefault = useCallback((fn: () => void) => {
     return (e: SyntheticEvent) => {
       e.stopPropagation();
@@ -34,6 +44,7 @@ export default observer(function TaskNode({ task }: TaskNodeProps) {
   return (
     <div className={classes.taskNode}>
       <span className={classes.taskTitle}>{task.title}</span>
+      <span className={classes.date}>{lastDateInProgress}</span>
       <span>{duration}</span>
       <span className={classes.taskNodeActions}>
         {Features.myDay && (
@@ -72,4 +83,7 @@ const useStyle = createUseStyles({
   taskTitle: {
     flex: 1,
   },
+  date: {
+    marginRight: 5,
+  }
 });