implement shouldComponentUpdate for relative_timestamp (#3320)

app/javascript/mastodon/components/relative_timestamp.js

@@ -2,19 +2,40 @@ import React from 'react';
 import { injectIntl, FormattedRelative } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const RelativeTimestamp = ({ intl, timestamp }) => {
+const dateFormatOptions = {
-  const date = new Date(timestamp);
+  hour12: false,
-
+  year: 'numeric',
-  return (
+  month: 'short',
-    <time dateTime={timestamp} title={intl.formatDate(date, { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}>
+  day: '2-digit',
-      <FormattedRelative value={date} />
+  hour: '2-digit',
-    </time>
+  minute: '2-digit',
-  );
 };
 
-RelativeTimestamp.propTypes = {
+class RelativeTimestamp extends React.Component {
-  intl: PropTypes.object.isRequired,
+
-  timestamp: PropTypes.string.isRequired,
+  static propTypes = {
-};
+    intl: PropTypes.object.isRequired,
+    timestamp: PropTypes.string.isRequired,
+  };
+
+  shouldComponentUpdate (nextProps) {
+    // As of right now the locale doesn't change without a new page load,
+    // but we might as well check in case that ever changes.
+    return this.props.timestamp !== nextProps.timestamp ||
+      this.props.intl.locale !== nextProps.intl.locale;
+  }
+
+  render () {
+    const { timestamp, intl } = this.props;
+    const date = new Date(timestamp);
+
+    return (
+      <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
+        <FormattedRelative value={date} />
+      </time>
+    );
+  }
+
+}
 
 export default injectIntl(RelativeTimestamp);