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:
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user