fixed some bugs related to edit events with different dates

client/src/api/api.ts

@@ -141,7 +141,7 @@ export default class Api {
     }
   }
 
-  async getRooms(signal: AbortSignal, startTime: string, endTime: string, timeZone: string) {
+  async getEvents(signal: AbortSignal, startTime: string, endTime: string, timeZone: string) {
     try {
       const res = await this.client.get('/api/events', {
         params: {

client/src/pages/Home/BookRoomView/index.tsx

@@ -36,7 +36,7 @@ const createRoomDropdownOptions = (rooms: IConferenceRoom[]) => {
 };
 
 interface BookRoomViewProps {
-  onRoomBooked: () => void;
+  onRoomBooked: (date?: string) => void;
 }
 
 export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
@@ -89,7 +89,7 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
     if (initialPageLoad && formData.startTime) {
       setAvailableRooms();
     }
-  }, [initialPageLoad, formData.startTime, formData.duration, formData.seats]);
+  }, [initialPageLoad, date, formData.startTime, formData.duration, formData.seats]);
 
   const handleInputChange = (id: string, value: string | number | string[] | boolean) => {
     setFormData((prevData) => ({
@@ -237,7 +237,7 @@ export default function BookRoomView({ onRoomBooked }: BookRoomViewProps) {
     toast.success(`${roomName} has been booked!`);
 
     setAvailableRoomOptions({ others: [], preferred: [] });
-    onRoomBooked();
+    onRoomBooked(date.toISOString());
   }
 
   if (loading) return <></>;

client/src/pages/Home/MyEventsView/EditEventsView.tsx

@@ -110,7 +110,7 @@ export default function EditEventsView({ open, event, handleClose, currentRoom,
     if (roomCapacityOptions.length > 0) {
       setAvailableRooms();
     }
-  }, [formData.startTime, formData.duration, formData.seats, roomCapacityOptions]);
+  }, [date, formData.startTime, formData.duration, formData.seats, roomCapacityOptions]);
 
   const handleInputChange = (id: string, value: string | number | string[] | boolean) => {
     setFormData((prevData) => ({

client/src/pages/Home/MyEventsView/index.tsx

@@ -12,7 +12,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import EditEventsView from './EditEventsView';
-export default function MyEventsView() {
+
+interface MyEventsViewProps {
+  redirectedDate?: string;
+}
+
+export default function MyEventsView({ redirectedDate }: MyEventsViewProps) {
   const [loading, setLoading] = useState(true);
   const [editLoading, setEditLoading] = useState(false);
   const [events, setEvents] = useState<EventResponse[]>([]);
@@ -24,11 +29,11 @@ export default function MyEventsView() {
   const api = useApi();
   const { preferences } = usePreferences();
 
-  const [currentDate, setCurrentDate] = useState(new Date(new Date().setHours(0, 0, 0, 0)).toISOString());
+  const [currentDate, setCurrentDate] = useState(redirectedDate || new Date().toISOString());
   const abortControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    const fetchRooms = async () => {
+    const fetchEvents = async () => {
       const query = {
         startTime: new Date(new Date(currentDate).setHours(0, 0, 0, 0)).toISOString(),
         endTime: new Date(new Date(currentDate).setHours(23, 59, 59, 999)).toISOString(),
@@ -40,7 +45,7 @@ export default function MyEventsView() {
       }
 
       abortControllerRef.current = new AbortController();
-      const res = await api.getRooms(abortControllerRef.current.signal, query.startTime, query.endTime, query.timeZone);
+      const res = await api.getEvents(abortControllerRef.current.signal, query.startTime, query.endTime, query.timeZone);
       const { data, status } = res;
       setLoading(false);
 
@@ -57,7 +62,7 @@ export default function MyEventsView() {
     };
 
     setLoading(true);
-    fetchRooms();
+    fetchEvents();
   }, [currentDate]);
 
   useEffect(() => {
@@ -150,7 +155,10 @@ export default function MyEventsView() {
       return;
     }
 
-    setEvents((prevEvents) => prevEvents.map((event) => (event.eventId === data.eventId ? res.data : event)));
+    setEvents((prevEvents) =>
+      prevEvents.map((event) => (event.eventId === data.eventId ? res.data : event)).filter((event) => event.start.split('T')[0] === currentDate.split('T')[0]),
+    );
+
     toast.success('Room has been updated');
     setEditView(null);
     setEditLoading(false);

client/src/pages/Home/index.tsx

@@ -42,15 +42,17 @@ const ExtensionRedirectPrompt = () => {
 export default function Home() {
   const [tabIndex, setTabIndex] = useState(0);
   const { state } = useLocation();
+  const [redirectedDate, setRedirectedDate] = useState<string | undefined>();
   const [extensionRedirectMessage, setExtensionRedirectMessage] = useState(null);
 
   useEffect(() => {
     const message = state?.message;
     setExtensionRedirectMessage(message);
   }, []);
 
-  const onRoomBooked = () => {
+  const onRoomBooked = (date?: string) => {
     setTabIndex(1);
+    setRedirectedDate(date);
   };
 
   const handleTabChange = (newValue: number) => {
@@ -86,7 +88,7 @@ export default function Home() {
         />
       </Box>
       {tabIndex === 0 && <BookRoomView onRoomBooked={onRoomBooked} />}
-      {tabIndex === 1 && <MyEventsView />}
+      {tabIndex === 1 && <MyEventsView redirectedDate={redirectedDate} />}
     </Box>
   );
 }