Fix the sorting on the agenda to respect using all dates instead of only cinema date to sort

frontend/src/Calendar/Agenda/Agenda.js

@@ -6,9 +6,38 @@ import styles from './Agenda.css';
 
 function Agenda(props) {
   const {
-    items
+    items,
+    start,
+    end
   } = props;
 
+  const startDateParsed = Date.parse(start);
+  const endDateParsed = Date.parse(end);
+
+  items.forEach((item) => {
+    const cinemaDateParsed = Date.parse(item.inCinemas);
+    const digitalDateParsed = Date.parse(item.digitalRelease);
+    const physicalDateParsed = Date.parse(item.physicalRelease);
+    const dates = [];
+
+    if (cinemaDateParsed > 0 && cinemaDateParsed >= startDateParsed && cinemaDateParsed <= endDateParsed) {
+      dates.push(cinemaDateParsed);
+    }
+    if (digitalDateParsed > 0 && digitalDateParsed >= startDateParsed && digitalDateParsed <= endDateParsed) {
+      dates.push(digitalDateParsed);
+    }
+    if (physicalDateParsed > 0 && physicalDateParsed >= startDateParsed && physicalDateParsed <= endDateParsed) {
+      dates.push(physicalDateParsed);
+    }
+
+    item.sortDate = Math.min(...dates);
+    item.cinemaDateParsed = cinemaDateParsed;
+    item.digitalDateParsed = digitalDateParsed;
+    item.physicalDateParsed = physicalDateParsed;
+  });
+
+  items.sort((a, b) => ((a.sortDate > b.sortDate) ? 1 : -1));
+
   return (
     <div className={styles.agenda}>
       {
@@ -32,7 +61,9 @@ function Agenda(props) {
 }
 
 Agenda.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  start: PropTypes.string.isRequired,
+  end: PropTypes.string.isRequired
 };
 
 export default Agenda;

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -92,6 +92,5 @@
 }
 
 .dateIcon {
-  display: inline;
-  margin-right: 10px;
+  width: 25px;
 }

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -55,23 +55,26 @@ class AgendaEvent extends Component {
       showCutoffUnmetIcon,
       longDateFormat,
       colorImpairedMode,
-      startDate,
-      endDate
+      cinemaDateParsed,
+      digitalDateParsed,
+      physicalDateParsed,
+      sortDate
     } = this.props;
 
-    const agendaStart = Date.parse(startDate);
-    const agendaEnd = Date.parse(endDate);
-    const cinemaDate = Date.parse(inCinemas);
-    const digitalDate = Date.parse(digitalRelease);
-    let startTime = physicalRelease;
-    let releaseIcon = icons.DISC;
+    let startTime = null;
+    let releaseIcon = null;
 
-    if (digitalDate >= agendaStart && digitalDate <= agendaEnd) {
+    if (physicalDateParsed === sortDate) {
+      startTime = physicalRelease;
+      releaseIcon = icons.DISC;
+    }
+
+    if (digitalDateParsed === sortDate) {
       startTime = digitalRelease;
       releaseIcon = icons.MOVIE_FILE;
     }
 
-    if (cinemaDate >= agendaStart && cinemaDate <= agendaEnd) {
+    if (cinemaDateParsed === sortDate) {
       startTime = inCinemas;
       releaseIcon = icons.IN_CINEMAS;
     }
@@ -92,13 +95,14 @@ class AgendaEvent extends Component {
           )}
           to={link}
         >
+          <div className={styles.dateIcon}>
+            <Icon
+              name={releaseIcon}
+              kind={kinds.DEFAULT}
+            />
+          </div>
+
           <div className={styles.date}>
-            <div className={styles.dateIcon}>
-              <Icon
-                name={releaseIcon}
-                kind={kinds.DEFAULT}
-              />
-            </div>
             {(showDate) ? startTime.format(longDateFormat) : null}
           </div>
 
@@ -176,8 +180,10 @@ AgendaEvent.propTypes = {
   timeFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired,
-  startDate: PropTypes.date,
-  endDate: PropTypes.date
+  cinemaDateParsed: PropTypes.number,
+  digitalDateParsed: PropTypes.number,
+  physicalDateParsed: PropTypes.number,
+  sortDate: PropTypes.number
 };
 
 AgendaEvent.defaultProps = {

frontend/src/Calendar/Agenda/AgendaEventConnector.js

@@ -13,9 +13,7 @@ function createMapStateToProps() {
     createMovieFileSelector(),
     createQueueItemSelector(),
     createUISettingsSelector(),
-    (state) => state.calendar.start,
-    (state) => state.calendar.end,
-    (calendarOptions, movie, movieFile, queueItem, uiSettings, startDate, endDate) => {
+    (calendarOptions, movie, movieFile, queueItem, uiSettings) => {
       return {
         movie,
         movieFile,
@@ -23,9 +21,7 @@ function createMapStateToProps() {
         ...calendarOptions,
         timeFormat: uiSettings.timeFormat,
         longDateFormat: uiSettings.longDateFormat,
-        colorImpairedMode: uiSettings.enableColorImpairedMode,
-        startDate,
-        endDate
+        colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }
   );

frontend/src/Calendar/Header/CalendarHeader.js

@@ -24,7 +24,7 @@ function getTitle(time, start, end, view, longDateFormat) {
   } else if (view === 'month') {
     return timeMoment.format('MMMM YYYY');
   } else if (view === 'agenda') {
-    return 'Agenda';
+    return `Agenda: ${startMoment.format('MMM D')} - ${endMoment.format('MMM D')}`;
   }
 
   let startFormat = 'MMM D YYYY';