From 807e6aaaa61b876abf77eea5168c7e659db00c9a Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Sat, 2 Feb 2019 18:46:48 +0200 Subject: [PATCH] Migrate "time ago" components to React (#3385) * Replace (angular-moment) and with React component * PropTypes: Moment validation * Increase polling interval * Refine component implementation * Add tooltip with formatted date/time * Refine component implementation --- client/app/components/DateInput.jsx | 10 +- client/app/components/DateRangeInput.jsx | 15 +-- client/app/components/DateTimeInput.jsx | 10 +- client/app/components/DateTimeRangeInput.jsx | 15 +-- client/app/components/TimeAgo.jsx | 98 ++++++++++++++++++++ client/app/components/proptypes.js | 14 +++ client/app/components/rd-time-ago.js | 17 ---- client/app/config/index.js | 2 - package-lock.json | 43 +++++---- package.json | 1 - 10 files changed, 146 insertions(+), 79 deletions(-) create mode 100644 client/app/components/TimeAgo.jsx delete mode 100644 client/app/components/rd-time-ago.js diff --git a/client/app/components/DateInput.jsx b/client/app/components/DateInput.jsx index ff7812ed8e..733c3b669c 100644 --- a/client/app/components/DateInput.jsx +++ b/client/app/components/DateInput.jsx @@ -1,9 +1,9 @@ -import moment from 'moment'; import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; import { clientConfig } from '@/services/auth'; +import { Moment } from '@/components/proptypes'; export function DateInput({ value, @@ -27,13 +27,7 @@ export function DateInput({ } DateInput.propTypes = { - value: (props, propName, componentName) => { - const value = props[propName]; - if ((value !== null) && !moment.isMoment(value)) { - return new Error('Prop `' + propName + '` supplied to `' + componentName + - '` should be a Moment.js instance.'); - } - }, + value: Moment, onSelect: PropTypes.func, className: PropTypes.string, }; diff --git a/client/app/components/DateRangeInput.jsx b/client/app/components/DateRangeInput.jsx index d8ccef48f7..8dc2bd973f 100644 --- a/client/app/components/DateRangeInput.jsx +++ b/client/app/components/DateRangeInput.jsx @@ -1,10 +1,10 @@ -import moment from 'moment'; import { isArray } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; import { clientConfig } from '@/services/auth'; +import { Moment } from '@/components/proptypes'; const { RangePicker } = DatePicker; @@ -29,18 +29,7 @@ export function DateRangeInput({ } DateRangeInput.propTypes = { - value: (props, propName, componentName) => { - const value = props[propName]; - if ( - (value !== null) && !( - isArray(value) && (value.length === 2) && - moment.isMoment(value[0]) && moment.isMoment(value[1]) - ) - ) { - return new Error('Prop `' + propName + '` supplied to `' + componentName + - '` should be an array of two Moment.js instances.'); - } - }, + value: PropTypes.arrayOf(Moment), onSelect: PropTypes.func, className: PropTypes.string, }; diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx index 92fb81f104..d51210813a 100644 --- a/client/app/components/DateTimeInput.jsx +++ b/client/app/components/DateTimeInput.jsx @@ -1,9 +1,9 @@ -import moment from 'moment'; import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; import { clientConfig } from '@/services/auth'; +import { Moment } from '@/components/proptypes'; export function DateTimeInput({ value, @@ -30,13 +30,7 @@ export function DateTimeInput({ } DateTimeInput.propTypes = { - value: (props, propName, componentName) => { - const value = props[propName]; - if ((value !== null) && !moment.isMoment(value)) { - return new Error('Prop `' + propName + '` supplied to `' + componentName + - '` should be a Moment.js instance.'); - } - }, + value: Moment, withSeconds: PropTypes.bool, onSelect: PropTypes.func, className: PropTypes.string, diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx index 668ac9a23e..55e8ca7514 100644 --- a/client/app/components/DateTimeRangeInput.jsx +++ b/client/app/components/DateTimeRangeInput.jsx @@ -1,10 +1,10 @@ -import moment from 'moment'; import { isArray } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; import { clientConfig } from '@/services/auth'; +import { Moment } from '@/components/proptypes'; const { RangePicker } = DatePicker; @@ -32,18 +32,7 @@ export function DateTimeRangeInput({ } DateTimeRangeInput.propTypes = { - value: (props, propName, componentName) => { - const value = props[propName]; - if ( - (value !== null) && !( - isArray(value) && (value.length === 2) && - moment.isMoment(value[0]) && moment.isMoment(value[1]) - ) - ) { - return new Error('Prop `' + propName + '` supplied to `' + componentName + - '` should be an array of two Moment.js instances.'); - } - }, + value: PropTypes.arrayOf(Moment), withSeconds: PropTypes.bool, onSelect: PropTypes.func, className: PropTypes.string, diff --git a/client/app/components/TimeAgo.jsx b/client/app/components/TimeAgo.jsx new file mode 100644 index 0000000000..2a3a55f55a --- /dev/null +++ b/client/app/components/TimeAgo.jsx @@ -0,0 +1,98 @@ +import moment from 'moment'; +import { isNil } from 'lodash'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import { Moment } from '@/components/proptypes'; +import { clientConfig } from '@/services/auth'; + +const autoUpdateList = new Set(); + +function updateComponents() { + autoUpdateList.forEach(component => component.update()); + setTimeout(updateComponents, 30 * 1000); +} +updateComponents(); + +export class TimeAgo extends React.PureComponent { + static propTypes = { + // `date` and `placeholder` used in `getDerivedStateFromProps` + // eslint-disable-next-line react/no-unused-prop-types + date: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.instanceOf(Date), + Moment, + ]), + // eslint-disable-next-line react/no-unused-prop-types + placeholder: PropTypes.string, + autoUpdate: PropTypes.bool, + }; + + static defaultProps = { + date: null, + placeholder: '', + autoUpdate: true, + }; + + static getDerivedStateFromProps({ date, placeholder }) { + // if `date` prop is not empty and a valid date/time - convert it to `moment` + date = !isNil(date) ? moment(date) : null; + date = date && date.isValid() ? date : null; + + return { + value: date ? date.fromNow() : placeholder, + title: date ? date.format(clientConfig.dateTimeFormat) : '', + }; + } + + // Initial state, to get rid of React warning + state = { + title: null, + value: null, + }; + + componentDidMount() { + autoUpdateList.add(this); + this.update(true); + } + + componentWillUnmount() { + autoUpdateList.delete(this); + } + + update(force = false) { + if (force || this.props.autoUpdate) { + this.setState(this.constructor.getDerivedStateFromProps(this.props)); + } + } + + render() { + return {this.state.value}; + } +} + +export default function init(ngModule) { + ngModule.directive('amTimeAgo', () => ({ + link($scope, element, attr) { + const modelName = attr.amTimeAgo; + $scope.$watch(modelName, (value) => { + ReactDOM.render(, element[0]); + }); + }, + })); + + ngModule.component('rdTimeAgo', { + bindings: { + value: '=', + }, + controller($scope, $element) { + $scope.$watch('$ctrl.value', () => { + // Initial render will occur here as well + ReactDOM.render(, $element[0]); + }); + }, + }); +} + +init.init = true; diff --git a/client/app/components/proptypes.js b/client/app/components/proptypes.js index 19b7f6c5aa..f35e89cc0e 100644 --- a/client/app/components/proptypes.js +++ b/client/app/components/proptypes.js @@ -1,4 +1,6 @@ import PropTypes from 'prop-types'; +import { wrap } from 'lodash'; +import moment from 'moment'; export const DataSource = PropTypes.shape({ syntax: PropTypes.string, @@ -49,3 +51,15 @@ export const Action = PropTypes.shape({ export const AntdForm = PropTypes.shape({ validateFieldsAndScroll: PropTypes.func, }); + +function checkMoment(isRequired, props, propName, componentName) { + const value = props[propName]; + const isRequiredValid = isRequired && (value !== null); + const isOptionalValid = !isRequired && ((value === null) || moment.isMoment(value)); + if (!isRequiredValid && !isOptionalValid) { + return new Error('Prop `' + propName + '` supplied to `' + componentName + '` should be a Moment.js instance.'); + } +} + +export const Moment = wrap(false, checkMoment); +Moment.isRequired = wrap(true, checkMoment); diff --git a/client/app/components/rd-time-ago.js b/client/app/components/rd-time-ago.js deleted file mode 100644 index de6c786278..0000000000 --- a/client/app/components/rd-time-ago.js +++ /dev/null @@ -1,17 +0,0 @@ -const RdTimeAgo = { - bindings: { - value: '=', - }, - controller() { - }, - template: '' + - '' + - '-' + - '', -}; - -export default function init(ngModule) { - ngModule.component('rdTimeAgo', RdTimeAgo); -} - -init.init = true; diff --git a/client/app/config/index.js b/client/app/config/index.js index 2ce76b5e69..e1985c9742 100644 --- a/client/app/config/index.js +++ b/client/app/config/index.js @@ -16,7 +16,6 @@ import ngMessages from 'angular-messages'; import toastr from 'angular-toastr'; import ngUpload from 'angular-base64-upload'; import vsRepeat from 'angular-vs-repeat'; -import 'angular-moment'; import 'brace'; import 'angular-ui-ace'; import 'angular-resizable'; @@ -49,7 +48,6 @@ const requirements = [ uiBootstrap, ngMessages, uiSelect, - 'angularMoment', toastr, 'ui.ace', ngUpload, diff --git a/package-lock.json b/package-lock.json index 0d806d44d3..5b01b9812e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -759,14 +759,6 @@ "resolved": "https://registry.npmjs.org/angular-messages/-/angular-messages-1.5.11.tgz", "integrity": "sha1-6pnwFjWU/LCi23AbMDgzklDezJA=" }, - "angular-moment": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/angular-moment/-/angular-moment-1.1.0.tgz", - "integrity": "sha512-aWrKEfQRtkqhxx31RjPhmGMWuF77uPlIWRNOiJU3+Q3wzossBqzBlJOkagUGt3N5or6OJP5Pq83dIjH9HHhhng==", - "requires": { - "moment": ">=2.8.0 <3.0.0" - } - }, "angular-resizable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/angular-resizable/-/angular-resizable-1.2.0.tgz", @@ -3631,6 +3623,7 @@ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", "dev": true, + "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -6796,7 +6789,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6833,7 +6827,8 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -6842,7 +6837,8 @@ }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6945,7 +6941,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6955,6 +6952,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6974,11 +6972,13 @@ }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6995,6 +6995,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7078,6 +7079,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7153,7 +7155,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7183,6 +7186,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7200,6 +7204,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7238,11 +7243,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -10696,6 +10703,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -10757,7 +10765,8 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", diff --git a/package.json b/package.json index 14fb2e7278..5bf25c9999 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "angular": "~1.5.8", "angular-base64-upload": "^0.1.23", "angular-messages": "~1.5.8", - "angular-moment": "^1.1.0", "angular-resizable": "^1.2.0", "angular-resource": "~1.5.8", "angular-route": "~1.5.8",