tweaked some things with CalendarView

1 files changed, 28 insertions, 35 deletions

diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index c3e54ebd3..6ef2d3429 100644
--- a/src/client/util/CalendarManager.tsx
+++ b/src/client/util/CalendarManager.tsx
@@ -34,8 +34,8 @@ interface CalendarSelectOptions {
 }
 
 const formatCalendarDateToString = (calendarDate: any) => {
-    console.log("Formatting the following date: ", calendarDate);
-    const date = new Date(calendarDate.year, calendarDate.month-1, calendarDate.day)
+    console.log('Formatting the following date: ', calendarDate);
+    const date = new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day);
     console.log(typeof date);
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -118,21 +118,23 @@ export class CalendarManager extends ObservableReactComponent<{}> {
 
     @action
     handleSelectChange = (option: any) => {
-        let selectOpt = option as CalendarSelectOptions;
-        this.selectedExistingCalendarOption = selectOpt;
-        this.calendarName = selectOpt.value; // or label
+        if (option) {
+            let 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);
+        console.log('Existing calendars: ', this.existingCalendars);
         this.calendarName = event.target.value;
     };
 
     @action
     handleCalendarDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         this.calendarDescription = event.target.value;
-    }
+    };
 
     // TODO: Make undoable
     private addToCalendar = () => {
@@ -144,7 +146,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
             let calendar: Doc;
             if (this.creationType === 'new-calendar') {
                 if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) {
-                    console.log('creating...')
+                    console.log('creating...');
                     calendar = Docs.Create.CalendarDocument(
                         {
                             title: this.calendarName,
@@ -152,7 +154,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                         },
                         []
                     );
-                    console.log('successful calendar creation')
+                    console.log('successful calendar creation');
                 } else {
                     this.errorMessage = 'Calendar with this name already exists';
                     return;
@@ -170,17 +172,17 @@ export class CalendarManager extends ObservableReactComponent<{}> {
             const startDateStr = formatCalendarDateToString(this.selectedDateRange.start);
             const endDateStr = formatCalendarDateToString(this.selectedDateRange.end);
 
-            console.log("start date: ", startDateStr);
-            console.log("end date: ", endDateStr)
+            console.log('start date: ', startDateStr);
+            console.log('end date: ', endDateStr);
 
             const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding
-            console.log("subdoc embedding", subDocEmbedding);
+            console.log('subdoc embedding', subDocEmbedding);
             subDocEmbedding.embedContainer = calendar; // set embed container
             subDocEmbedding.date_range = `${startDateStr}|${endDateStr}`; // set subDoc date range
 
             Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar
 
-            console.log("my calendars: ", Doc.MyCalendars);
+            console.log('my calendars: ', Doc.MyCalendars);
             if (this.creationType === 'new-calendar') {
                 Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars
             }
@@ -228,7 +230,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
 
     @action
     setSelectedDateRange = (range: any) => {
-        console.log("Range: ", range);
+        console.log('Range: ', range);
         this.selectedDateRange = range;
     };
 
@@ -241,7 +243,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
             startDate = this.selectedDateRange.start;
             endDate = this.selectedDateRange.end;
             console.log(startDate);
-            console.log(endDate)
+            console.log(endDate);
         } catch (e: any) {
             console.log(e);
             return false; // disabled
@@ -280,8 +282,8 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                         <TextField
                             fullWidth
                             onChange={this.handleCalendarTitleChange}
-                            label='Calendar name'
-                            placeholder='Enter a name...'
+                            label="Calendar name"
+                            placeholder="Enter a name..."
                             variant="filled"
                             style={{
                                 backgroundColor: 'white',
@@ -320,12 +322,12 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                             }}></Select>
                     )}
                 </div>
-                <div className='description-container'>
+                <div className="description-container">
                     <TextField
                         fullWidth
                         multiline
-                        label='Calendar description'
-                        placeholder='Enter a description (optional)...'
+                        label="Calendar description"
+                        placeholder="Enter a description (optional)..."
                         onChange={this.handleCalendarDescriptionChange}
                         variant="filled"
                         style={{
@@ -338,23 +340,14 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                 <div className="date-range-picker-container">
                     <div>Select a date range: </div>
                     <Provider theme={defaultTheme}>
-                        <DateRangePicker 
-                            aria-label='Select a date range'
-                            value={this.selectedDateRange} 
-                            onChange={v => this.setSelectedDateRange(v)}/>
+                        <DateRangePicker aria-label="Select a date range" value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} />
                     </Provider>
                 </div>
-                {this.createButtonActive && 
-                    <div className='create-button-container'>
-                        <Button 
-                            onClick={() => this.addToCalendar()} 
-                            text="Add to Calendar" 
-                            iconPlacement="right" 
-                            icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} />
+                {this.createButtonActive && (
+                    <div className="create-button-container">
+                        <Button onClick={() => this.addToCalendar()} text="Add to Calendar" iconPlacement="right" icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} />
                     </div>
-                    
-                }
-                
+                )}
             </div>
         );
     }
@@ -362,4 +355,4 @@ export class CalendarManager extends ObservableReactComponent<{}> {
     render() {
         return <MainViewModal contents={this.calendarInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />;
     }
-}
\ No newline at end of file
+}