Add Date Utils

Author: k.golikov

src/constants/router/menuItems.ts

@@ -68,15 +68,14 @@ const menuItems: MenuItem[] = [
                 route: routes.dataUrl
             },
             {
-                route: routes.base64,
-                isHidden: true
+                route: routes.dateUtils
             },
             {
-                route: routes.imageCompressor,
+                route: routes.base64,
                 isHidden: true
             },
             {
-                route: routes.dateUtils,
+                route: routes.imageCompressor,
                 isHidden: true
             },
             {

src/hooks/useChangeAnyStateHandler.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, Dispatch, SetStateAction } from 'react';
+import { isObjectLike } from 'lodash';
+import call from '../utils/call';
+
+export const isChangeEvent = (value: any): value is ChangeEvent<unknown> => {
+    return isObjectLike(value) && 'target' in value;
+};
+
+const useChangeAnyStateHandler = <S>(setState: Dispatch<SetStateAction<S>>) => {
+    return (value: ChangeEvent<{ value: S }> | S) => {
+        const actualValue = call(() => {
+            if (isChangeEvent(value)) {
+                const event = value as ChangeEvent<{ value: S }>;
+                return event.target.value;
+            }
+
+            return value;
+        });
+
+        setState(actualValue);
+    };
+};
+
+export default useChangeAnyStateHandler;

src/hooks/useChangeStateHandler.ts

@@ -1,11 +1,7 @@
 import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
 import call from '../utils/call';
-import { isObjectLike } from 'lodash';
 import useChangeState from './useChangeState';
-
-const isChangeEvent = (value: any): value is ChangeEvent<unknown> => {
-    return isObjectLike(value) && 'target' in value;
-};
+import { isChangeEvent } from './useChangeAnyStateHandler';
 
 const useChangeStateHandler = <S extends object>(setState: Dispatch<SetStateAction<S>>) => {
     const changeState = useChangeState(setState);

src/pages/dateUtilsPage/DateUtilsPage.tsx

@@ -1,8 +1,19 @@
 import React, { FunctionComponent } from 'react';
-import PageContainer, { PageTag } from '../../layouts/pages/pageContainer/PageContainer';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+import { Tabs } from 'antd';
+
+import DateUtilsDifferenceTab from './components/differenceTab/DateUtilsDifferenceTab';
 
 const DateUtilsPage: FunctionComponent = () => {
-    return <PageContainer title="DateUtilsPage" tags={[PageTag.WIP]}></PageContainer>;
+    return (
+        <PageContainer title="Date utils">
+            <Tabs>
+                <Tabs.TabPane tab="Difference">
+                    <DateUtilsDifferenceTab />
+                </Tabs.TabPane>
+            </Tabs>
+        </PageContainer>
+    );
 };
 
 export default DateUtilsPage;

src/pages/dateUtilsPage/components/differenceTab/DateUtilsDifferenceTab.tsx

@@ -0,0 +1,65 @@
+import React, { FunctionComponent, useMemo, useState } from 'react';
+import { Checkbox, Col, DatePicker, Space } from 'antd';
+import moment, { duration, Duration, Moment } from 'moment';
+import { RangeValue } from 'rc-picker/lib/interface';
+import Text from 'antd/lib/typography/Text';
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
+
+const DateUtilsDifferenceTab: FunctionComponent = () => {
+    const [range, setRange] = useState<RangeValue<Moment>>([moment(), moment()]);
+
+    const [isTotalDifference, setIsTotalDifference] = useState<boolean>(false);
+    const [isTimeShown, setIsTimeShown] = useState<boolean>(false);
+
+    const handleIsTotalDifferenceChange = (event: CheckboxChangeEvent) => {
+        const { checked } = event.target;
+        setIsTotalDifference(checked);
+    };
+
+    const handleIsTimeShownChange = (event: CheckboxChangeEvent) => {
+        const { checked } = event.target;
+        setIsTimeShown(checked);
+    };
+
+    const difference = useMemo<Duration | undefined>(() => {
+        if (!range) {
+            return undefined;
+        }
+
+        const [date1, date2] = range;
+
+        if (!date1 || !date2) {
+            return undefined;
+        }
+
+        return duration(date2.diff(date1));
+    }, [range]);
+
+    const differenceMethod = isTotalDifference ? 'as' : 'get';
+
+    return (
+        <Col xs={24} md={18} lg={14} xl={10} xxl={8}>
+            <DatePicker.RangePicker showTime={isTimeShown} value={range as any} onChange={setRange} />
+            {difference && (
+                <Col className="mt-2">
+                    <Space direction="vertical">
+                        <Checkbox checked={isTimeShown} onChange={handleIsTimeShownChange}>
+                            Show time
+                        </Checkbox>
+                        <Checkbox checked={isTotalDifference} onChange={handleIsTotalDifferenceChange}>
+                            Total
+                        </Checkbox>
+                        <Text>Years: {difference[differenceMethod]('years')}</Text>
+                        <Text>Months: {difference[differenceMethod]('months')}</Text>
+                        <Text>Days: {difference[differenceMethod]('days')}</Text>
+                        <Text>Hours: {difference[differenceMethod]('hours')}</Text>
+                        <Text>Minutes: {difference[differenceMethod]('minutes')}</Text>
+                        <Text>Seconds: {difference[differenceMethod]('seconds')}</Text>
+                    </Space>
+                </Col>
+            )}
+        </Col>
+    );
+};
+
+export default DateUtilsDifferenceTab;