fix: Updates to the calendar now properly refresh linked Agenda views

src/calendar/agenda/Agenda.svelte → src/agenda/Agenda.svelte

@@ -1,43 +1,37 @@
 <script lang="ts">
-    import Flags from "../ui/Events/Flags.svelte";
-    import MoonUI from "../ui/Moon.svelte";
+    import { getTypedContext } from "src/calendar/view.utils";
+    import Flags from "../calendar/ui/Events/Flags.svelte";
+    import MoonUI from "../calendar/ui/Moon.svelte";
     import { dateString } from "src/utils/functions";
     import {
         CALENDAR_SEARCH,
         LEFT,
         RIGHT,
         setClickableIcon,
     } from "src/utils/icons";
-    import { derived, get, writable } from "svelte/store";
-    import type { CalendarStore } from "src/stores/calendar.store";
-    import type Calendarium from "src/main";
-    import { setTypedContext } from "../view.utils";
-    import { onDestroy } from "svelte";
+    import { derived, get } from "svelte/store";
 
-    export let store: CalendarStore;
-    export let plugin: Calendarium;
-    export let parent: string;
+    const store = getTypedContext("store");
+    const parent = getTypedContext("parent");
 
-    setTypedContext("store", writable(store));
-    setTypedContext("plugin", plugin);
-
-    $: ephemeral = store.getEphemeralStore(parent);
+    $: calendar = $store;
+    $: ephemeral = $store.getEphemeralStore(parent);
     $: ephViewing = ephemeral.viewing;
     $: {
         if (!$ephViewing) {
-            $ephViewing = { ...get(store.current) };
+            $ephViewing = { ...get($store.current) };
         }
     }
     $: viewing = derived([ephemeral.viewing], ([view]) => view!);
-    $: date = dateString($viewing!, $store);
-    $: yearCalculator = store.yearCalculator;
+    $: date = dateString($viewing!, $calendar);
+    $: yearCalculator = $store.yearCalculator;
     $: displayedMonth = yearCalculator
         .getYearFromCache($viewing!.year)
         .getMonthFromCache($viewing!.month);
     $: daysBeforeMonth = displayedMonth.daysBefore;
     $: daysBeforeDay = $daysBeforeMonth + $viewing!.day;
-    $: events = store.getEventsForDate($viewing!);
-    $: moons = store.moonCache.getItemsOrRecalculate($viewing!);
+    $: events = $store.getEventsForDate($viewing!);
+    $: moons = $store.moonCache.getItemsOrRecalculate($viewing!);
     $: displayDayNumber = ephemeral.displayDayNumber;
     $: displayMoons = ephemeral.displayMoons;
 

src/agenda/UI.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type Calendarium from "src/main";
+    import { writable } from "svelte/store";
+    import { type CalendarStore } from "src/stores/calendar.store";
+    import { setTypedContext } from "../calendar/view.utils";
+    import Agenda from "./Agenda.svelte";
+
+    export let store: CalendarStore | null;
+    export let plugin: Calendarium;
+    export let parent: string;
+
+    setTypedContext("plugin", plugin);
+    setTypedContext("parent", parent);
+
+    $: {
+        if (store) {
+            setTypedContext("store", writable(store));
+        }
+    }
+</script>
+
+{#if !store}
+    <p>No calendars created! Create one in settings to get started.</p>
+{:else}
+    {#key store}
+        <Agenda />
+    {/key}
+{/if}
+
+<style scoped>
+    .calendar-container {
+        padding: 0 8px 20px 8px;
+        background: inherit;
+        display: flex;
+        flex-flow: column;
+        overflow: auto;
+        height: 100%;
+    }
+</style>

src/calendar/view.agenda.ts → src/agenda/view.agenda.ts

@@ -6,14 +6,14 @@ import {
     type ViewParent,
     type CalendariumViewStates,
     ViewType,
-} from "./view.types";
-import Agenda from "./agenda/Agenda.svelte";
-import CalendariumView from "./view";
+} from "../calendar/view.types";
+import UI from "./UI.svelte";
+import CalendariumView from "../calendar/view";
 
 export class AgendaView extends ItemView {
     navigation: boolean = false;
-    store: CalendarStore;
-    ui: Agenda;
+    store: CalendarStore | null;
+    ui: UI;
     calendar: string;
     id: string = nanoid(12);
     parent: string;
@@ -30,6 +30,15 @@ export class AgendaView extends ItemView {
                 }
             )
         );
+        this.plugin.registerEvent(
+            this.app.workspace.on("calendarium-updated", () => {
+                if (!this.plugin.hasCalendar(this.calendar)) {
+                    this.calendar = this.plugin.defaultCalendar?.id;
+                }
+                this.store = this.plugin.getStore(this.calendar);
+                this.ui.$set({ store: this.store });
+            })
+        );
     }
     async setState(
         state: CalendariumViewStates[typeof ViewType.Agenda],
@@ -62,7 +71,7 @@ export class AgendaView extends ItemView {
         if (store) {
             this.store = store;
             if (!this.ui) {
-                this.ui = new Agenda({
+                this.ui = new UI({
                     target: this.contentEl,
                     props: {
                         store: this.store,
@@ -95,7 +104,7 @@ export class AgendaView extends ItemView {
     protected async onClose(): Promise<void> {
         this.ui?.$destroy();
         super.onClose();
-        this.store.getEphemeralStore(this.parent).viewing.set(null);
+        this.store?.getEphemeralStore(this.parent).viewing.set(null);
     }
 }
 

src/calendar/ui/Day/Day.svelte

@@ -14,7 +14,7 @@
     } from "src/schemas/calendar/timespans";
     import CalendariumMenu from "src/utils/menu";
     import { isCalEvent } from "src/events/event.types";
-    import { openAgendaView } from "src/calendar/view.agenda";
+    import { openAgendaView } from "src/agenda/view.agenda";
     import { getTypedContext } from "src/calendar/view.utils";
 
     export let month: MonthStore;

src/calendar/view.types.ts

@@ -45,6 +45,7 @@ export interface CalendarContext {
     ephemeralStore: Writable<EphemeralStore>;
     full: Writable<boolean>;
     monthInFrame: Writable<number | null>;
+    parent: string;
 }
 
 export interface ViewParent extends Component {

src/main.ts

@@ -17,7 +17,7 @@ import { DEFAULT_FORMAT } from "./utils/constants";
 import { CalendariumNotice } from "./utils/notice";
 
 import { ViewType } from "./calendar/view.types";
-import { AgendaView } from "./calendar/view.agenda";
+import { AgendaView } from "./agenda/view.agenda";
 
 declare global {
     interface Window {

src/settings/settings.service.ts

@@ -297,8 +297,6 @@ class SettingsServiceClass {
     }
 
     public async saveCalendars() {
-        console.log("🚀 ~ file: settings.service.ts:300 ~ saveCalendars:");
-
         await this.saveAndTrigger();
     }
     /**