From 3468f1144d9bb5569895a470cd43213a6fdccb4c Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 11 May 2023 20:58:12 -0700
Subject: [PATCH] New: Calendar month view will scroll to today on load and
 press

(cherry picked from commit 7c0d3444376caa8a116b5c2084821c326beb01a1)

Closes #8501
---
 frontend/src/Calendar/Day/CalendarDay.js      | 64 ------------------
 frontend/src/Calendar/Day/CalendarDay.tsx     | 67 +++++++++++++++++++
 frontend/src/Calendar/Events/CalendarEvent.js | 17 ++---
 frontend/src/typings/CalendarEvent.ts         |  5 ++
 4 files changed, 81 insertions(+), 72 deletions(-)
 delete mode 100644 frontend/src/Calendar/Day/CalendarDay.js
 create mode 100644 frontend/src/Calendar/Day/CalendarDay.tsx
 create mode 100644 frontend/src/typings/CalendarEvent.ts

diff --git a/frontend/src/Calendar/Day/CalendarDay.js b/frontend/src/Calendar/Day/CalendarDay.js
deleted file mode 100644
index 685846766..000000000
--- a/frontend/src/Calendar/Day/CalendarDay.js
+++ /dev/null
@@ -1,64 +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 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) => {
-            return (
-              <CalendarEventConnector
-                key={event.id}
-                movieId={event.id}
-                date={date}
-                {...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;
diff --git a/frontend/src/Calendar/Day/CalendarDay.tsx b/frontend/src/Calendar/Day/CalendarDay.tsx
new file mode 100644
index 000000000..36a2f02cc
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDay.tsx
@@ -0,0 +1,67 @@
+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 CalendarEvent from 'typings/CalendarEvent';
+import styles from './CalendarDay.css';
+
+interface CalendarDayProps {
+  date: string;
+  time: string;
+  isTodaysDate: boolean;
+  events: CalendarEvent[];
+  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) => {
+          return (
+            <CalendarEventConnector
+              key={event.id}
+              {...event}
+              movieId={event.id}
+              date={date as string}
+              onEventModalOpenToggle={onEventModalOpenToggle}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default CalendarDay;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js
index b7e23a835..dfa73a888 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@@ -25,6 +25,7 @@ class CalendarEvent extends Component {
       title,
       titleSlug,
       genres,
+      date,
       monitored,
       certification,
       hasFile,
@@ -33,8 +34,7 @@ class CalendarEvent extends Component {
       showMovieInformation,
       showCutoffUnmetIcon,
       fullColorEvents,
-      colorImpairedMode,
-      date
+      colorImpairedMode
     } = this.props;
 
     const isDownloading = !!(queueItem || grabbed);
@@ -148,17 +148,18 @@ CalendarEvent.propTypes = {
   inCinemas: PropTypes.string,
   physicalRelease: PropTypes.string,
   digitalRelease: PropTypes.string,
+  date: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   certification: PropTypes.string,
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,
-  showMovieInformation: PropTypes.bool.isRequired,
-  showCutoffUnmetIcon: PropTypes.bool.isRequired,
-  fullColorEvents: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  colorImpairedMode: PropTypes.bool.isRequired,
-  date: PropTypes.string.isRequired
+  // These props come from the connector, not marked as required to appease TS for now.
+  showMovieInformation: PropTypes.bool,
+  showCutoffUnmetIcon: PropTypes.bool,
+  fullColorEvents: PropTypes.bool,
+  timeFormat: PropTypes.string,
+  colorImpairedMode: PropTypes.bool
 };
 
 CalendarEvent.defaultProps = {
diff --git a/frontend/src/typings/CalendarEvent.ts b/frontend/src/typings/CalendarEvent.ts
new file mode 100644
index 000000000..16ba28d6f
--- /dev/null
+++ b/frontend/src/typings/CalendarEvent.ts
@@ -0,0 +1,5 @@
+import Movie from 'Movie/Movie';
+
+type CalendarEvent = Movie;
+
+export default CalendarEvent;