From 1f6039e5e40a51444afc811c7ee794ae196418cd Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 01:58:56 +0200 Subject: [PATCH 1/7] attempt-getting-rid-date-fns-tz --- .../TimeRangeNavigationBar.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index ad981f081..16d725b46 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React from 'react'; import PropTypes from 'prop-types'; @@ -7,6 +8,10 @@ import { utcToZonedTime } from 'date-fns-tz'; import ArrowSelector from './ArrowSelector/ArrowSelector'; +const convertTZ = (date, tzString) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString })); + +const formatDate = (date) => `${(`0${date.getDate()}`).slice(-2)}.${(`0${date.getMonth() + 1}`).slice(-2)}.${date.getFullYear()}, ${(`0${date.getHours()}`).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`; + const TimeRangeNavigationBar = (props) => { // We should not check for milliseconds but minutes changes const backInactive = differenceInMinutes(props.from, props.lowerBound) <= 0; @@ -28,6 +33,15 @@ const TimeRangeNavigationBar = (props) => { }; TimeRangeNavigationBar.renderCurrentTimeRange = (from, to, timezone) => { + const localFrom0 = convertTZ(new Date(from), timezone); + const formatedLocalForm0 = formatDate(localFrom0); + + const localTo0 = convertTZ(new Date(to), timezone); + const formatedLocalTo0 = formatDate(localTo0); + + return `${formatedLocalForm0} - ${formatedLocalTo0}`; + + const localFrom = getTime(utcToZonedTime(new Date(from), timezone)); const localTo = getTime(utcToZonedTime(new Date(to), timezone)); const pattern = 'dd.MM.yyyy, HH:mm'; From beb4f5655a2062b3ee086a6883c8a9b1f5c6b23a Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:02:05 +0200 Subject: [PATCH 2/7] Module date-fns-tz only on develpment. --- pyrene/package-lock.json | 3 ++- pyrene/package.json | 2 +- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 11 +---------- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/pyrene/package-lock.json b/pyrene/package-lock.json index 38c478cdc..03acfaa95 100644 --- a/pyrene/package-lock.json +++ b/pyrene/package-lock.json @@ -5863,7 +5863,8 @@ "date-fns-tz": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.4.tgz", - "integrity": "sha512-lQ+FF7xUxxRuRqIY7H/lagnT3PhhSnnvtGHzjE5WZKwRyLU7glJfLys05SZ7zHlEr6RXWiqkmgWq4nCkcElR+g==" + "integrity": "sha512-lQ+FF7xUxxRuRqIY7H/lagnT3PhhSnnvtGHzjE5WZKwRyLU7glJfLys05SZ7zHlEr6RXWiqkmgWq4nCkcElR+g==", + "dev": true }, "debug": { "version": "4.3.1", diff --git a/pyrene/package.json b/pyrene/package.json index fe9e416ef..885ea5d28 100644 --- a/pyrene/package.json +++ b/pyrene/package.json @@ -60,6 +60,7 @@ "babel-plugin-typescript-to-proptypes": "^1.4.1", "copy-webpack-plugin": "^6.2.0", "css-loader": "^3.6.0", + "date-fns-tz": "^1.1.4", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.15.5", "eslint": "^7.10.0", @@ -98,7 +99,6 @@ "dependencies": { "classnames": "^2.2.5", "date-fns": "^2.16.1", - "date-fns-tz": "^1.1.4", "prop-types": "^15.6.1", "react-select": "^3.1.1", "react-table": "^6.8.6", diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index 16d725b46..efc7ce2a0 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -1,9 +1,7 @@ -// @ts-nocheck import React from 'react'; import PropTypes from 'prop-types'; -import { differenceInMinutes, getTime, format } from 'date-fns'; -import { utcToZonedTime } from 'date-fns-tz'; +import { differenceInMinutes } from 'date-fns'; import ArrowSelector from './ArrowSelector/ArrowSelector'; @@ -40,13 +38,6 @@ TimeRangeNavigationBar.renderCurrentTimeRange = (from, to, timezone) => { const formatedLocalTo0 = formatDate(localTo0); return `${formatedLocalForm0} - ${formatedLocalTo0}`; - - - const localFrom = getTime(utcToZonedTime(new Date(from), timezone)); - const localTo = getTime(utcToZonedTime(new Date(to), timezone)); - const pattern = 'dd.MM.yyyy, HH:mm'; - - return `${format(localFrom, pattern)} - ${format(localTo, pattern)}`; }; TimeRangeNavigationBar.defaultProps = { From e90ba074ea8ed94fc1e3af76e88a8aae4430da00 Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:04:45 +0200 Subject: [PATCH 3/7] Variable renaming. --- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index efc7ce2a0..7524d5c26 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -31,13 +31,13 @@ const TimeRangeNavigationBar = (props) => { }; TimeRangeNavigationBar.renderCurrentTimeRange = (from, to, timezone) => { - const localFrom0 = convertTZ(new Date(from), timezone); - const formatedLocalForm0 = formatDate(localFrom0); + const localFrom = convertTZ(new Date(from), timezone); + const localFormFormatted = formatDate(localFrom); - const localTo0 = convertTZ(new Date(to), timezone); - const formatedLocalTo0 = formatDate(localTo0); + const localTo = convertTZ(new Date(to), timezone); + const localToFormatted = formatDate(localTo); - return `${formatedLocalForm0} - ${formatedLocalTo0}`; + return `${localFormFormatted} - ${localToFormatted}`; }; TimeRangeNavigationBar.defaultProps = { From dc9ab51d9d96832fafa835d7764431a8a9ac999d Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:17:25 +0200 Subject: [PATCH 4/7] Fix sonar. --- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index 7524d5c26..1bf92c850 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -8,7 +8,8 @@ import ArrowSelector from './ArrowSelector/ArrowSelector'; const convertTZ = (date, tzString) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString })); -const formatDate = (date) => `${(`0${date.getDate()}`).slice(-2)}.${(`0${date.getMonth() + 1}`).slice(-2)}.${date.getFullYear()}, ${(`0${date.getHours()}`).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`; +// eslint-disable-next-line prefer-template +const formatDate = (date) => ('0' + date.getDate()).slice(-2) + '.' + ('0' + date.getMonth() + 1).slice(-2) + '.' + date.getFullYear() + ', ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2); const TimeRangeNavigationBar = (props) => { // We should not check for milliseconds but minutes changes From d6601258b710dd50c88def60e70e63116fe984d3 Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:24:31 +0200 Subject: [PATCH 5/7] Fix computation. --- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index 1bf92c850..d05ec90fe 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -9,7 +9,7 @@ import ArrowSelector from './ArrowSelector/ArrowSelector'; const convertTZ = (date, tzString) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString })); // eslint-disable-next-line prefer-template -const formatDate = (date) => ('0' + date.getDate()).slice(-2) + '.' + ('0' + date.getMonth() + 1).slice(-2) + '.' + date.getFullYear() + ', ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2); +const formatDate = (date) => ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + date.getFullYear() + ', ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2); const TimeRangeNavigationBar = (props) => { // We should not check for milliseconds but minutes changes From 4433acedc7f647d74683acd37f7b65fe802ea7cf Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:28:33 +0200 Subject: [PATCH 6/7] Typo in variable name. --- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index d05ec90fe..52a04a6cd 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -6,7 +6,7 @@ import { differenceInMinutes } from 'date-fns'; import ArrowSelector from './ArrowSelector/ArrowSelector'; -const convertTZ = (date, tzString) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString })); +const convertTZ = (date, timeZone) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone })); // eslint-disable-next-line prefer-template const formatDate = (date) => ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + date.getFullYear() + ', ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2); @@ -33,12 +33,12 @@ const TimeRangeNavigationBar = (props) => { TimeRangeNavigationBar.renderCurrentTimeRange = (from, to, timezone) => { const localFrom = convertTZ(new Date(from), timezone); - const localFormFormatted = formatDate(localFrom); + const localFromFormatted = formatDate(localFrom); const localTo = convertTZ(new Date(to), timezone); const localToFormatted = formatDate(localTo); - return `${localFormFormatted} - ${localToFormatted}`; + return `${localFromFormatted} - ${localToFormatted}`; }; TimeRangeNavigationBar.defaultProps = { From f1b6bd0bdfffab5b5ad24c955094d43a417b16ec Mon Sep 17 00:00:00 2001 From: Sakai-san Date: Thu, 22 Apr 2021 02:31:30 +0200 Subject: [PATCH 7/7] Code comment. --- .../TimeRangeNavigationBar/TimeRangeNavigationBar.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx index 52a04a6cd..e95dfc0e2 100644 --- a/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx +++ b/pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx @@ -8,6 +8,7 @@ import ArrowSelector from './ArrowSelector/ArrowSelector'; const convertTZ = (date, timeZone) => new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone })); +// format date with such a pattern 'dd.MM.yyyy, HH:mm' // eslint-disable-next-line prefer-template const formatDate = (date) => ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + date.getFullYear() + ', ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);