Skip to content

Edit button pushes to database, but it doesn't fully prefill #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nogunmesa wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Edit button pushes to database, but it doesn't fully prefill #128

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
295d466
Edit button pushes to database, but it doesn't fully prefill
Nogunmesa May 14, 2025
57aad0c
Edit button pushes to database, but it doesn't fully prefill
Nogunmesa May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 86 additions & 52 deletions frontend/src/app/dashboard/calendar/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,64 +326,87 @@ export default function Home() {
return;
}

const eventWithUser: UserEvent & {
start: Date;
end?: Date;
color?: string;
} = {
...newEvent,
user_id: user.uid,
start: new Date(newEvent.start_time), // <-- ensure start is there
end: newEvent.end_time ? new Date(newEvent.end_time) : undefined,
title: newEvent.title,
id: newEvent.id, // this is FullCalendar id
break_time: newEvent.break_time,
start_time: newEvent.start_time,
created_at: new Date().toISOString(),
description: newEvent.description,
is_generated: false,
is_recurring: newEvent.is_recurring,
location_place: newEvent.location_place,
recurrence_end_date: newEvent.recurrence_end_date,
recurrence_pattern: newEvent.recurrence_pattern,
recurrence_start_date: newEvent.recurrence_start_date,
color: colorTypes.eventByUser,
};
if (newEvent.id) {
// Editing an existing event
axios
.put(
`${backendBaseUrl}/api/calendar/events/id/${newEvent.id}`,
newEvent
)
.then((response) => {
console.log('Successfully updated event:', response.data);

axios
.post(backendBaseUrl + `/api/calendar/events`, eventWithUser)
.then((response) => {
// controller may save multiple events now.
console.log('Successfully saved events:', response);
console.log('event series', response.data.eventSeries);
const eventsToAdd: (typeof eventWithUser)[] = [];
// Update the event in the local state
setAllEvents(
allEvents.map((event) =>
event.id === newEvent.id ? { ...event, ...newEvent } : event
Copy link
Copy Markdown
Collaborator

@trappaly trappaly May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating edited event

)
);
})
.catch((error) => {
console.error('Error updating event:', error);
});
} else {
// Creating a new event

// const { id, start_time, end_time, ...restEvent } = eventWithUser;
const eventWithUser: UserEvent & {
start: Date;
end?: Date;
color?: string;
} = {
...newEvent,
user_id: user.uid,
start: new Date(newEvent.start_time), // <-- ensure start is there
end: newEvent.end_time ? new Date(newEvent.end_time) : undefined,
title: newEvent.title,
id: newEvent.id, // this is FullCalendar id
break_time: newEvent.break_time,
start_time: newEvent.start_time,
created_at: new Date().toISOString(),
description: newEvent.description,
is_generated: false,
is_recurring: newEvent.is_recurring,
location_place: newEvent.location_place,
recurrence_end_date: newEvent.recurrence_end_date,
recurrence_pattern: newEvent.recurrence_pattern,
recurrence_start_date: newEvent.recurrence_start_date,
color: colorTypes.eventByUser,
};

for (const newEvent of response.data.eventSeries) {
// Notice that the keys might not be in the correct order
eventsToAdd.push({
...eventWithUser,
id: newEvent.id,
start_time: new Date(newEvent.start_time).toISOString(),
end_time: newEvent.endTime,
start: new Date(newEvent.start_time),
end: newEvent.end_time ? new Date(newEvent.end_time) : undefined,
});
}
axios
.post(backendBaseUrl + `/api/calendar/events`, eventWithUser)
.then((response) => {
// controller may save multiple events now.
console.log('Successfully saved events:', response);
console.log('event series', response.data.eventSeries);
const eventsToAdd: (typeof eventWithUser)[] = [];

setAllEvents([...allEvents, ...eventsToAdd]);
// const { id, start_time, end_time, ...restEvent } = eventWithUser;

// We want to be consistent and use our backend id
// const correctId = response.data.id;
// const { id, ...restEvent } = eventWithUser;
// console.log(`Replace ${id} with ${correctId}`);
// setAllEvents([...allEvents, { id: correctId, ...restEvent }]);
})
.catch((error) => {
console.error('Error saving event:', error);
});
for (const newEvent of response.data.eventSeries) {
// Notice that the keys might not be in the correct order
eventsToAdd.push({
...eventWithUser,
id: newEvent.id,
start_time: new Date(newEvent.start_time).toISOString(),
end_time: newEvent.endTime,
start: new Date(newEvent.start_time),
end: newEvent.end_time ? new Date(newEvent.end_time) : undefined,
});
}

setAllEvents([...allEvents, ...eventsToAdd]);

// We want to be consistent and use our backend id
// const correctId = response.data.id;
// const { id, ...restEvent } = eventWithUser;
// console.log(`Replace ${id} with ${correctId}`);
// setAllEvents([...allEvents, { id: correctId, ...restEvent }]);
})
.catch((error) => {
console.error('Error saving event:', error);
});
}
setShowModal(false);
setNewEvent({
...example,
Expand Down Expand Up @@ -602,6 +625,17 @@ export default function Home() {
</div>

<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
onClick={() => {
Copy link
Copy Markdown
Collaborator

@trappaly trappaly May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implemented edit button

setShowModal(true); // Open the modal for editing
setNewEvent(selectedEvent); // Pre-fill the modal with the selected event's details
setIsDeadline(selectedEvent.is_recurring); // Set deadline state based on the event
}}
>
Edit
</button>
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm
Expand Down