Merge: + client: add detailed date format for filters

Close #624

Squashed commit of the following:

commit 5a66d8ca350880abd0a7a146b75df385aa8f97b4
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Jan 20 19:16:27 2020 +0300

    update CellWrap logic

commit 072586493ef2cb73ba514a01d8b7f8904d4f5754
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Jan 20 15:37:26 2020 +0300

    fix invalid date case

commit bd2a21f2c788b2835485f4697dac1b797d5559c0
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Jan 17 18:44:23 2020 +0300

    + client: add detailed date format for filters

client/src/components/Filters/index.js

@@ -8,6 +8,7 @@ import Card from '../ui/Card';
 import CellWrap from '../ui/CellWrap';
 import UserRules from './UserRules';
 import Modal from './Modal';
+import { formatDetailedDateTime } from '../../helpers/helpers';
 
 import { MODAL_TYPE } from '../../helpers/constants';
 
@@ -62,6 +63,8 @@ class Filters extends Component {
         }
     };
 
+    getDateCell = row => CellWrap(row, formatDetailedDateTime);
+
     getFilter = (url, filters) => {
         const filter = filters.find(item => url === item.url);
 
@@ -116,7 +119,7 @@ class Filters extends Component {
             accessor: 'lastUpdated',
             className: 'text-center',
             minWidth: 150,
-            Cell: CellWrap,
+            Cell: this.getDateCell,
         },
         {
             Header: <Trans>actions_table_header</Trans>,

client/src/components/Logs/index.js

@@ -22,6 +22,7 @@ import Loading from '../ui/Loading';
 import PopoverFiltered from '../ui/PopoverFilter';
 import Popover from '../ui/Popover';
 import './Logs.css';
+import CellWrap from '../ui/CellWrap';
 
 const TABLE_FIRST_PAGE = 0;
 const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
@@ -115,12 +116,11 @@ class Logs extends Component {
 
     checkWhiteList = reason => reason === FILTERED_STATUS.NOT_FILTERED_WHITE_LIST;
 
-    getTimeCell = ({ value }) => (
-        <div className="logs__row">
-                    <span className="logs__text" title={formatDateTime(value)}>
-                        {isToday(value) ? formatTime(value) : formatDateTime(value)}
-                    </span>
-        </div>
+
+    getDateCell = row => CellWrap(
+        row,
+        (isToday(row.value) ? formatTime : formatDateTime),
+        formatDateTime,
     );
 
     getDomainCell = (row) => {
@@ -259,7 +259,7 @@ class Logs extends Component {
                 Header: t('time_table_header'),
                 accessor: 'time',
                 minWidth: 105,
-                Cell: this.getTimeCell,
+                Cell: this.getDateCell,
             },
             {
                 Header: t('domain_name_table_header'),

client/src/components/Settings/Clients/AutoClients.js

@@ -4,7 +4,7 @@ import { withNamespaces } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import Card from '../../ui/Card';
-import WrapCell from './WrapCell';
+import CellWrap from '../../ui/CellWrap';
 
 import whoisCell from './whoisCell';
 
@@ -16,19 +16,19 @@ class AutoClients extends Component {
             Header: this.props.t('table_client'),
             accessor: 'ip',
             minWidth: COLUMN_MIN_WIDTH,
-            Cell: WrapCell,
+            Cell: CellWrap,
         },
         {
             Header: this.props.t('table_name'),
             accessor: 'name',
             minWidth: COLUMN_MIN_WIDTH,
-            Cell: WrapCell,
+            Cell: CellWrap,
         },
         {
             Header: this.props.t('source_label'),
             accessor: 'source',
             minWidth: COLUMN_MIN_WIDTH,
-            Cell: WrapCell,
+            Cell: CellWrap,
         },
         {
             Header: this.props.t('whois'),

client/src/components/Settings/Clients/ClientsTable.js

@@ -7,7 +7,7 @@ import { MODAL_TYPE } from '../../../helpers/constants';
 import { normalizeTextarea } from '../../../helpers/helpers';
 import Card from '../../ui/Card';
 import Modal from './Modal';
-import WrapCell from './WrapCell';
+import CellWrap from '../../ui/CellWrap';
 
 class ClientsTable extends Component {
     handleFormAdd = (values) => {
@@ -94,7 +94,7 @@ class ClientsTable extends Component {
             Header: this.props.t('table_name'),
             accessor: 'name',
             minWidth: 120,
-            Cell: WrapCell,
+            Cell: CellWrap,
         },
         {
             Header: this.props.t('settings'),
@@ -166,21 +166,7 @@ class ClientsTable extends Component {
             accessor: row => this.props.normalizedTopClients.configured[row.name] || 0,
             sortMethod: (a, b) => b - a,
             minWidth: 120,
-            Cell: (row) => {
-                const { value: clientStats } = row;
-
-                if (clientStats) {
-                    return (
-                        <div className="logs__row">
-                            <div className="logs__text" title={clientStats}>
-                                {clientStats}
-                            </div>
-                        </div>
-                    );
-                }
-
-                return '–';
-            },
+            Cell: CellWrap,
         },
         {
             Header: this.props.t('actions_table_header'),

client/src/components/Settings/Clients/WrapCell.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const WrapCell = ({ value }) => (
-    <div className="logs__row logs__row--overflow">
-        <span className="logs__text" title={value}>
-            {value || '–'}
-        </span>
-    </div>
-);
-
-WrapCell.propTypes = {
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default WrapCell;

client/src/components/ui/CellWrap.js

@@ -1,19 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const CellWrap = ({ value }) => (
-    <div className="logs__row logs__row--overflow">
-        <span className="logs__text logs__text--full" title={value}>
-            {value}
-        </span>
-    </div>
-);
+const CellWrap = ({ value }, formatValue, formatTitle = formatValue) => {
+    if (!value) {
+        return '–';
+    }
+    const cellValue = typeof formatValue === 'function' ? formatValue(value) : value;
+    const cellTitle = typeof formatTitle === 'function' ? formatTitle(value) : value;
+
+    return (
+        <div className="logs__row logs__row--overflow">
+            <span className="logs__text logs__text--full" title={cellTitle}>
+                {cellValue}
+            </span>
+        </div>
+    );
+};
 
 CellWrap.propTypes = {
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
     ]),
+    formatValue: PropTypes.func,
+    formatTitle: PropTypes.func,
 };
 
 export default CellWrap;