diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js index 75b9901ea..9b125ade3 100644 --- a/frontend/src/Movie/Details/MovieDetails.js +++ b/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={ - - { - !!inCinemas && -
-
- -
- {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })} -
- } - { - !!digitalRelease && -
-
- -
- {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })} -
- } - { - !!physicalRelease && -
-
- -
- {getRelativeDate(physicalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })} -
- } - - ); -} - -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; diff --git a/frontend/src/Movie/Details/MovieReleaseDates.tsx b/frontend/src/Movie/Details/MovieReleaseDates.tsx new file mode 100644 index 000000000..ec64df051 --- /dev/null +++ b/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 ( +
+ {inCinemas ? ( +
+
+ +
+ {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { + timeFormat, + timeForToday: false, + })} +
+ ) : null} + {digitalRelease ? ( +
+
+ +
+ {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { + timeFormat, + timeForToday: false, + })} +
+ ) : null} + {physicalRelease ? ( +
+
+ +
+ {getRelativeDate( + physicalRelease, + shortDateFormat, + showRelativeDates, + { timeFormat, timeForToday: false } + )} +
+ ) : null} +
+ ); +} + +export default MovieReleaseDates; diff --git a/frontend/src/Movie/Details/MovieReleaseDatesConnector.js b/frontend/src/Movie/Details/MovieReleaseDatesConnector.js deleted file mode 100644 index 9c60c374b..000000000 --- a/frontend/src/Movie/Details/MovieReleaseDatesConnector.js +++ /dev/null @@ -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);