Compiles with WithGraphData

ts/graphs/GraphsPage.svelte

@@ -9,6 +9,8 @@
     import { getPreferences } from "./preferences";
     import { bridgeCommand } from "anki/bridgecommand";
 
+    import WithGraphData from "./WithGraphData.svelte";
+
     export let i18n: I18n;
     export let nightMode: boolean;
     export let graphs: SvelteComponent[];
@@ -17,39 +19,8 @@
     export let days: number;
     export let controller: SvelteComponent | null;
 
-    let active = false;
-    let sourceData: pb.BackendProto.GraphsOut | null = null;
-    let preferences: PreferenceStore | null = null;
-    let revlogRange: RevlogRange;
-
-    const preferencesPromise = getPreferences();
-
-    const refreshWith = async (searchNew: string, days: number) => {
-        search = searchNew;
-
-        active = true;
-        try {
-            [sourceData, preferences] = await Promise.all([
-                getGraphData(search, days),
-                preferencesPromise,
-            ]);
-            revlogRange = daysToRevlogRange(days);
-        } catch (e) {
-            sourceData = null;
-            alert(e);
-        }
-        active = false;
-    };
-
-    const refresh = (event: CustomEvent) => {
-        refreshWith(event.detail.search, event.detail.days);
-    };
-
-    refreshWith(search, days);
-
-    const browserSearch = (event: CustomEvent) => {
-        const query = `${search} ${event.detail.query}`;
-        bridgeCommand(`browserSearch:${query}`);
+    const browserSearch = (search: string, query: string) => {
+        bridgeCommand(`browserSearch:${search} ${query}`);
     };
 </script>
 
@@ -59,30 +30,32 @@
             font-size: 12px;
         }
     }
-
 </style>
 
 <div class="base">
-    {#if controller}
-        <svelte:component
-            this={controller}
-            {i18n}
-            {search}
-            {days}
-            {active}
-            on:update={refresh} />
-    {/if}
+    <WithGraphData
+        {search}
+        {days}
+        let:pending
+        let:loading
+        let:sourceData
+        let:preferences
+        let:revlogRange>
+        {#if controller}
+            <svelte:component this={controller} {i18n} {search} {days} {loading} />
+        {/if}
 
-    {#if sourceData}
-        {#each graphs as graph}
-            <svelte:component
-                this={graph}
-                {sourceData}
-                {preferences}
-                {revlogRange}
-                {i18n}
-                {nightMode}
-                on:search={browserSearch} />
-        {/each}
-    {/if}
+        {#if !pending}
+            {#each graphs as graph}
+                <svelte:component
+                    this={graph}
+                    {sourceData}
+                    {preferences}
+                    {revlogRange}
+                    {i18n}
+                    {nightMode}
+                    on:search={(event) => browserSearch(search, event.detail.query)} />
+            {/each}
+        {/if}
+    </WithGraphData>
 </div>

ts/graphs/RangeBox.svelte

@@ -1,5 +1,6 @@
 <script lang="typescript">
     import { createEventDispatcher } from "svelte";
+    import type { Writable } from "svelte/store";
 
     import InputBox from "./InputBox.svelte";
 
@@ -12,17 +13,11 @@
         Custom = 3,
     }
 
-    type UpdateEventMap = {
-        update: { days: number; search: string; searchRange: SearchRange };
-    };
-
     export let i18n: I18n;
-    export let active: boolean;
+    export let loading: boolean;
 
-    export let days: number;
-    export let search: string;
-
-    const dispatch = createEventDispatcher<UpdateEventMap>();
+    export let days: Writable<number>;
+    export let search: Writable<string>;
 
     let revlogRange = daysToRevlogRange(days);
     let searchRange: SearchRange =
@@ -34,23 +29,15 @@
 
     let displayedSearch = search;
 
-    const update = () => {
-        dispatch("update", {
-            days: days,
-            search: search,
-            searchRange: searchRange,
-        });
-    };
-
     $: {
         switch (searchRange as SearchRange) {
             case SearchRange.Deck:
-                search = displayedSearch = "deck:current";
-                update();
+                displayedSearch = "deck:current";
+                search.set(displayedSearch);
                 break;
             case SearchRange.Collection:
                 search = displayedSearch = "";
-                update();
+                search.set(displayedSearch);
                 break;
         }
     }
@@ -58,21 +45,18 @@
     $: {
         switch (revlogRange as RevlogRange) {
             case RevlogRange.Year:
-                days = 365;
-                update();
+                days.set(365);
                 break;
             case RevlogRange.All:
-                days = 0;
-                update();
+                days.set(0);
                 break;
         }
     }
 
-    const searchKeyUp = (e: KeyboardEvent) => {
+    const searchKeyUp = (event: KeyboardEvent) => {
         // fetch data on enter
-        if (e.key == "Enter") {
-            search = displayedSearch;
-            update();
+        if (event.key === "Enter") {
+            search.set(displayedSearch);
         }
     };
 
@@ -117,7 +101,7 @@
 
         opacity: 0;
 
-        &.active {
+        &.loading {
             opacity: 0.5;
             transition: opacity 1s;
         }
@@ -129,7 +113,7 @@
 </style>
 
 <div class="range-box">
-    <div class="spin" class:active>◐</div>
+    <div class="spin" class:loading>◐</div>
 
     <InputBox>
         <label>

ts/graphs/WithGraphData.svelte

@@ -14,18 +14,20 @@
     const search = writable(initialSearch);
     const days = writable(initialDays);
 
-    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [search, days])
-    const preferences = useAsync(() => getPreferences())
+    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [
+        search,
+        days,
+    ]);
+    const preferences = useAsync(() => getPreferences());
 
     $: revlogRange = daysToRevlogRange($days);
 </script>
 
 <slot
-     {search}
-     {days}
-     {revlogRange}
-     pending={$sourceData.pending || $preferences.pending}
-     sourceData={$sourceData.value}
-     preferences={$preferences.value}
- >
- </slot>
+    {search}
+    {days}
+    {revlogRange}
+    pending={$sourceData.pending || $preferences.pending}
+    loading={$sourceData.loading || $preferences.loading}
+    sourceData={$sourceData.value}
+    preferences={$preferences.value} />