New: Calendar month view will scroll to today on load and press

Closes #5574

frontend/src/Calendar/Day/CalendarDay.js

@@ -1,74 +0,0 @@
-import classNames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
-import * as calendarViews from 'Calendar/calendarViews';
-import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
-import CalendarEventGroupConnector from 'Calendar/Events/CalendarEventGroupConnector';
-import styles from './CalendarDay.css';
-
-function CalendarDay(props) {
-  const {
-    date,
-    time,
-    isTodaysDate,
-    events,
-    view,
-    onEventModalOpenToggle
-  } = props;
-
-  return (
-    <div className={classNames(
-      styles.day,
-      view === calendarViews.DAY && styles.isSingleDay
-    )}
-    >
-      {
-        view === calendarViews.MONTH &&
-          <div className={classNames(
-            styles.dayOfMonth,
-            isTodaysDate && styles.isToday,
-            !moment(date).isSame(moment(time), 'month') && styles.isDifferentMonth
-          )}
-          >
-            {moment(date).date()}
-          </div>
-      }
-      <div>
-        {
-          events.map((event) => {
-            if (event.isGroup) {
-              return (
-                <CalendarEventGroupConnector
-                  key={event.seriesId}
-                  {...event}
-                  onEventModalOpenToggle={onEventModalOpenToggle}
-                />
-              );
-            }
-
-            return (
-              <CalendarEventConnector
-                key={event.id}
-                episodeId={event.id}
-                {...event}
-                onEventModalOpenToggle={onEventModalOpenToggle}
-              />
-            );
-          })
-        }
-      </div>
-    </div>
-  );
-}
-
-CalendarDay.propTypes = {
-  date: PropTypes.string.isRequired,
-  time: PropTypes.string.isRequired,
-  isTodaysDate: PropTypes.bool.isRequired,
-  events: PropTypes.arrayOf(PropTypes.object).isRequired,
-  view: PropTypes.string.isRequired,
-  onEventModalOpenToggle: PropTypes.func.isRequired
-};
-
-export default CalendarDay;

frontend/src/Calendar/Day/CalendarDay.tsx

@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React from 'react';
+import * as calendarViews from 'Calendar/calendarViews';
+import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
+import CalendarEventGroupConnector from 'Calendar/Events/CalendarEventGroupConnector';
+import Series from 'Series/Series';
+import CalendarEventGroup, { CalendarEvent } from 'typings/CalendarEventGroup';
+import styles from './CalendarDay.css';
+
+interface CalendarDayProps {
+  date: string;
+  time: string;
+  isTodaysDate: boolean;
+  events: (CalendarEvent | CalendarEventGroup)[];
+  view: string;
+  onEventModalOpenToggle(...args: unknown[]): unknown;
+}
+
+function CalendarDay(props: CalendarDayProps) {
+  const { date, time, isTodaysDate, events, view, onEventModalOpenToggle } =
+    props;
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (isTodaysDate && view === calendarViews.MONTH && ref.current) {
+      ref.current.scrollIntoView();
+    }
+  }, [time, isTodaysDate, view]);
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        styles.day,
+        view === calendarViews.DAY && styles.isSingleDay
+      )}
+    >
+      {view === calendarViews.MONTH && (
+        <div
+          className={classNames(
+            styles.dayOfMonth,
+            isTodaysDate && styles.isToday,
+            !moment(date).isSame(moment(time), 'month') &&
+              styles.isDifferentMonth
+          )}
+        >
+          {moment(date).date()}
+        </div>
+      )}
+      <div>
+        {events.map((event) => {
+          if (event.isGroup) {
+            return (
+              <CalendarEventGroupConnector
+                key={event.seriesId}
+                {...event}
+                onEventModalOpenToggle={onEventModalOpenToggle}
+              />
+            );
+          }
+
+          return (
+            <CalendarEventConnector
+              key={event.id}
+              {...event}
+              episodeId={event.id}
+              series={event.series as Series}
+              airDateUtc={event.airDateUtc as string}
+              onEventModalOpenToggle={onEventModalOpenToggle}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default CalendarDay;

frontend/src/Calendar/Events/CalendarEvent.js

@@ -236,6 +236,7 @@ class CalendarEvent extends Component {
 
 CalendarEvent.propTypes = {
   id: PropTypes.number.isRequired,
+  episodeId: PropTypes.number.isRequired,
   series: PropTypes.object.isRequired,
   episodeFile: PropTypes.object,
   title: PropTypes.string.isRequired,
@@ -248,14 +249,15 @@ CalendarEvent.propTypes = {
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,
-  showEpisodeInformation: PropTypes.bool.isRequired,
-  showFinaleIcon: PropTypes.bool.isRequired,
-  showSpecialIcon: PropTypes.bool.isRequired,
-  showCutoffUnmetIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  colorImpairedMode: PropTypes.bool.isRequired,
-  onEventModalOpenToggle: PropTypes.func.isRequired
+  // These props come from the connector, not marked as required to apease TS for now.
+  showEpisodeInformation: PropTypes.bool,
+  showFinaleIcon: PropTypes.bool,
+  showSpecialIcon: PropTypes.bool,
+  showCutoffUnmetIcon: PropTypes.bool,
+  fullColorEvents: PropTypes.bool,
+  timeFormat: PropTypes.string,
+  colorImpairedMode: PropTypes.bool,
+  onEventModalOpenToggle: PropTypes.func
 };
 
 export default CalendarEvent;

frontend/src/Calendar/Events/CalendarEventGroup.js

@@ -235,14 +235,15 @@ class CalendarEventGroup extends Component {
 }
 
 CalendarEventGroup.propTypes = {
-  series: PropTypes.object.isRequired,
+  // Most of these props come from the connector and are required, but TS is confused.
+  series: PropTypes.object,
   events: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isDownloading: PropTypes.bool.isRequired,
-  showEpisodeInformation: PropTypes.bool.isRequired,
-  showFinaleIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  colorImpairedMode: PropTypes.bool.isRequired,
+  isDownloading: PropTypes.bool,
+  showEpisodeInformation: PropTypes.bool,
+  showFinaleIcon: PropTypes.bool,
+  fullColorEvents: PropTypes.bool,
+  timeFormat: PropTypes.string,
+  colorImpairedMode: PropTypes.bool,
   onEventModalOpenToggle: PropTypes.func.isRequired
 };
 

frontend/src/typings/CalendarEventGroup.ts

@@ -0,0 +1,15 @@
+import Episode from 'Episode/Episode';
+
+export interface CalendarEvent extends Episode {
+  isGroup: false;
+}
+
+interface CalendarEventGroup {
+  isGroup: true;
+  seriesId: number;
+  seasonNumber: number;
+  episodeIds: number[];
+  events: Episode[];
+}
+
+export default CalendarEventGroup;