[Hours] Start/pause HoursCard

Author: Dmitry Yadrikhinsky

src/screens/hours/HoursView.less

@@ -0,0 +1,13 @@
+.hours {
+  overflow-y: scroll;
+  padding: 12px;
+}
+
+.hours .ant-space-item {
+  display: flex;
+  justify-content: center;
+}
+
+.hours .ant-card-body {
+  padding: 8px;
+}

src/screens/hours/HoursView.tsx

@@ -1,21 +1,26 @@
 import React from 'react';
-import { Layout } from 'antd';
+import { Layout, Space } from 'antd';
+import { observer } from 'mobx-react';
+
+import './HoursView.less';
 
 import rootStore from '../../services/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
 import getTimeItems from '../../services/TaskTimeItem';
 
 const { tasksStore } = rootStore;
 
-export default function HoursView() {
+export default observer(function HoursView() {
   const tasks = tasksStore.getTaskByDate(new Date());
   const timeItems = getTimeItems(tasks, new Date());
 
   return (
-    <Layout style={{ padding: '12px' }}>
-      {timeItems.map((taskTime, index) => (
-        <HoursCard key={index} taskTime={taskTime} />
-      ))}
+    <Layout className="hours">
+      <Space direction="vertical">
+        {timeItems.map((taskTime, index) => (
+          <HoursCard key={index} taskTime={taskTime} />
+        ))}
+      </Space>
     </Layout>
   );
-}
+});

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

@@ -0,0 +1,7 @@
+.hours-card {
+  width: 300px;
+}
+
+.hours-card__icon {
+  color: white;
+}

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { Card } from 'antd';
+import format from 'date-fns/format';
+import { observer } from 'mobx-react';
+
+import './HoursCard.less';
 
 import TaskTimeModel from '../../../../models/TaskTimeModel';
-import format from 'date-fns/format';
+import CircleButton from '../../../../components/CircleButton/CircleButton';
+import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
+import rootStore from '../../../../services/RootStore';
 
 const formatStr = 'HH:mm';
 function timeFormat(date: Date | undefined) {
@@ -12,17 +18,36 @@ function timeFormat(date: Date | undefined) {
   return '';
 }
 
+const { tasksStore } = rootStore;
+
 interface HoursCardProps {
   taskTime: TaskTimeModel;
 }
 
-export default function HoursCard({ taskTime }: HoursCardProps) {
+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 style={{ width: 300 }}>
-      <div>{taskTime.task.title}</div>
+    <Card className="hours-card">
       <div>
-        {`${timeFormat(taskTime.time[0])} - ${timeFormat(taskTime.time[1])}`}
+        <div>{task.title}</div>
+        <div>{`${timeFormat(time[0])} - ${timeFormat(time[1])}`}</div>
       </div>
+      <CircleButton onClick={handleClick}>
+        {!task.active ? (
+          <CaretRightFilled className="hours-card__icon" />
+        ) : (
+          <PauseOutlined className="hours-card__icon" />
+        )}
+      </CircleButton>
     </Card>
   );
-}
+});