Dont hide paused task, remove less

Author: Yadro

src/App.global.less

@@ -1,7 +1,7 @@
 @font-face {
-  font-family: "Material Icons";
-  src: url("~material-icons/iconfont/material-icons.woff2") format("woff2"),
-    url("~material-icons/iconfont/material-icons.woff2") format("woff");
+  font-family: 'Material Icons';
+  src: url('~material-icons/iconfont/material-icons.woff2') format('woff2'),
+    url('~material-icons/iconfont/material-icons.woff2') format('woff');
 }
 
 @import '~material-icons/css/material-icons.min.css';
@@ -16,9 +16,3 @@
   display: flex;
   align-items: center;
 }
-
-.flex-1 {
-  flex: 1
-}
-
-@purple: #713A91;

src/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Layout } from 'antd';
 import { observer } from 'mobx-react';
 import useMediaQuery from 'react-hook-media-query';
+import { createUseStyles } from 'react-jss';
 
 import HeaderLink from '../HeaderLink/HeaderLink';
 import Profile from '../Profile/Profile';
@@ -13,6 +14,7 @@ const { Header: HeaderBase } = Layout;
 
 const query = '(min-width: 950px)';
 function Header() {
+  const style = useStyle();
   const isBigScreen = useMediaQuery(query);
 
   return (
@@ -26,11 +28,17 @@ function Header() {
       <HeaderLink>
         <Link to="/dashboard">Dashboard</Link>
       </HeaderLink>
-      <span className="flex-1">{isBigScreen && <ProgressBar />}</span>
+      <span className={style.flex1}>{isBigScreen && <ProgressBar />}</span>
       <TaskControl />
       <Profile />
     </HeaderBase>
   );
 }
 
 export default observer(Header);
+
+const useStyle = createUseStyles({
+  flex1: {
+    flex: 1,
+  },
+});

src/components/PlayStopButton/PlayStopButton.tsx

@@ -1,7 +1,6 @@
-import React, { SyntheticEvent } from 'react';
+import React, { SyntheticEvent, useCallback } from 'react';
 import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
-import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
 
 import CircleButton from '../CircleButton/CircleButton';
@@ -15,36 +14,35 @@ interface PlayStopButtonProps {
   className?: string;
 }
 
-export default observer(function PlayStopButton({
-  task,
-  className,
-}: PlayStopButtonProps) {
+function PlayStopButton({ task, className }: PlayStopButtonProps) {
   const classes = useStyles();
 
-  function handleClick(e: SyntheticEvent) {
-    e.stopPropagation();
-    if (task) {
-      if (!task?.active) {
-        tasksStore.startTimer(task);
-      } else {
-        tasksStore.stopTimer();
+  const toggleTask = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+      if (task) {
+        if (!task?.active) {
+          tasksStore.startTimer(task);
+        } else {
+          tasksStore.stopTimer();
+        }
       }
-    }
-  }
+    },
+    [task]
+  );
 
   return (
-    <CircleButton
-      onClick={handleClick}
-      className={clsx('play-stop-button', className)}
-    >
+    <CircleButton onClick={toggleTask} className={className}>
       {!task?.active ? (
         <CaretRightFilled className={classes.icon} />
       ) : (
         <PauseOutlined className={classes.icon} />
       )}
     </CircleButton>
   );
-});
+}
+
+export default observer(PlayStopButton);
 
 const useStyles = createUseStyles({
   icon: {

src/components/TaskControl/TaskControl.less

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
-import { PauseOutlined } from '@ant-design/icons';
-
-import './TaskControl.less';
+import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../modules/RootStore';
 import * as TaskHooks from '../../hooks/TaskHooks';
-import CircleButton from '../CircleButton/CircleButton';
+import PlayStopButton from '../PlayStopButton/PlayStopButton';
+import { PURPLE_COLOR } from '../../consts';
 
 const { tasksStore, projectStore } = rootStore;
 
-export default observer(function TaskControl() {
+function TaskControl() {
+  const styles = useStyles();
   const task = tasksStore.activeTask;
   const duration = TaskHooks.useTaskDuration(task);
 
@@ -20,17 +20,49 @@ export default observer(function TaskControl() {
 
   if (task) {
     return (
-      <span className="task-control">
-        <div className="task-control__info">
-          <span className="task-control__project">{project?.title}</span>
+      <span className={styles.root}>
+        <div className={styles.info}>
+          <span className={styles.project}>{project?.title}</span>
           <span>{task.title}</span>
         </div>
-        <span className="task-control__duration">{duration}</span>
-        <CircleButton onClick={() => tasksStore.stopTimer()}>
-          <PauseOutlined />
-        </CircleButton>
+        <span className={styles.duration}>{duration}</span>
+        <PlayStopButton task={task} />
       </span>
     );
   }
-  return <span className="task-control">No active tasks</span>;
+  return <span className={styles.root}>No active tasks</span>;
+}
+
+export default observer(TaskControl);
+
+const useStyles = createUseStyles({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    height: '44px',
+    marginLeft: '20px',
+    padding: '8px',
+    borderRadius: '5px',
+    lineHeight: '16px',
+    color: 'white',
+    backgroundColor: PURPLE_COLOR,
+  },
+  project: {
+    fontSize: '12px',
+  },
+  info: {
+    display: 'inline-flex',
+    flex: 1,
+    flexDirection: 'column',
+    marginRight: '8px',
+    width: '140px',
+    '& span': {
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+  },
+  duration: {
+    marginRight: '8px',
+  },
 });

src/components/TaskControl/TaskControl.tsx

@@ -74,7 +74,7 @@ const TimeRangeModal = observer(
 
     function handleDelete() {
       if (taskTime) {
-        tasksStore.deleteTime(taskTime.task, taskTime.index);
+        tasksStore.removeTime(taskTime.task, taskTime.index);
       }
       onClose();
     }

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -0,0 +1 @@
+export const PURPLE_COLOR = '#713A91';

src/consts/index.ts

@@ -35,8 +35,6 @@ export function getTimeItems(
   });
   taskTime.sort((a, b) => compareAsc(a.time.start, b.time.start));
 
-  console.log('getTimeItems', taskTime.length);
-
   return taskTime;
 }
 

src/helpers/TaskHelper.ts

@@ -46,7 +46,7 @@ export default class TaskStore {
     GaService.event(EEventCategory.TimeRange, ETimeRangeEvents.Update);
   }
 
-  deleteTime(task: TaskModel, timeIndex: number) {
+  removeTime(task: TaskModel, timeIndex: number) {
     if (task.active) {
       this.stopTimer();
     }
@@ -85,7 +85,6 @@ export default class TaskStore {
     for (const tasks of Object.values(this.tasks)) {
       TreeModelHelper.getFlatItemsRecursiveBase(tasks, condition, result);
     }
-    console.log('getTasksByDate', result.length);
     return result;
   }
 
@@ -154,7 +153,7 @@ export default class TaskStore {
   stopTimer(silent?: boolean) {
     if (this.activeTask) {
       this.activeTask.stop();
-      this.activeTask = undefined;
+      // this.activeTask = undefined;
     }
 
     if (!silent) {

src/modules/tasks/TaskStore.ts

@@ -13,6 +13,7 @@ import TimeRangeModal from '../../../../components/TimeRangeModal/TimeRangeModal
 import { Undefined } from '../../../../types/CommonTypes';
 import TaskTimeItemModel from '../../../../modules/tasks/models/TaskTimeItemModel';
 import IModalProps from '../../../../types/IModalProps';
+import { PURPLE_COLOR } from '../../../../consts';
 
 const { TextArea } = Input;
 
@@ -56,7 +57,7 @@ export default observer(function DrawerTask({
           Mark as done
         </Checkbox>
         <div className={classes.iconWithValue}>
-          <IconTile backgroundColor="#713A91">
+          <IconTile backgroundColor={PURPLE_COLOR}>
             <ProjectOutlined style={{ color: 'white ' }} />
           </IconTile>
           <span className={classes.projectTitle}>{project?.title}</span>