EditableTimeItemsView.tsx

Author: Yadro

src/screens/hours/HoursScreen.tsx

@@ -4,36 +4,16 @@ import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../modules/RootStore';
-import HoursCard from './components/HoursCard/HoursCard';
 import { getTimeItems } from '../../helpers/TaskHelper';
-import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
-import TaskTimeItemModel from '../../modules/tasks/models/TaskTimeItemModel';
-import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
-import { mapCurrentNext } from '../../helpers/ArrayHelper';
-import { ITimeRangeModel } from '../../modules/tasks/models/TaskModel';
-import { msToTime } from '../../helpers/DateTime';
 import Header from './components/Header';
+import EditableTimeItemsView from './components/EditableTimeItemsView';
 
 const { tasksStore } = rootStore;
 
-function getDiff(
-  prev: ITimeRangeModel | undefined,
-  next: ITimeRangeModel | undefined
-) {
-  if (prev?.end && next?.start) {
-    return msToTime(next.start.getTime() - prev.end.getTime());
-  }
-
-  return '';
-}
-
 export default observer(function HoursScreen() {
   const classes = useStyles();
   const [date, setDate] = useState<Date>(new Date());
-  const [currentTaskTime, setCurrentTaskTime] = useState<
-    Undefined<TaskTimeItemModel>
-  >();
 
   const tasks = useMemo(() => tasksStore.getTasksByDate(date), [
     tasksStore.tasks,
@@ -46,25 +26,8 @@ export default observer(function HoursScreen() {
       <Space direction="vertical">
         <Header date={date} setDate={setDate} />
         <TotalHours timeItems={timeItems} />
-        <div className={classes.cards}>
-          {mapCurrentNext(timeItems, (item, next, index) => (
-            <div key={index}>
-              <HoursCard
-                taskTime={item}
-                onClick={(taskTime) => setCurrentTaskTime(taskTime)}
-              />
-              <div className={classes.breakTime}>
-                {getDiff(item.time, next?.time)}
-              </div>
-            </div>
-          ))}
-        </div>
+        <EditableTimeItemsView date={date} />
       </Space>
-      <TimeRangeModal
-        visible={!!currentTaskTime}
-        onClose={() => setCurrentTaskTime(undefined)}
-        taskTime={currentTaskTime}
-      />
     </Layout>
   );
 });
@@ -83,14 +46,4 @@ const useStyles = createUseStyles({
       padding: 8,
     },
   },
-  cards: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  breakTime: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    margin: '0 13px',
-    fontSize: 11,
-  },
 });

src/screens/hours/components/EditableTimeItemsView.tsx

@@ -0,0 +1,81 @@
+import React, { FC, useMemo, useState } from 'react';
+import { observer } from 'mobx-react';
+import { createUseStyles } from 'react-jss';
+
+import HoursCard from './HoursCard/HoursCard';
+import TimeRangeModal from '../../../components/TimeRangeModal/TimeRangeModal';
+import { mapCurrentNext } from '../../../helpers/ArrayHelper';
+import { msToTime } from '../../../helpers/DateTime';
+import { getTimeItems } from '../../../helpers/TaskHelper';
+import rootStore from '../../../modules/RootStore';
+import { ITimeRangeModel } from '../../../modules/tasks/models/TaskModel';
+import TaskTimeItemModel from '../../../modules/tasks/models/TaskTimeItemModel';
+import { Undefined } from '../../../types/CommonTypes';
+
+const { tasksStore } = rootStore;
+
+function getDiff(
+  prev: ITimeRangeModel | undefined,
+  next: ITimeRangeModel | undefined
+) {
+  if (prev?.end && next?.start) {
+    return msToTime(next.start.getTime() - prev.end.getTime());
+  }
+
+  return '';
+}
+
+type Props = {
+  date: Date;
+};
+
+const EditableTimeItemsView: FC<Props> = ({ date }: Props) => {
+  const classes = useStyles();
+
+  const [currentTaskTime, setCurrentTaskTime] = useState<
+    Undefined<TaskTimeItemModel>
+  >();
+
+  const timeItems = useMemo(() => {
+    const tasks = tasksStore.getTasksByDate(date);
+    return getTimeItems(tasks, date);
+  }, [tasksStore.tasks, date]);
+
+  return (
+    <>
+      <div className={classes.cards}>
+        {mapCurrentNext(timeItems, (item, next, index) => (
+          <div key={index}>
+            <HoursCard
+              taskTime={item}
+              onClick={(taskTime) => setCurrentTaskTime(taskTime)}
+            />
+            <div className={classes.breakTime}>
+              {getDiff(item.time, next?.time)}
+            </div>
+          </div>
+        ))}
+      </div>
+      <TimeRangeModal
+        visible={!!currentTaskTime}
+        onClose={() => setCurrentTaskTime(undefined)}
+        taskTime={currentTaskTime}
+      />
+    </>
+  );
+};
+
+export default observer(EditableTimeItemsView);
+
+const useStyles = createUseStyles({
+  cards: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  breakTime: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    margin: '0 13px',
+    fontSize: 11,
+  },
+});