Play/Stop button

Author: Dmitry Yadrikhinsky

src/components/PlayStopButton/PlayStopButton.less

@@ -0,0 +1,3 @@
+.play-stop-button__icon {
+  color: white;
+}

src/components/PlayStopButton/PlayStopButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
+
+import './PlayStopButton.less';
+
+import CircleButton from '../CircleButton/CircleButton';
+import rootStore from '../../services/RootStore';
+import TaskModel from '../../models/TaskModel';
+
+const { tasksStore } = rootStore;
+
+interface PlayStopButtonProps {
+  task: TaskModel | undefined;
+}
+
+export default function PlayStopButton({ task }: PlayStopButtonProps) {
+  function handleClick() {
+    if (task) {
+      if (!task?.active) {
+        tasksStore.startTimer(task);
+      } else {
+        tasksStore.endTimer(task);
+      }
+    }
+  }
+
+  return (
+    <CircleButton onClick={handleClick} className="play-stop-button">
+      {!task?.active ? (
+        <CaretRightFilled className="play-stop-button__icon" />
+      ) : (
+        <PauseOutlined className="play-stop-button__icon" />
+      )}
+    </CircleButton>
+  );
+}

src/screens/hours/components/HoursCard/HoursCard.less

@@ -1,24 +1,20 @@
 .hours-card {
   width: 300px;
-}
-
-.hours-card .ant-card-body {
-  display: flex;
-  flex-direction: row;
-}
 
-.hours-card__info {
-  flex: 1;
-}
+  .ant-card-body {
+    display: flex;
+    flex-direction: row;
+  }
 
-.hours-card__button {
-  display: none;
-}
+  .hours-card__info {
+    flex: 1;
+  }
 
-.hours-card:hover .hours-card__button {
-  display: inline-flex;
-}
+  .play-stop-button {
+    display: none;
+  }
 
-.anticon.hours-card__icon {
-  color: white;
+  &:hover .play-stop-button {
+    display: inline-flex;
+  }
 }

src/screens/hours/components/HoursCard/HoursCard.tsx

@@ -6,9 +6,7 @@ import { observer } from 'mobx-react';
 import './HoursCard.less';
 
 import TaskTimeModel from '../../../../models/TaskTimeModel';
-import CircleButton from '../../../../components/CircleButton/CircleButton';
-import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
-import rootStore from '../../../../services/RootStore';
+import PlayStopButton from '../../../../components/PlayStopButton/PlayStopButton';
 
 const formatStr = 'HH:mm';
 function timeFormat(date: Date | undefined) {
@@ -18,36 +16,20 @@ function timeFormat(date: Date | undefined) {
   return '';
 }
 
-const { tasksStore } = rootStore;
-
 interface HoursCardProps {
   taskTime: TaskTimeModel;
 }
 
 export default observer(function HoursCard({ taskTime }: HoursCardProps) {
   const { task, time } = taskTime;
 
-  function handleClick() {
-    if (!task.active) {
-      tasksStore.startTimer(task);
-    } else {
-      tasksStore.endTimer(task);
-    }
-  }
-
   return (
     <Card className="hours-card">
       <div className="hours-card__info">
         <div>{task.title}</div>
         <div>{`${timeFormat(time[0])} - ${timeFormat(time[1])}`}</div>
       </div>
-      <CircleButton onClick={handleClick} className="hours-card__button">
-        {!task.active ? (
-          <CaretRightFilled className="hours-card__icon" />
-        ) : (
-          <PauseOutlined className="hours-card__icon" />
-        )}
-      </CircleButton>
+      <PlayStopButton task={task} />
     </Card>
   );
 });

src/screens/projects/components/DrawerTask/DrawerTask.tsx

@@ -10,6 +10,8 @@ import rootStore from '../../../../services/RootStore';
 import { useTaskDuration } from '../../../../hooks/TaskHooks';
 import HoursByTask from '../HoursByTask/HoursByTask';
 import IconTile from '../../../../components/IconTile/IconTile';
+import CircleButton from '../../../../components/CircleButton/CircleButton';
+import PlayStopButton from '../../../../components/PlayStopButton/PlayStopButton';
 
 const { projectStore } = rootStore;
 
@@ -56,6 +58,7 @@ export default observer(function DrawerTask({
         </div>
         <Input
           value={task?.title}
+          placeholder="Task description"
           onChange={(e) => {
             const title = e.target.value;
             if (task) {
@@ -78,6 +81,8 @@ export default observer(function DrawerTask({
             <ClockCircleOutlined style={{ color: 'white ' }} />
           </IconTile>
           <span className="value">{duration}</span>
+          <span className="flex-1" />
+          <PlayStopButton task={task} />
         </div>
 
         <HoursByTask task={task} />