Merge branch 'master' into alyssa-starter

1 files changed, 19 insertions, 25 deletions

diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index 77cf80151..d0cd69273 100644
--- a/src/client/util/CalendarManager.tsx
+++ b/src/client/util/CalendarManager.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum';
 import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -19,6 +17,7 @@ import { DocumentView } from '../views/nodes/DocumentView';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import './CalendarManager.scss';
 import { SnappingManager } from './SnappingManager';
+import { CalendarDate, DateValue } from '@internationalized/date';
 // import 'react-date-range/dist/styles.css';
 // import 'react-date-range/dist/theme/default.css';
 
@@ -29,7 +28,7 @@ interface CalendarSelectOptions {
     value: string;
 }
 
-const formatCalendarDateToString = (calendarDate: any) => {
+const formatCalendarDateToString = (calendarDate: DateValue) => {
     console.log('Formatting the following date: ', calendarDate);
     const date = new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day);
     console.log(typeof date);
@@ -44,7 +43,7 @@ const formatCalendarDateToString = (calendarDate: any) => {
 // TODO: For a doc already in a calendar: give option to edit date range, delete from calendar
 
 @observer
-export class CalendarManager extends ObservableReactComponent<{}> {
+export class CalendarManager extends ObservableReactComponent<object> {
     // eslint-disable-next-line no-use-before-define
     public static Instance: CalendarManager;
     @observable private isOpen = false;
@@ -101,7 +100,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
         this.layoutDocAcls = false;
     });
 
-    constructor(props: {}) {
+    constructor(props: object) {
         super(props);
         CalendarManager.Instance = this;
         makeObservable(this);
@@ -110,15 +109,6 @@ export class CalendarManager extends ObservableReactComponent<{}> {
     componentDidMount(): void {}
 
     @action
-    handleSelectChange = (option: any) => {
-        if (option) {
-            const selectOpt = option as CalendarSelectOptions;
-            this.selectedExistingCalendarOption = selectOpt;
-            this.calendarName = selectOpt.value; // or label
-        }
-    };
-
-    @action
     handleCalendarTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         console.log('Existing calendars: ', this.existingCalendars);
         this.calendarName = event.target.value;
@@ -212,15 +202,13 @@ export class CalendarManager extends ObservableReactComponent<{}> {
     };
 
     @observable
-    selectedDateRange: any = [
-        {
-            start: new Date(),
-            end: new Date(),
-        },
-    ];
+    selectedDateRange: { start: DateValue; end: DateValue } = {
+        start: new CalendarDate(2024, 1, 1),
+        end: new CalendarDate(2024, 1, 1),
+    };
 
     @action
-    setSelectedDateRange = (range: any) => {
+    setSelectedDateRange = (range: { start: DateValue; end: DateValue }) => {
         console.log('Range: ', range);
         this.selectedDateRange = range;
     };
@@ -228,14 +216,14 @@ export class CalendarManager extends ObservableReactComponent<{}> {
     @computed
     get createButtonActive() {
         if (this.calendarName.length === 0 || this.errorMessage.length > 0) return false; // disabled if no calendar name
-        let startDate: Date | undefined;
-        let endDate: Date | undefined;
+        let startDate: DateValue | undefined;
+        let endDate: DateValue | undefined;
         try {
             startDate = this.selectedDateRange.start;
             endDate = this.selectedDateRange.end;
             console.log(startDate);
             console.log(endDate);
-        } catch (e: any) {
+        } catch (e) {
             console.log(e);
             return false; // disabled
         }
@@ -288,7 +276,13 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                             isSearchable
                             options={this.selectOptions}
                             value={this.selectedExistingCalendarOption}
-                            onChange={this.handleSelectChange}
+                            onChange={change => {
+                                if (change) {
+                                    const selectOpt = change;
+                                    this.selectedExistingCalendarOption = selectOpt;
+                                    this.calendarName = selectOpt.value; // or label
+                                }
+                            }}
                             styles={{
                                 control: () => ({
                                     display: 'inline-flex',