Convert RelativeDateCell to TypeScript

(cherry picked from commit 824ed0a36931ce7aae9aa544a7baf0738dae568c)

frontend/src/Components/Table/Cells/RelativeDateCell.js

@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import TableRowCell from './TableRowCell';
-import styles from './RelativeDateCell.css';
-
-class RelativeDateCell extends PureComponent {
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      date,
-      includeSeconds,
-      includeTime,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      component: Component,
-      dispatch,
-      ...otherProps
-    } = this.props;
-
-    if (!date) {
-      return (
-        <Component
-          className={className}
-          {...otherProps}
-        />
-      );
-    }
-
-    return (
-      <Component
-        className={className}
-        title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
-        {...otherProps}
-      >
-        {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })}
-      </Component>
-    );
-  }
-}
-
-RelativeDateCell.propTypes = {
-  className: PropTypes.string.isRequired,
-  date: PropTypes.string,
-  includeSeconds: PropTypes.bool.isRequired,
-  includeTime: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  component: PropTypes.elementType,
-  dispatch: PropTypes.func
-};
-
-RelativeDateCell.defaultProps = {
-  className: styles.cell,
-  includeSeconds: false,
-  includeTime: false,
-  component: TableRowCell
-};
-
-export default RelativeDateCell;

frontend/src/Components/Table/Cells/RelativeDateCell.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import TableRowCell from './TableRowCell';
+import styles from './RelativeDateCell.css';
+
+interface RelativeDateCellProps {
+  className?: string;
+  date?: string;
+  includeSeconds?: boolean;
+  includeTime?: boolean;
+  component?: React.ElementType;
+}
+
+function RelativeDateCell(props: RelativeDateCellProps) {
+  const {
+    className = styles.cell,
+    date,
+    includeSeconds = false,
+    includeTime = false,
+
+    component: Component = TableRowCell,
+    ...otherProps
+  } = props;
+
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
+
+  if (!date) {
+    return <Component className={className} {...otherProps} />;
+  }
+
+  return (
+    <Component
+      className={className}
+      title={formatDateTime(date, longDateFormat, timeFormat, {
+        includeSeconds,
+        includeRelativeDay: !showRelativeDates,
+      })}
+      {...otherProps}
+    >
+      {getRelativeDate({
+        date,
+        shortDateFormat,
+        showRelativeDates,
+        timeFormat,
+        includeSeconds,
+        includeTime,
+        timeForToday: true,
+      })}
+    </Component>
+  );
+}
+
+export default RelativeDateCell;

frontend/src/Components/Table/Cells/RelativeDateCellConnector.js

@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import RelativeDateCell from './RelativeDateCell';
-
-function createMapStateToProps() {
-  return createSelector(
-    createUISettingsSelector(),
-    (uiSettings) => {
-      return {
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps, null)(RelativeDateCell);