[Hours] Pick date

Author: Dmitry Yadrikhinsky

package.json

@@ -260,6 +260,7 @@
     "less-loader": "8.0.0",
     "mobx": "6.1.8",
     "mobx-react": "7.1.0",
+    "moment": "2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

src/screens/hours/HoursView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
 
@@ -7,16 +7,20 @@ import './HoursView.less';
 import rootStore from '../../services/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
 import getTimeItems from '../../services/TaskTimeItem';
+import SelectDate from './components/SelectDate/SelectDate';
 
 const { tasksStore } = rootStore;
 
 export default observer(function HoursView() {
-  const tasks = tasksStore.getTaskByDate(new Date());
-  const timeItems = getTimeItems(tasks, new Date());
+  const [date, setDate] = useState<Date>(new Date());
+
+  const tasks = tasksStore.getTaskByDate(date);
+  const timeItems = getTimeItems(tasks, date);
 
   return (
     <Layout className="hours">
       <Space direction="vertical">
+        <SelectDate date={date} onChange={setDate} />
         {timeItems.map((taskTime, index) => (
           <HoursCard key={index} taskTime={taskTime} />
         ))}

src/screens/hours/components/SelectDate/SelectDate.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, DatePicker } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import addDays from 'date-fns/addDays';
+
+interface SelectDateProps {
+  date: Date;
+  onChange: (date: Date) => void;
+}
+
+function changeDate(date: Date, offsetDay: number) {
+  return addDays(date, offsetDay);
+}
+
+export default function SelectDate({ date, onChange }: SelectDateProps) {
+  return (
+    <div>
+      <Button
+        icon={<LeftOutlined />}
+        onClick={() => onChange(changeDate(date, -1))}
+      />
+      <DatePicker
+        value={moment(date)}
+        onChange={(date) => onChange(date?.toDate() || new Date())}
+        allowClear={false}
+        placeholder="Date"
+      />
+      <Button
+        icon={<RightOutlined />}
+        onClick={() => onChange(changeDate(date, 1))}
+      />
+    </div>
+  );
+}

yarn.lock

@@ -8170,7 +8170,7 @@ mobx@6.1.8:
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.1.8.tgz#5d03cb76d8f7694dd82bfb2578d886945b66450d"
   integrity sha512-U4yCvUeh6yKXRwFxm2lyJjXPVekOEar/R8ZKWAXem/3fthJqYflViawfjDAUh7lZEvbKqljC3NT/pSaUKpE+gg==
 
-moment@^2.24.0, moment@^2.25.3:
+moment@2.29.1, moment@^2.24.0, moment@^2.25.3:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==