Move duration

Author: Dmitry Yadrikhinsky

src/components/PlayStopButton/PlayStopButton.tsx

@@ -1,5 +1,6 @@
 import React, { SyntheticEvent } from 'react';
 import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react';
 
 import './PlayStopButton.less';
 
@@ -15,7 +16,7 @@ interface PlayStopButtonProps {
   className?: string;
 }
 
-export default function PlayStopButton({
+export default observer(function PlayStopButton({
   task,
   className,
 }: PlayStopButtonProps) {
@@ -42,4 +43,4 @@ export default function PlayStopButton({
       )}
     </CircleButton>
   );
-}
+});

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

@@ -1,17 +1,15 @@
 import React, { useMemo } from 'react';
 import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
-import { ClockCircleOutlined, ProjectOutlined } from '@ant-design/icons';
+import { ProjectOutlined } from '@ant-design/icons';
 
 import './DrawerTask.less';
 
 import TaskModel from '../../../../models/TaskModel';
 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';
+import Duration from './components/Duration';
 
 const { projectStore } = rootStore;
 
@@ -29,8 +27,6 @@ export default observer(function DrawerTask({
   const project = useMemo(() => projectStore.get(task?.projectId || ''), [
     task,
   ]);
-  const duration = useTaskDuration(task);
-
   return (
     <Drawer
       placement="right"
@@ -76,14 +72,8 @@ export default observer(function DrawerTask({
             }
           }}
         />
-        <div className="icon-with-value">
-          <IconTile backgroundColor="#713A91">
-            <ClockCircleOutlined style={{ color: 'white ' }} />
-          </IconTile>
-          <span className="value">{duration}</span>
-          <span className="flex-1" />
-          <PlayStopButton task={task} />
-        </div>
+
+        <Duration task={task} />
 
         <HoursByTask task={task} />
       </Space>

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react';
+
+import IconTile from '../../../../../components/IconTile/IconTile';
+import PlayStopButton from '../../../../../components/PlayStopButton/PlayStopButton';
+import TaskModel from '../../../../../models/TaskModel';
+import { useTaskDuration } from '../../../../../hooks/TaskHooks';
+
+interface DurationProps {
+  task?: TaskModel;
+}
+
+export default observer(function Duration({ task }: DurationProps) {
+  const duration = useTaskDuration(task);
+
+  return (
+    <div className="icon-with-value">
+      <IconTile backgroundColor="#713A91">
+        <ClockCircleOutlined style={{ color: 'white ' }} />
+      </IconTile>
+      <span className="value">{duration}</span>
+      <span className="flex-1" />
+      <PlayStopButton task={task} />
+    </div>
+  );
+});