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
This commit is contained in:
lenhanphung
2025-09-25 13:08:58 +07:00
parent 3a9b87a41c
commit 57cc656d83
3 changed files with 33 additions and 3 deletions
+12
View File
@@ -41,11 +41,13 @@ import Button from "@mui/material/Button";
interface CalendarAppProps { interface CalendarAppProps {
calendarRef: React.RefObject<CalendarApi | null>; calendarRef: React.RefObject<CalendarApi | null>;
onDateChange?: (date: Date) => void; onDateChange?: (date: Date) => void;
onViewChange?: (view: string) => void;
} }
export default function CalendarApp({ export default function CalendarApp({
calendarRef, calendarRef,
onDateChange, onDateChange,
onViewChange,
}: CalendarAppProps) { }: CalendarAppProps) {
const [selectedDate, setSelectedDate] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(new Date());
const [selectedMiniDate, setSelectedMiniDate] = useState(new Date()); const [selectedMiniDate, setSelectedMiniDate] = useState(new Date());
@@ -383,6 +385,11 @@ export default function CalendarApp({
if (onDateChange) { if (onDateChange) {
onDateChange(calendarCurrentDate); onDateChange(calendarCurrentDate);
} }
// Notify parent about view change
if (onViewChange) {
onViewChange(arg.view.type);
}
}} }}
dayHeaderContent={(arg) => { dayHeaderContent={(arg) => {
const date = arg.date.getDate(); const date = arg.date.getDate();
@@ -412,6 +419,11 @@ export default function CalendarApp({
calendarRef.current?.changeView("timeGridDay", arg.date); calendarRef.current?.changeView("timeGridDay", arg.date);
setSelectedDate(new Date(arg.date)); setSelectedDate(new Date(arg.date));
setSelectedMiniDate(new Date(arg.date)); setSelectedMiniDate(new Date(arg.date));
// Notify parent about view change
if (onViewChange) {
onViewChange("timeGridDay");
}
}; };
headerEl.addEventListener("click", handleDayHeaderClick); headerEl.addEventListener("click", handleDayHeaderClick);
+12 -1
View File
@@ -19,6 +19,7 @@ export default function CalendarLayout() {
const userId = const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? ""; useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
const [currentDate, setCurrentDate] = useState<Date>(new Date()); const [currentDate, setCurrentDate] = useState<Date>(new Date());
const [currentView, setCurrentView] = useState<string>("timeGridWeek");
const handleRefresh = async () => { const handleRefresh = async () => {
await dispatch(getCalendarsListAsync()); await dispatch(getCalendarsListAsync());
@@ -49,17 +50,27 @@ export default function CalendarLayout() {
setCurrentDate(date); setCurrentDate(date);
}; };
const handleViewChange = (view: string) => {
setCurrentView(view);
};
const menubarProps: MenubarProps = { const menubarProps: MenubarProps = {
calendarRef, calendarRef,
onRefresh: handleRefresh, onRefresh: handleRefresh,
currentDate, currentDate,
onDateChange: handleDateChange, onDateChange: handleDateChange,
currentView,
onViewChange: handleViewChange,
}; };
return ( return (
<div className="App"> <div className="App">
<Menubar {...menubarProps} /> <Menubar {...menubarProps} />
<CalendarApp calendarRef={calendarRef} onDateChange={handleDateChange} /> <CalendarApp
calendarRef={calendarRef}
onDateChange={handleDateChange}
onViewChange={handleViewChange}
/>
</div> </div>
); );
} }
+9 -2
View File
@@ -32,6 +32,8 @@ export type MenubarProps = {
onRefresh: () => void; onRefresh: () => void;
currentDate: Date; currentDate: Date;
onDateChange?: (date: Date) => void; onDateChange?: (date: Date) => void;
currentView: string;
onViewChange?: (view: string) => void;
}; };
export function Menubar({ export function Menubar({
@@ -39,11 +41,12 @@ export function Menubar({
onRefresh, onRefresh,
currentDate, currentDate,
onDateChange, onDateChange,
currentView,
onViewChange,
}: MenubarProps) { }: MenubarProps) {
const user = useAppSelector((state) => state.user.userData); const user = useAppSelector((state) => state.user.userData);
const applist: AppIconProps[] = (window as any).appList ?? []; const applist: AppIconProps[] = (window as any).appList ?? [];
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [currentView, setCurrentView] = useState<string>("timeGridWeek");
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
if (!user) { if (!user) {
@@ -81,9 +84,13 @@ export function Menubar({
const handleViewChange = (view: string) => { const handleViewChange = (view: string) => {
if (!calendarRef.current) return; if (!calendarRef.current) return;
setCurrentView(view);
calendarRef.current.changeView(view); calendarRef.current.changeView(view);
// Notify parent about view change
if (onViewChange) {
onViewChange(view);
}
// Notify parent about date change after view change // Notify parent about date change after view change
if (onDateChange) { if (onDateChange) {
const newDate = calendarRef.current.getDate(); const newDate = calendarRef.current.getDate();