From 0bbe38ebde07656a2c0ff23d131fa5f0895820f1 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 22 Mar 2021 02:44:08 +0100
Subject: [PATCH] Create search and days writable in GraphsPage to allow
 browserSearch to work

---
 ts/graphs/BrowserSearch.svelte | 10 ----------
 ts/graphs/GraphsPage.svelte    | 22 ++++++++++------------
 ts/graphs/RangeBox.svelte      |  3 ++-
 ts/graphs/WithGraphData.svelte | 28 ++++++++--------------------
 ts/graphs/asyncReactive.ts     |  6 +++++-
 5 files changed, 25 insertions(+), 44 deletions(-)
 delete mode 100644 ts/graphs/BrowserSearch.svelte

diff --git a/ts/graphs/BrowserSearch.svelte b/ts/graphs/BrowserSearch.svelte
deleted file mode 100644
index a093b42d7..000000000
--- a/ts/graphs/BrowserSearch.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<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 5d165cac1..6d2488ed4 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -2,10 +2,11 @@
     import "../sass/core.css";
 
     import type { SvelteComponent } from "svelte/internal";
+    import { writable } from "svelte/store";
     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,11 +16,12 @@
     export let initialDays: number;
     export let controller: SvelteComponent | null;
 
-    let query: string;
+    const search = writable(initialSearch);
+    const days = writable(initialDays);
 
-    const activateBrowserSearch = (event: CustomEvent): void => {
-        query = event.detail.query;
-    };
+    function browserSearch(event: CustomEvent) {
+        bridgeCommand(`browserSearch: ${$search} ${event.detail.query}`);
+    }
 </script>
 
 <style lang="scss">
@@ -32,10 +34,8 @@
 
 <div>
     <WithGraphData
-        {initialSearch}
-        {initialDays}
-        let:search
-        let:days
+        {search}
+        {days}
         let:loading
         let:sourceData
         let:preferences
@@ -53,10 +53,8 @@
                     {revlogRange}
                     {i18n}
                     {nightMode}
-                    on:search={activateBrowserSearch} />
+                    on:search={browserSearch} />
             {/each}
         {/if}
-
-        <BrowserSearch {search} {query} />
     </WithGraphData>
 </div>
diff --git a/ts/graphs/RangeBox.svelte b/ts/graphs/RangeBox.svelte
index 157420444..5677a1025 100644
--- a/ts/graphs/RangeBox.svelte
+++ b/ts/graphs/RangeBox.svelte
@@ -20,7 +20,8 @@
     export let search: Writable<string>;
 
     let revlogRange = daysToRevlogRange($days);
-    let searchRange = $search === "deck:current"
+    let searchRange =
+        $search === "deck:current"
             ? SearchRange.Deck
             : $search === ""
             ? SearchRange.Collection
diff --git a/ts/graphs/WithGraphData.svelte b/ts/graphs/WithGraphData.svelte
index 10f34cdae..bbaac8cd9 100644
--- a/ts/graphs/WithGraphData.svelte
+++ b/ts/graphs/WithGraphData.svelte
@@ -1,52 +1,40 @@
 <script lang="typescript">
-    import { onMount } from "svelte";
-    import { writable } from "svelte/store";
     import useAsync from "./async";
     import useAsyncReactive from "./asyncReactive";
 
     import { getGraphData, RevlogRange, daysToRevlogRange } from "./graph-helpers";
     import { getPreferences } from "./preferences";
 
-    export let initialSearch: string;
-    export let initialDays: number;
-
-    const search = writable(initialSearch);
-    const days = writable(initialDays);
+    export let search: Writable<string>;
+    export let days: Writable<number>;
 
     const {
         loading: graphLoading,
         error: graphError,
         value: graphValue,
-    } = useAsyncReactive(() => getGraphData($search, $days), [
-        search,
-        days,
-    ]);
+    } = useAsyncReactive(() => getGraphData($search, $days), [search, days]);
 
     const preferencesPromise = getPreferences();
-    const {
-        loading: prefsLoading,
-        error: prefsError,
-        value: prefsValue,
-    } = useAsync(() => preferencesPromise);
+    const { loading: prefsLoading, error: prefsError, value: prefsValue } = useAsync(
+        () => preferencesPromise
+    );
 
     $: revlogRange = daysToRevlogRange($days);
 
     $: {
         if ($graphError) {
-            alert($graphError)
+            alert($graphError);
         }
     }
 
     $: {
         if ($prefsError) {
-            alert($prefsError)
+            alert($prefsError);
         }
     }
 </script>
 
 <slot
-    {search}
-    {days}
     {revlogRange}
     loading={$graphLoading || $prefsLoading}
     sourceData={$graphValue}
diff --git a/ts/graphs/asyncReactive.ts b/ts/graphs/asyncReactive.ts
index c5590d0c7..d07b71749 100644
--- a/ts/graphs/asyncReactive.ts
+++ b/ts/graphs/asyncReactive.ts
@@ -11,7 +11,11 @@ function useAsyncReactive<T, E>(
     asyncFunction: () => Promise<T>,
     dependencies: [Readable<unknown>, ...Readable<unknown>[]]
 ): AsyncReativeData<T, E> {
-    const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
+    const promise = derived(
+        dependencies,
+        (_, set) => set(asyncFunction()),
+        asyncFunction()
+    );
 
     const value = derived(
         promise,