From 7dc74004aefb35d56a286fd9f7c65d41a174fe82 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 22 Mar 2021 01:07:15 +0100
Subject: [PATCH] Create BrowserSearch component, because we cannot read from
 stores within slotted content

---
 ts/graphs/BrowserSearch.svelte | 10 ++++++++++
 ts/graphs/GraphsPage.svelte    | 18 +++++++++++-------
 ts/graphs/asyncReactive.ts     |  3 +--
 3 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 ts/graphs/BrowserSearch.svelte

diff --git a/ts/graphs/BrowserSearch.svelte b/ts/graphs/BrowserSearch.svelte
new file mode 100644
index 000000000..a093b42d7
--- /dev/null
+++ b/ts/graphs/BrowserSearch.svelte
@@ -0,0 +1,10 @@
+<script lang="typescript">
+    import { bridgeCommand } from "anki/bridgecommand";
+
+    export let search: Readable<string>;
+    export let query: string;
+
+    $: {
+        bridgeCommand(`browserSearch: ${$search} ${query}`);
+    }
+</script>
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 90f8a2c1f..5d165cac1 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -3,9 +3,9 @@
 
     import type { SvelteComponent } from "svelte/internal";
     import type { I18n } from "anki/i18n";
-    import { bridgeCommand } from "anki/bridgecommand";
 
     import WithGraphData from "./WithGraphData.svelte";
+    import BrowserSearch from "./BrowserSearch.svelte";
 
     export let i18n: I18n;
     export let nightMode: boolean;
@@ -15,20 +15,22 @@
     export let initialDays: number;
     export let controller: SvelteComponent | null;
 
-    const browserSearch = (search: string, query: string): void => {
-        bridgeCommand(`browserSearch:${search} ${query}`);
+    let query: string;
+
+    const activateBrowserSearch = (event: CustomEvent): void => {
+        query = event.detail.query;
     };
 </script>
 
 <style lang="scss">
-    @media only screen and (max-width: 600px) {
-        .base {
+    div {
+        @media only screen and (max-width: 600px) {
             font-size: 12px;
         }
     }
 </style>
 
-<div class="base">
+<div>
     <WithGraphData
         {initialSearch}
         {initialDays}
@@ -51,8 +53,10 @@
                     {revlogRange}
                     {i18n}
                     {nightMode}
-                    on:search={(event) => browserSearch(search, event.detail.query)} />
+                    on:search={activateBrowserSearch} />
             {/each}
         {/if}
+
+        <BrowserSearch {search} {query} />
     </WithGraphData>
 </div>
diff --git a/ts/graphs/asyncReactive.ts b/ts/graphs/asyncReactive.ts
index 70dfcdfd9..c5590d0c7 100644
--- a/ts/graphs/asyncReactive.ts
+++ b/ts/graphs/asyncReactive.ts
@@ -11,8 +11,7 @@ function useAsyncReactive<T, E>(
     asyncFunction: () => Promise<T>,
     dependencies: [Readable<unknown>, ...Readable<unknown>[]]
 ): AsyncReativeData<T, E> {
-    const initial = asyncFunction();
-    const promise = derived(dependencies, (_, set) => set(asyncFunction()), initial);
+    const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
 
     const value = derived(
         promise,