From 57cc656d832397064df7ac02812cb3dd1d87cd83 Mon Sep 17 00:00:00 2001
From: lenhanphung <lenhanphung@gmail.com>
Date: Thu, 25 Sep 2025 13:08:58 +0700
Subject: [PATCH] fix: sync calendar view state between Calendar and Menubar
 components

- Add onViewChange callback to CalendarAppProps interface
- Update CalendarLayout to manage currentView state and pass callbacks
- Modify Menubar to receive currentView from parent instead of local state
- Sync view changes when clicking day headers in week view
- Ensure dropdown in Menubar updates when calendar view changes
---
 src/components/Calendar/Calendar.tsx       | 12 ++++++++++++
 src/components/Calendar/CalendarLayout.tsx | 13 ++++++++++++-
 src/components/Menubar/Menubar.tsx         | 11 +++++++++--
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index d0c7d87..d644847 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -41,11 +41,13 @@ import Button from "@mui/material/Button";
 interface CalendarAppProps {
   calendarRef: React.RefObject<CalendarApi | null>;
   onDateChange?: (date: Date) => void;
+  onViewChange?: (view: string) => void;
 }
 
 export default function CalendarApp({
   calendarRef,
   onDateChange,
+  onViewChange,
 }: CalendarAppProps) {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedMiniDate, setSelectedMiniDate] = useState(new Date());
@@ -383,6 +385,11 @@ export default function CalendarApp({
             if (onDateChange) {
               onDateChange(calendarCurrentDate);
             }
+
+            // Notify parent about view change
+            if (onViewChange) {
+              onViewChange(arg.view.type);
+            }
           }}
           dayHeaderContent={(arg) => {
             const date = arg.date.getDate();
@@ -412,6 +419,11 @@ export default function CalendarApp({
                 calendarRef.current?.changeView("timeGridDay", arg.date);
                 setSelectedDate(new Date(arg.date));
                 setSelectedMiniDate(new Date(arg.date));
+                
+                // Notify parent about view change
+                if (onViewChange) {
+                  onViewChange("timeGridDay");
+                }
               };
 
               headerEl.addEventListener("click", handleDayHeaderClick);
diff --git a/src/components/Calendar/CalendarLayout.tsx b/src/components/Calendar/CalendarLayout.tsx
index d7f0105..99d97c4 100644
--- a/src/components/Calendar/CalendarLayout.tsx
+++ b/src/components/Calendar/CalendarLayout.tsx
@@ -19,6 +19,7 @@ export default function CalendarLayout() {
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
+  const [currentView, setCurrentView] = useState<string>("timeGridWeek");
 
   const handleRefresh = async () => {
     await dispatch(getCalendarsListAsync());
@@ -49,17 +50,27 @@ export default function CalendarLayout() {
     setCurrentDate(date);
   };
 
+  const handleViewChange = (view: string) => {
+    setCurrentView(view);
+  };
+
   const menubarProps: MenubarProps = {
     calendarRef,
     onRefresh: handleRefresh,
     currentDate,
     onDateChange: handleDateChange,
+    currentView,
+    onViewChange: handleViewChange,
   };
 
   return (
     <div className="App">
       <Menubar {...menubarProps} />
-      <CalendarApp calendarRef={calendarRef} onDateChange={handleDateChange} />
+      <CalendarApp 
+        calendarRef={calendarRef} 
+        onDateChange={handleDateChange} 
+        onViewChange={handleViewChange}
+      />
     </div>
   );
 }
diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx
index d663d7c..92274d9 100644
--- a/src/components/Menubar/Menubar.tsx
+++ b/src/components/Menubar/Menubar.tsx
@@ -32,6 +32,8 @@ export type MenubarProps = {
   onRefresh: () => void;
   currentDate: Date;
   onDateChange?: (date: Date) => void;
+  currentView: string;
+  onViewChange?: (view: string) => void;
 };
 
 export function Menubar({
@@ -39,11 +41,12 @@ export function Menubar({
   onRefresh,
   currentDate,
   onDateChange,
+  currentView,
+  onViewChange,
 }: MenubarProps) {
   const user = useAppSelector((state) => state.user.userData);
   const applist: AppIconProps[] = (window as any).appList ?? [];
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [currentView, setCurrentView] = useState<string>("timeGridWeek");
   const dispatch = useAppDispatch();
 
   if (!user) {
@@ -81,9 +84,13 @@ export function Menubar({
 
   const handleViewChange = (view: string) => {
     if (!calendarRef.current) return;
-    setCurrentView(view);
     calendarRef.current.changeView(view);
 
+    // Notify parent about view change
+    if (onViewChange) {
+      onViewChange(view);
+    }
+
     // Notify parent about date change after view change
     if (onDateChange) {
       const newDate = calendarRef.current.getDate();