From 10d1ec1bb2f9e22ba30b69a2b8418ebda292edbe Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 5 Sep 2025 17:18:02 +0300 Subject: [PATCH] chore(react/collections/calendar): bring back saving of view --- .../widgets/collections/calendar/calendar.tsx | 9 +++++-- .../widgets/collections/calendar/index.tsx | 20 +++++++++++++--- apps/client/src/widgets/react/hooks.tsx | 13 ++++------ .../src/widgets/view_widgets/calendar_view.ts | 24 ------------------- 4 files changed, 28 insertions(+), 38 deletions(-) diff --git a/apps/client/src/widgets/collections/calendar/calendar.tsx b/apps/client/src/widgets/collections/calendar/calendar.tsx index 62842580a..061680ccf 100644 --- a/apps/client/src/widgets/collections/calendar/calendar.tsx +++ b/apps/client/src/widgets/collections/calendar/calendar.tsx @@ -1,12 +1,13 @@ import { useEffect, useRef } from "preact/hooks"; import { CalendarOptions, Calendar as FullCalendar, PluginDef } from "@fullcalendar/core"; +import { RefObject } from "preact"; interface CalendarProps extends CalendarOptions { + calendarRef?: RefObject; tabIndex?: number; } -export default function Calendar({ tabIndex, ...options }: CalendarProps) { - const calendarRef = useRef(); +export default function Calendar({ tabIndex, calendarRef, ...options }: CalendarProps) { const containerRef = useRef(null); useEffect(() => { @@ -15,6 +16,10 @@ export default function Calendar({ tabIndex, ...options }: CalendarProps) { const calendar = new FullCalendar(containerRef.current, options); calendar.render(); + if (calendarRef) { + calendarRef.current = calendar; + } + return () => calendar.destroy(); }, [ containerRef, options ]); diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx index 79cb2ac0e..3ffe1fc9d 100644 --- a/apps/client/src/widgets/collections/calendar/index.tsx +++ b/apps/client/src/widgets/collections/calendar/index.tsx @@ -1,10 +1,13 @@ import { LocaleInput, PluginDef } from "@fullcalendar/core/index.js"; import { ViewModeProps } from "../interface"; import Calendar from "./calendar"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import "./index.css"; -import { useNoteLabel, useNoteLabelBoolean, useTriliumOption, useTriliumOptionInt } from "../../react/hooks"; +import { useNoteLabel, useNoteLabelBoolean, useSpacedUpdate, useTriliumOption, useTriliumOptionInt } from "../../react/hooks"; import { LOCALE_IDS } from "@triliumnext/commons"; +import { Calendar as FullCalendar } from "@fullcalendar/core"; +import { setLabel } from "../../../services/attributes"; +import { circle } from "leaflet"; interface CalendarViewData { @@ -33,18 +36,23 @@ const LOCALE_MAPPINGS: Record Promise<{ default: LocaleInput }; export default function CalendarView({ note, noteIds }: ViewModeProps) { + const calendarRef = useRef(null); const plugins = usePlugins(false, false); const locale = useLocale(); const [ firstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek"); const [ hideWeekends ] = useNoteLabelBoolean(note, "calendar:hideWeekends"); const [ weekNumbers ] = useNoteLabelBoolean(note, "calendar:weekNumbers"); + const [ calendarView, setCalendarView ] = useNoteLabel(note, "calendar:view"); + const initialView = useRef(calendarView); + const viewSpacedUpdate = useSpacedUpdate(() => setCalendarView(initialView.current)); return (plugins &&
{ + if (initialView.current !== view.type) { + initialView.current = view.type; + viewSpacedUpdate.scheduleUpdate(); + } + }} />
); diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index bc1c14689..97b890e02 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -54,21 +54,16 @@ export function useTriliumEvents(eventNames: T[], handler: export function useSpacedUpdate(callback: () => void | Promise, interval = 1000) { const callbackRef = useRef(callback); - const spacedUpdateRef = useRef(); + const spacedUpdateRef = useRef(new SpacedUpdate( + () => callbackRef.current(), + interval + )); // Update callback ref when it changes useEffect(() => { callbackRef.current = callback; }, [callback]); - // Create SpacedUpdate instance only once - if (!spacedUpdateRef.current) { - spacedUpdateRef.current = new SpacedUpdate( - () => callbackRef.current(), - interval - ); - } - // Update interval if it changes useEffect(() => { spacedUpdateRef.current?.setUpdateInterval(interval); diff --git a/apps/client/src/widgets/view_widgets/calendar_view.ts b/apps/client/src/widgets/view_widgets/calendar_view.ts index 14e849532..ee771144a 100644 --- a/apps/client/src/widgets/view_widgets/calendar_view.ts +++ b/apps/client/src/widgets/view_widgets/calendar_view.ts @@ -39,8 +39,6 @@ export default class CalendarView extends ViewMode<{}> { private $calendarContainer: JQuery; private calendar?: Calendar; private isCalendarRoot: boolean; - private lastView?: string; - private debouncedSaveView?: DebouncedFunction<() => void>; constructor(args: ViewModeArgs) { super(args, "calendar"); @@ -64,12 +62,6 @@ export default class CalendarView extends ViewMode<{}> { eventBuilder = async (e: EventSourceFuncArg) => await this.#buildEventsForCalendar(e); } - // Parse user's initial view, if valid. - const userInitialView = this.parentNote.getLabelValue("calendar:view"); - if (userInitialView && CALENDAR_VIEWS.includes(userInitialView)) { - initialView = userInitialView; - } - const calendar = new Calendar(this.$calendarContainer[0], { events: eventBuilder, editable: isEditable, @@ -150,22 +142,6 @@ export default class CalendarView extends ViewMode<{}> { } #onDatesSet(e: DatesSetArg) { - const currentView = e.view.type; - if (currentView === this.lastView) { - return; - } - - if (!this.debouncedSaveView) { - this.debouncedSaveView = debounce(() => { - if (this.lastView) { - attributes.setLabel(this.parentNote.noteId, "calendar:view", this.lastView); - } - }, 1_000); - } - - this.debouncedSaveView(); - this.lastView = currentView; - if (hasTouchBar) { appContext.triggerCommand("refreshTouchBar"); }