Merge: + client: add detailed date format for filters

Close #624 Squashed commit of the following: commit 5a66d8c Author: Artem Baskal <a.baskal@adguard.com> Date: Mon Jan 20 19:16:27 2020 +0300 update CellWrap logic commit 0725864 Author: Artem Baskal <a.baskal@adguard.com> Date: Mon Jan 20 15:37:26 2020 +0300 fix invalid date case commit bd2a21f Author: Artem Baskal <a.baskal@adguard.com> Date: Fri Jan 17 18:44:23 2020 +0300 + client: add detailed date format for filters
AdguardTeam · Jan 24, 2020 · ac156b9 · ac156b9
1 parent ce7f1e2
commit ac156b9
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 64 deletions.
diff --git a/client/src/components/Filters/index.js b/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>,

diff --git a/client/src/components/Logs/index.js b/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'),

diff --git a/client/src/components/Settings/Clients/AutoClients.js b/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'),

diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/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'),

diff --git a/client/src/components/Settings/Clients/WrapCell.js b/client/src/components/Settings/Clients/WrapCell.js
diff --git a/client/src/components/ui/CellWrap.js b/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;
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -434,3 +434,19 @@ export const RESPONSE_FILTER = {
     ALL: 'all',
     FILTERED: 'filtered',
 };
+
+export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+
+export const DEFAULT_DATE_FORMAT_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false,
+};
+
+export const DETAILED_DATE_FORMAT_OPTIONS = {
+    ...DEFAULT_DATE_FORMAT_OPTIONS,
+    month: 'long',
+};
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
@@ -18,6 +18,10 @@ import {
     STANDARD_HTTPS_PORT,
     CHECK_TIMEOUT,
     DNS_RECORD_TYPES,
+    DEFAULT_TIME_FORMAT,
+    DEFAULT_DATE_FORMAT_OPTIONS,
+    DETAILED_DATE_FORMAT_OPTIONS,
+    DEFAULT_LANGUAGE,
 } from './constants';
 
 /**
@@ -26,28 +30,23 @@ import {
  */
 export const formatTime = (time) => {
     const parsedTime = dateParse(time);
-    return dateFormat(parsedTime, 'HH:mm:ss');
+    return dateFormat(parsedTime, DEFAULT_TIME_FORMAT);
 };
 
 /**
  * @param string The date to format
  * @returns string Returns the date and time in the format DD/MM/YYYY, HH:mm
  */
-export const formatDateTime = (dateTime) => {
-    const currentLanguage = i18n.languages[0] || 'en';
+export const formatDateTime = (dateTime, options = DEFAULT_DATE_FORMAT_OPTIONS) => {
+    const currentLanguage = i18n.languages[0] || DEFAULT_LANGUAGE;
     const parsedTime = dateParse(dateTime);
-    const options = {
-        year: 'numeric',
-        month: 'numeric',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: false,
-    };
 
     return parsedTime.toLocaleString(currentLanguage, options);
 };
 
+export const formatDetailedDateTime = dateTime =>
+    formatDateTime(dateTime, DETAILED_DATE_FORMAT_OPTIONS);
+
 /**
  * @param string
  * @returns boolean
@@ -140,7 +139,7 @@ export const normalizeFilteringStatus = (filteringStatus) => {
                 id,
                 url,
                 enabled,
-                lastUpdated: last_updated ? formatDateTime(last_updated) : '–',
+                lastUpdated: last_updated,
                 name,
                 rulesCount: rules_count,
             };