Observer

Author: Dmitry Yadrikhinsky

src/components/CircleButton/CircleButton.tsx

@@ -1,4 +1,5 @@
 import React, { SyntheticEvent } from 'react';
+import { observer } from 'mobx-react';
 
 import './CircleButton.less';
 
@@ -10,7 +11,7 @@ interface CircleButtonProps {
   children: React.ReactNode;
 }
 
-export default function CircleButton({
+export default observer(function CircleButton({
   className,
   children,
   onClick,
@@ -20,4 +21,4 @@ export default function CircleButton({
       {children}
     </span>
   );
-}
+});

src/components/HeaderMenu/HeaderMenu.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 
 import './HeaderMenu.less';
 
 interface HeaderMenuProps {
   children: React.ReactNode;
 }
 
-export default function HeaderMenu({ children }: HeaderMenuProps) {
+export default observer(function HeaderMenu({ children }: HeaderMenuProps) {
   return <span className="header-menu">{children}</span>;
-}
+});

src/components/IconTile/IconTile.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 
 import './IconTile.less';
 import cn from '../../helpers/ClassNameHelper';
@@ -9,7 +10,7 @@ interface IconTileProps {
   className?: string;
 }
 
-export default function IconTile({
+export default observer(function IconTile({
   className,
   children,
   backgroundColor,
@@ -19,4 +20,4 @@ export default function IconTile({
       {children}
     </span>
   );
-}
+});

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -3,6 +3,7 @@ import { Button, Col, Form, Input, Modal, Row, TimePicker } from 'antd';
 import { Moment } from 'moment/moment';
 import moment from 'moment';
 import { DeleteFilled } from '@ant-design/icons';
+import { observer } from 'mobx-react';
 
 import './TimeRangeModal.less';
 
@@ -24,7 +25,7 @@ interface TimeRangeModalProps {
   onClose: () => void;
 }
 
-export default function TimeRangeModal({
+export default observer(function TimeRangeModal({
   taskTime,
   visible,
   onClose,
@@ -118,4 +119,4 @@ export default function TimeRangeModal({
       </Form>
     </Modal>
   );
-}
+});

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

@@ -3,6 +3,7 @@ import { Button, DatePicker, Space } from 'antd';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import addDays from 'date-fns/addDays';
+import { observer } from 'mobx-react';
 
 interface SelectDateProps {
   date: Date;
@@ -13,7 +14,10 @@ function changeDate(date: Date, offsetDay: number) {
   return addDays(date, offsetDay);
 }
 
-export default function SelectDate({ date, onChange }: SelectDateProps) {
+export default observer(function SelectDate({
+  date,
+  onChange,
+}: SelectDateProps) {
   return (
     <Space direction="horizontal">
       <Button
@@ -34,4 +38,4 @@ export default function SelectDate({ date, onChange }: SelectDateProps) {
       />
     </Space>
   );
-}
+});

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 
 import { useTimeItemsDuration } from '../../../../hooks/TaskHooks';
 import TaskTimeModel from '../../../../models/TaskTimeModel';
@@ -7,7 +8,7 @@ interface TotalHoursProps {
   timeItems: TaskTimeModel[];
 }
 
-export default function TotalHours({ timeItems }: TotalHoursProps) {
+export default observer(function TotalHours({ timeItems }: TotalHoursProps) {
   const duration = useTimeItemsDuration(timeItems);
   return <div>{duration}</div>;
-}
+});

src/screens/projects/components/HoursByTask/HoursByTask.tsx

@@ -3,6 +3,7 @@ import { Card, Space } from 'antd';
 import { BellFilled } from '@ant-design/icons';
 import isSameDay from 'date-fns/isSameDay';
 import format from 'date-fns/format';
+import { observer } from 'mobx-react';
 
 import './HoursByTask.less';
 
@@ -22,10 +23,10 @@ function getDurationPerDay(timeItems: ITimeRangeModel[], date: Date) {
 }
 
 interface HoursByTaskProps {
-  task: TaskModel | undefined;
+  task?: TaskModel;
 }
 
-export default function HoursByTask({ task }: HoursByTaskProps) {
+export default observer(function HoursByTask({ task }: HoursByTaskProps) {
   return (
     <Card className="hours-by-task-container">
       <Space direction="vertical" className="hours-by-task">
@@ -51,4 +52,4 @@ export default function HoursByTask({ task }: HoursByTaskProps) {
       </Space>
     </Card>
   );
-}
+});

src/screens/projects/components/HoursByTask/HoursItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card } from 'antd';
 import format from 'date-fns/format';
+import { observer } from 'mobx-react';
 
 import './HoursItem.less';
 
@@ -29,7 +30,7 @@ interface HoursItemProps {
   range: ITimeRangeModel;
 }
 
-export default function HoursItem({ range }: HoursItemProps) {
+export default observer(function HoursItem({ range }: HoursItemProps) {
   return (
     <Card className="hours-item">
       <div className="description">{range.description}</div>
@@ -39,4 +40,4 @@ export default function HoursItem({ range }: HoursItemProps) {
       </div>
     </Card>
   );
-}
+});

src/screens/projects/components/ProjectModals/EditProjectModal.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import ProjectModel from '../../../../models/ProjectModel';
 import { Button, Input, Modal, Space } from 'antd';
-import rootStore from '../../../../services/RootStore';
 import { DeleteFilled } from '@ant-design/icons';
+import { observer } from 'mobx-react';
+
+import ProjectModel from '../../../../models/ProjectModel';
+import rootStore from '../../../../services/RootStore';
 
 const { projectStore } = rootStore;
 
@@ -11,7 +13,9 @@ interface EditProjectModalProps {
   onClose: () => void;
 }
 
-export default function EditProjectModal({ project }: EditProjectModalProps) {
+export default observer(function EditProjectModal({
+  project,
+}: EditProjectModalProps) {
   const [title, setTitle] = useState<string>('');
 
   useEffect(() => {
@@ -67,4 +71,4 @@ export default function EditProjectModal({ project }: EditProjectModalProps) {
       </Space>
     </Modal>
   );
-}
+});

src/screens/projects/components/ProjectNode/ProjectNode.tsx

@@ -1,18 +1,19 @@
 import React, { SyntheticEvent } from 'react';
 import { EditOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react';
 
 import './ProjectNode.less';
 
 import ProjectModel from '../../../../models/ProjectModel';
 import rootStore from '../../../../services/RootStore';
 
-const {projectStore}  = rootStore;
+const { projectStore } = rootStore;
 
 interface ProjectNodeProps {
   project: ProjectModel;
 }
 
-export default function ProjectNode({ project }: ProjectNodeProps) {
+export default observer(function ProjectNode({ project }: ProjectNodeProps) {
   function onClick(e: SyntheticEvent) {
     e.stopPropagation();
     projectStore.setEditableProject(project);
@@ -24,4 +25,4 @@ export default function ProjectNode({ project }: ProjectNodeProps) {
       <EditOutlined className="edit-button" onClick={onClick} />
     </div>
   );
-};
+});