Migrate "time ago" components to React

client/app/components/TimeAgo.jsx

@@ -0,0 +1,91 @@
+import moment from 'moment';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const interactiveComponents = new Set();
+
+function updateInteractiveComponents() {
+  interactiveComponents.forEach(component => component.forceUpdate());
+  setTimeout(updateInteractiveComponents, 3000);
+}
+updateInteractiveComponents();
+
+export class TimeAgo extends React.Component {
+  static propTypes = {
+    date: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.instanceOf(Date),
+      // `moment`
+      (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.');
+        }
+      },
+    ]),
+    interactive: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  static defaultProps = {
+    date: null,
+    interactive: true,
+    placeholder: '',
+  };
+
+  constructor(props) {
+    super(props);
+    this._value = moment(this.props.date);
+  }
+
+  componentDidMount() {
+    if (this.props.interactive) {
+      interactiveComponents.add(this);
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this._value = moment(nextProps.date);
+    if (nextProps.interactive) {
+      interactiveComponents.add(this);
+    } else {
+      interactiveComponents.delete(this);
+    }
+    return true; // default behaviour
+  }
+
+  componentWillUnmount() {
+    interactiveComponents.delete(this);
+  }
+
+  render() {
+    return this._value.isValid() ? this._value.fromNow() : this.props.placeholder;
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.directive('amTimeAgo', () => ({
+    link($scope, element, attr) {
+      const modelName = attr.amTimeAgo;
+      $scope.$watch(modelName, (value) => {
+        ReactDOM.render(<TimeAgo date={value} />, element[0]);
+      });
+    },
+  }));
+
+  ngModule.component('rdTimeAgo', {
+    bindings: {
+      value: '=',
+    },
+    controller($scope, $element) {
+      $scope.$watch('$ctrl.value', () => {
+        // Initial render will occur here as well
+        ReactDOM.render(<TimeAgo date={this.value} placeholder="-" />, $element[0]);
+      });
+    },
+  });
+}
+
+init.init = true;

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,

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",