Prototype

Author: Yadro

src/components/Header.tsx

@@ -28,9 +28,6 @@ function Header() {
       <HeaderLink>
         <Link to="/dashboard">Dashboard</Link>
       </HeaderLink>
-      <HeaderLink>
-        <Link to="/timeline">TL</Link>
-      </HeaderLink>
       <span className={style.flex1}>{isBigScreen && <ProgressBar />}</span>
       <TaskControl />
       <Profile />

src/menu.ts

@@ -27,10 +27,8 @@ export default class MenuBuilder {
     }
 
     const template =
-      process.platform === 'darwin'
-        ? this.buildDarwinTemplate()
-        : [];
-        // : this.buildDefaultTemplate(); // Disable menu for Win and Linux
+      process.platform === 'darwin' ? this.buildDarwinTemplate() : [];
+    // : this.buildDefaultTemplate(); // Disable menu for Win and Linux
 
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
@@ -54,6 +52,7 @@ export default class MenuBuilder {
   }
 
   buildDarwinTemplate(): MenuItemConstructorOptions[] {
+    // TODO
     const subMenuAbout: DarwinMenuItemConstructorOptions = {
       label: 'Electron',
       submenu: [

src/screens/Main.tsx

@@ -5,7 +5,6 @@ import { Layout } from 'antd';
 import ProjectsScreen from './projects/ProjectsScreen';
 import HoursScreen from './hours/HoursScreen';
 import DashboardScreen from './dashboard/Dashboard';
-import TimelineScreen from './timeline/TimelineScreen';
 import GaService from '../services/gaService/GaService';
 import Header from '../components/Header';
 
@@ -27,7 +26,6 @@ const Main = () => {
         <Route path="/hours" component={HoursScreen} />
         <Route path="/projects" component={ProjectsScreen} />
         <Route path="/dashboard" component={DashboardScreen} />
-        <Route path="/timeline" component={TimelineScreen} />
         <Redirect from="*" to="/projects" />
       </Switch>
     </Layout>

src/screens/hours/HoursScreen.tsx

@@ -7,13 +7,16 @@ import rootStore from '../../modules/RootStore';
 import { getTimeItems } from '../../helpers/TaskHelper';
 import TotalHours from './components/TotalHours/TotalHours';
 import Header from './components/Header';
-import EditableTimeItemsView from './components/EditableTimeItemsView';
+import GridWithTimeItemsView from './components/GridWithTimeItemsView';
+import { HoursTabView } from './types';
+import TimelineScreen from './components/TimelineScreen';
 
 const { tasksStore } = rootStore;
 
 export default observer(function HoursScreen() {
   const classes = useStyles();
   const [date, setDate] = useState<Date>(new Date());
+  const [tab, setTab] = useState<HoursTabView>(HoursTabView.Edit);
 
   const tasks = useMemo(() => tasksStore.getTasksByDate(date), [
     tasksStore.tasks,
@@ -22,28 +25,35 @@ export default observer(function HoursScreen() {
   const timeItems = getTimeItems(tasks, date);
 
   return (
-    <Layout className={classes.hours}>
-      <Space direction="vertical">
-        <Header date={date} setDate={setDate} />
+    <Layout className={classes.hoursView}>
+      <Space direction="vertical" className={classes.space}>
+        <Header date={date} setDate={setDate} tab={tab} setTab={setTab} />
         <TotalHours timeItems={timeItems} />
-        <EditableTimeItemsView date={date} />
+        {tab === HoursTabView.Edit ? (
+          <GridWithTimeItemsView date={date} />
+        ) : (
+          <TimelineScreen date={date} />
+        )}
       </Space>
     </Layout>
   );
 });
 
 const useStyles = createUseStyles({
-  hours: {
+  hoursView: {
     overflowY: 'auto',
     padding: 12,
+  },
+  space: {
+    flex: 1,
 
     '& .ant-space-item': {
       display: 'flex',
       justifyContent: 'center',
     },
 
-    '& .ant-card-body': {
-      padding: 8,
+    '& .ant-space-item:last-child': {
+      flex: 1,
     },
   },
 });

…urs/components/EditableTimeItemsView.tsx …urs/components/GridWithTimeItemsView.tsxsrc/screens/hours/components/EditableTimeItemsView.tsx renamed to src/screens/hours/components/GridWithTimeItemsView.tsx src/screens/hours/components/EditableTimeItemsView.tsx renamed to src/screens/hours/components/GridWithTimeItemsView.tsx

@@ -29,14 +29,15 @@ type Props = {
   date: Date;
 };
 
-const EditableTimeItemsView: FC<Props> = ({ date }: Props) => {
+const GridWithTimeItemsView: FC<Props> = ({ date }: Props) => {
   const classes = useStyles();
 
   const [currentTaskTime, setCurrentTaskTime] = useState<
     Undefined<TaskTimeItemModel>
   >();
 
   const timeItems = useMemo(() => {
+    // TODO Doesn't update
     const tasks = tasksStore.getTasksByDate(date);
     return getTimeItems(tasks, date);
   }, [tasksStore.tasks, date]);
@@ -65,12 +66,16 @@ const EditableTimeItemsView: FC<Props> = ({ date }: Props) => {
   );
 };
 
-export default observer(EditableTimeItemsView);
+export default observer(GridWithTimeItemsView);
 
 const useStyles = createUseStyles({
   cards: {
     display: 'flex',
     flexWrap: 'wrap',
+
+    '& .ant-card-body': {
+      padding: 8,
+    },
   },
   breakTime: {
     display: 'flex',

src/screens/hours/components/Header.tsx

@@ -5,13 +5,16 @@ import { createUseStyles } from 'react-jss';
 
 import SelectDate from '../../../components/SelectDate';
 import RadioGroupChangeHoursView from './RadioGroupChangeHoursView';
+import { HoursTabView } from '../types';
 
 type Props = {
   date: Date;
   setDate(date: Date): void;
+  tab: HoursTabView;
+  setTab(tab: HoursTabView): void;
 };
 
-const Header: FC<Props> = ({ date, setDate }: Props) => {
+const Header: FC<Props> = ({ date, setDate, tab, setTab }: Props) => {
   const classes = useStyles();
 
   return (
@@ -20,7 +23,7 @@ const Header: FC<Props> = ({ date, setDate }: Props) => {
         <SelectDate date={date} onChange={setDate} />
       </Col>
       <Col span={8} className={classes.alignRight}>
-        <RadioGroupChangeHoursView onChange={(_option) => {}} />
+        <RadioGroupChangeHoursView tab={tab} onChange={setTab} />
       </Col>
     </Row>
   );

src/screens/hours/components/RadioGroupChangeHoursView.tsx

@@ -1,28 +1,43 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { CheckboxOptionType } from 'antd/lib/checkbox/Group';
 import { AppstoreOutlined, BuildOutlined } from '@ant-design/icons';
-import { Radio } from 'antd';
+import { Radio, RadioChangeEvent } from 'antd';
 import { observer } from 'mobx-react';
 
-enum Options {
-  Edit,
-  Timeline,
-}
+import { HoursTabView } from '../types';
 
 const ICON_STYLE = { fontSize: '20px' };
+const ICON_MIRRORED_STYLE = { ...ICON_STYLE, transform: 'scale(-1, 1)' };
 
 const options: CheckboxOptionType[] = [
-  { label: <AppstoreOutlined style={ICON_STYLE} />, value: Options.Edit },
-  { label: <BuildOutlined style={ICON_STYLE} />, value: Options.Timeline },
+  { label: <AppstoreOutlined style={ICON_STYLE} />, value: HoursTabView.Edit },
+  {
+    label: <BuildOutlined style={ICON_MIRRORED_STYLE} />,
+    value: HoursTabView.Timeline,
+  },
 ];
 
 type Props = {
-  onChange(val: Options): void;
+  tab: HoursTabView;
+  onChange(val: HoursTabView): void;
 };
 
-const RadioGroupChangeHoursView: FC<Props> = () => {
+const RadioGroupChangeHoursView: FC<Props> = ({ tab, onChange }: Props) => {
+  const handleOnChange = useCallback(
+    (e: RadioChangeEvent) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+
   return (
-    <Radio.Group options={options} optionType="button" buttonStyle="solid" />
+    <Radio.Group
+      options={options}
+      optionType="button"
+      buttonStyle="solid"
+      value={tab}
+      onChange={handleOnChange}
+    />
   );
 };
 

src/screens/hours/components/TimelineScreen.tsx

@@ -0,0 +1,62 @@
+import React, { FC, memo, useMemo } from 'react';
+import { Chart } from 'react-google-charts';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../../modules/RootStore';
+import { getTimeItems } from '../../../helpers/TaskHelper';
+import TaskTimeItemModel from '../../../modules/tasks/models/TaskTimeItemModel';
+
+const { tasksStore } = rootStore;
+
+const columns = [
+  { type: 'string', id: 'Task' },
+  { type: 'date', id: 'Start' },
+  { type: 'date', id: 'End' },
+];
+
+function mapTimeItemToChartItem({ task, time }: TaskTimeItemModel): any[] {
+  return [task.title || '-', time.start || new Date(), time.end || new Date()];
+}
+
+type Props = {
+  date: Date;
+};
+
+const Timeline: FC<Props> = ({ date }: Props) => {
+  const classes = useStyles();
+
+  const data = useMemo(() => {
+    const tasks = tasksStore.getTasksByDate(date);
+    const filteredTimeItems = getTimeItems(tasks, date);
+    const items = filteredTimeItems.map(mapTimeItemToChartItem);
+    if (items.length === 0) {
+      return undefined;
+    }
+    return [columns, ...items];
+  }, [date]);
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div className={classes.main}>
+      <Chart
+        style={{ flex: 1 }}
+        chartType="Timeline"
+        data={data}
+        height="100%"
+      />
+    </div>
+  );
+};
+
+export default memo(Timeline);
+
+const useStyles = createUseStyles({
+  main: {
+    display: 'flex',
+    flex: 1,
+    height: '100%',
+  },
+});

src/screens/hours/types.ts

@@ -0,0 +1,4 @@
+export enum HoursTabView {
+  Edit,
+  Timeline,
+}

src/screens/timeline/TimelineScreen.tsx

@@ -1,27 +1,27 @@
-import React, {FC, memo, useMemo} from 'react';
-import {Chart} from 'react-google-charts';
-import {createUseStyles} from 'react-jss';
+import React, { FC, memo, useMemo } from 'react';
+import { Chart } from 'react-google-charts';
+import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../modules/RootStore';
-import {getTimeItems} from '../../helpers/TaskHelper';
+import { getTimeItems } from '../../helpers/TaskHelper';
 
-const {tasksStore} = rootStore;
+const { tasksStore } = rootStore;
 
 const columns = [
-  {type: 'string', id: 'Task'},
-  {type: 'date', id: 'Start'},
-  {type: 'date', id: 'End'},
+  { type: 'string', id: 'Task' },
+  { type: 'date', id: 'Start' },
+  { type: 'date', id: 'End' },
 ];
 
 const nowDate = new Date();
-
+// TODO remove
 const Timeline: FC = () => {
   const classes = useStyles();
 
   const data = useMemo(() => {
     const tasks = tasksStore.getTasksByDate(nowDate);
     const filteredTimeItems = getTimeItems(tasks, nowDate);
-    const items = filteredTimeItems.map(({task, time}) => [
+    const items = filteredTimeItems.map(({ task, time }) => [
       task.title || '-',
       time.start || new Date(),
       time.end || new Date(),
@@ -31,7 +31,12 @@ const Timeline: FC = () => {
 
   return (
     <div className={classes.main}>
-      <Chart style={{flex: 1}} chartType="Timeline" data={data} height='100%'/>
+      <Chart
+        style={{ flex: 1 }}
+        chartType="Timeline"
+        data={data}
+        height="100%"
+      />
     </div>
   );
 };