New: Tooltips for dates in MovieReleaseDates

frontend/src/Movie/Details/MovieDetails.js

@@ -44,7 +44,7 @@ import MovieCollectionLabelConnector from './../MovieCollectionLabelConnector';
 import MovieCastPostersConnector from './Credits/Cast/MovieCastPostersConnector';
 import MovieCrewPostersConnector from './Credits/Crew/MovieCrewPostersConnector';
 import MovieDetailsLinks from './MovieDetailsLinks';
-import MovieReleaseDatesConnector from './MovieReleaseDatesConnector';
+import MovieReleaseDates from './MovieReleaseDates';
 import MovieStatusLabel from './MovieStatusLabel';
 import MovieTagsConnector from './MovieTagsConnector';
 import MovieTitlesTable from './Titles/MovieTitlesTable';
@@ -433,7 +433,7 @@ class MovieDetails extends Component {
                             }
                             title={translate('ReleaseDates')}
                             body={
-                              <MovieReleaseDatesConnector
+                              <MovieReleaseDates
                                 inCinemas={inCinemas}
                                 physicalRelease={physicalRelease}
                                 digitalRelease={digitalRelease}

frontend/src/Movie/Details/MovieReleaseDates.js

@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import styles from './MovieReleaseDates.css';
-
-function MovieReleaseDates(props) {
-  const {
-    showRelativeDates,
-    shortDateFormat,
-    timeFormat,
-    inCinemas,
-    physicalRelease,
-    digitalRelease
-  } = props;
-
-  return (
-    <div>
-      {
-        !!inCinemas &&
-          <div >
-            <div className={styles.dateIcon}>
-              <Icon
-                name={icons.IN_CINEMAS}
-              />
-            </div>
-            {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
-          </div>
-      }
-      {
-        !!digitalRelease &&
-          <div >
-            <div className={styles.dateIcon}>
-              <Icon
-                name={icons.MOVIE_FILE}
-              />
-            </div>
-            {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
-          </div>
-      }
-      {
-        !!physicalRelease &&
-          <div >
-            <div className={styles.dateIcon}>
-              <Icon
-                name={icons.DISC}
-              />
-            </div>
-            {getRelativeDate(physicalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
-          </div>
-      }
-    </div>
-  );
-}
-
-MovieReleaseDates.propTypes = {
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  inCinemas: PropTypes.string,
-  physicalRelease: PropTypes.string,
-  digitalRelease: PropTypes.string
-};
-
-export default MovieReleaseDates;

frontend/src/Movie/Details/MovieReleaseDates.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import translate from 'Utilities/String/translate';
+import styles from './MovieReleaseDates.css';
+
+interface MovieReleaseDatesProps {
+  inCinemas: string;
+  physicalRelease: string;
+  digitalRelease: string;
+}
+
+function MovieReleaseDates(props: MovieReleaseDatesProps) {
+  const { inCinemas, physicalRelease, digitalRelease } = props;
+
+  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+
+  return (
+    <div>
+      {inCinemas ? (
+        <div title={translate('InCinemas')}>
+          <div className={styles.dateIcon}>
+            <Icon name={icons.IN_CINEMAS} />
+          </div>
+          {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
+      ) : null}
+      {digitalRelease ? (
+        <div title={translate('DigitalRelease')}>
+          <div className={styles.dateIcon}>
+            <Icon name={icons.MOVIE_FILE} />
+          </div>
+          {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
+      ) : null}
+      {physicalRelease ? (
+        <div title={translate('PhysicalRelease')}>
+          <div className={styles.dateIcon}>
+            <Icon name={icons.DISC} />
+          </div>
+          {getRelativeDate(
+            physicalRelease,
+            shortDateFormat,
+            showRelativeDates,
+            { timeFormat, timeForToday: false }
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default MovieReleaseDates;

frontend/src/Movie/Details/MovieReleaseDatesConnector.js

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