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