-
Notifications
You must be signed in to change notification settings - Fork 137
Expand file tree
/
Copy pathuseCalendarEvents.ts
More file actions
197 lines (155 loc) · 7 KB
/
useCalendarEvents.ts
File metadata and controls
197 lines (155 loc) · 7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
import { DateSelectArg, EventDropArg } from '@fullcalendar/core';
import { EventResizeDoneArg } from '@fullcalendar/interaction';
import dayjs from 'dayjs';
import { useCallback } from 'react';
import { useCalendarLayoutSetting, useCreateCalendarEvent, useUpdateStartEndTimeCell } from '@/application/database-yjs';
import { Log } from '@/utils/log';
import { correctAllDayEndForStorage, dateToUnixTimestamp } from '@/utils/time';
import { CalendarViewType } from '../types';
/**
* Custom hook to handle calendar event interactions (drag, resize, create)
* Provides functions that can update the database when events are modified
*/
export function useCalendarEvents() {
const calendarSetting = useCalendarLayoutSetting();
const fieldId = calendarSetting?.fieldId || '';
const createCalendarEvent = useCreateCalendarEvent();
const updateCell = useUpdateStartEndTimeCell();
// Create a function that can update any event's time directly
const updateEventTime = useCallback(
(rowId: string, startTimestamp: string, endTimestamp?: string, isAllDay?: boolean) => {
Log.debug('📅 Updating event time:', { rowId, fieldId, startTimestamp, endTimestamp });
updateCell(rowId, fieldId, startTimestamp, endTimestamp, isAllDay);
},
[fieldId, updateCell]
);
// Handle event drop (move event to different time)
const handleEventDrop = useCallback(
async (dropInfo: EventDropArg) => {
Log.debug('📅 Event dropped:', dropInfo.event);
try {
// Parse event ID to get rowId
const rowId = dropInfo.event.id;
if (!rowId) {
throw new Error('Invalid event ID format');
}
const start = dropInfo.event.start;
if (!start) {
throw new Error('Invalid event start date');
}
// Convert dates to Unix timestamps
const startTimestamp = dateToUnixTimestamp(start);
const isAllDay = dropInfo.event.allDay;
// For all-day events, correct end time for storage if needed
const endDate = dropInfo.event.end ? dropInfo.event.end : dayjs(new Date(start)).add(1, 'hour').toDate();
const correctedEndDate = isAllDay && endDate ? correctAllDayEndForStorage(endDate) : endDate;
const endTimestamp = correctedEndDate ? dateToUnixTimestamp(correctedEndDate) : undefined;
// Update the event time
updateEventTime(rowId, startTimestamp, endTimestamp, isAllDay);
Log.debug('📅 Event time updated successfully');
} catch (error) {
console.error('❌ Failed to update event time:', error);
dropInfo.revert();
}
},
[updateEventTime]
);
// Handle event resize (change event duration)
const handleEventResize = useCallback(
async (resizeInfo: EventResizeDoneArg) => {
Log.debug('📅 Event resized:', resizeInfo.event);
try {
// Parse event ID to get rowId
const rowId = resizeInfo.event.id;
if (!rowId) {
throw new Error('Invalid event ID format');
}
// Convert dates to Unix timestamps
const startTimestamp = dateToUnixTimestamp(resizeInfo.event.start!);
const isAllDay = resizeInfo.event.allDay;
// For all-day events, correct end time for storage if needed
const endDate = resizeInfo.event.end;
const correctedEndDate = isAllDay && endDate ? correctAllDayEndForStorage(endDate) : endDate;
const endTimestamp = correctedEndDate ? dateToUnixTimestamp(correctedEndDate) : undefined;
// Update the event time
updateEventTime(rowId, startTimestamp, endTimestamp, isAllDay);
Log.debug('📅 Event duration updated successfully');
} catch (error) {
console.error('❌ Failed to update event duration:', error);
resizeInfo.revert();
}
},
[updateEventTime]
);
// Handle date selection (create new event)
const handleSelect = useCallback(
async (selectInfo: DateSelectArg): Promise<string | null> => {
Log.debug('📅 Date range selected:', selectInfo);
try {
// Convert dates to Unix timestamps
const startTimestamp = dateToUnixTimestamp(selectInfo.start);
// For all-day events, correct end time for storage if needed
const correctedEndDate = selectInfo.allDay ? correctAllDayEndForStorage(selectInfo.end) : selectInfo.end;
let endTimestamp = dateToUnixTimestamp(correctedEndDate);
// For week view time grid selections, default to 1-hour events only for small selections (clicks or short drags)
if (selectInfo.view.type === CalendarViewType.TIME_GRID_WEEK && !selectInfo.allDay) {
const selectionDuration = selectInfo.end.getTime() - selectInfo.start.getTime();
const thirtyMinutesInMs = 30 * 60 * 1000; // 30 minutes in milliseconds
// Only adjust to 1-hour if selection is 30 minutes or less (typically clicks)
if (selectionDuration <= thirtyMinutesInMs) {
const startDate = new Date(selectInfo.start);
const endDate = new Date(startDate);
endDate.setHours(startDate.getHours() + 1); // Add 1 hour
endTimestamp = dateToUnixTimestamp(endDate);
Log.debug('📅 Week view: Adjusted to 1-hour event for short selection', {
originalDuration: `${selectionDuration / 1000 / 60} minutes`,
original: selectInfo.end,
adjusted: endDate
});
} else {
Log.debug('📅 Week view: Keeping original selection duration', {
duration: `${selectionDuration / 1000 / 60} minutes`
});
}
}
// Create new calendar event
const rowId = await createCalendarEvent({ startTimestamp, endTimestamp, includeTime: !selectInfo.allDay });
Log.debug('📅 New event created successfully with rowId:', rowId);
// Clear the selection
selectInfo.view.calendar.unselect();
return rowId;
} catch (error) {
console.error('❌ Failed to create new event:', error);
// Clear the selection even if creation failed
selectInfo.view.calendar.unselect();
return null;
}
},
[createCalendarEvent]
);
// Handle add button click for specific date
const handleAdd = useCallback(
async (date: Date): Promise<string | null> => {
Log.debug('📅 Add button clicked for date:', date);
try {
// Create event for the selected date at current time or start of day
const startTimestamp = dateToUnixTimestamp(date);
// Create new calendar event for the specific date
const rowId = await createCalendarEvent({ startTimestamp });
Log.debug('📅 New event created successfully with rowId:', rowId);
return rowId;
} catch (error) {
console.error('❌ Failed to create new event:', error);
return null;
}
},
[createCalendarEvent]
);
return {
handleEventDrop,
handleEventResize,
handleSelect,
handleAdd,
updateEventTime,
};
}