Fix error when missing context value

MuckRock · Nov 27, 2024 · 765f04b · 765f04b
1 parent 5a7c5d7
commit 765f04b
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 29 deletions.
diff --git a/src/lib/components/common/HighlightGroup.svelte b/src/lib/components/common/HighlightGroup.svelte
@@ -16,6 +16,7 @@
   export let open = false;
   export let highlights: [string, H][] = [];
   export let getHref: (id: string) => string;
+  export let showAll = false;
 
   let clientWidth = 1000;
   $: isSmall = clientWidth < remToPx(27);
@@ -46,28 +47,30 @@
           {$_("search.matchingResults", { values: { n: highlights.length } })}
         </slot>
       </div>
-      <div class="right">
-        <Button
-          minW={false}
-          size="small"
-          ghost
-          on:click={collapseAll}
-          title={$_("search.collapseAll")}
-        >
-          <Fold16 height={12} width={12} />
-          {#if !isSmall}{$_("search.collapseAll")}{/if}
-        </Button>
-        <Button
-          minW={false}
-          size="small"
-          ghost
-          on:click={expandAll}
-          title={$_("search.expandAll")}
-        >
-          <Unfold16 height={12} width={12} />
-          {#if !isSmall}{$_("search.expandAll")}{/if}
-        </Button>
-      </div>
+      {#if showAll}
+        <div class="right">
+          <Button
+            minW={false}
+            size="small"
+            ghost
+            on:click={collapseAll}
+            title={$_("search.collapseAll")}
+          >
+            <Fold16 height={12} width={12} />
+            {#if !isSmall}{$_("search.collapseAll")}{/if}
+          </Button>
+          <Button
+            minW={false}
+            size="small"
+            ghost
+            on:click={expandAll}
+            title={$_("search.expandAll")}
+          >
+            <Unfold16 height={12} width={12} />
+            {#if !isSmall}{$_("search.expandAll")}{/if}
+          </Button>
+        </div>
+      {/if}
     </summary>
     <ul>
       {#each highlights as [id, highlight]}

diff --git a/src/lib/components/common/stories/HighlightGroup.stories.svelte b/src/lib/components/common/stories/HighlightGroup.stories.svelte
@@ -25,3 +25,11 @@
     </svelte:fragment>
   </HighlightGroup>
 </Story>
+
+<Story name="With All Controls">
+  <HighlightGroup {highlights} {getHref} showAll>
+    <svelte:fragment let:id let:highlight>
+      <Highlight title={id} segments={highlight} />
+    </svelte:fragment>
+  </HighlightGroup>
+</Story>
diff --git a/src/lib/components/documents/NoteHighlights.svelte b/src/lib/components/documents/NoteHighlights.svelte
@@ -30,8 +30,8 @@
   export let open = true;
 
   const { subscribe } =
-    getContext<Writable<{ allOpen: boolean }>>("highlightState");
-  $: subscribe((state) => {
+    getContext<Writable<{ allOpen: boolean }>>("highlightState") ?? {};
+  $: subscribe?.((state) => {
     open = state.allOpen;
   });
 
@@ -49,6 +49,7 @@
   {highlights}
   getHref={noteHref}
   bind:open
+  showAll={Boolean(subscribe)}
   on:collapseAll
   on:expandAll
 >

diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte
@@ -27,8 +27,8 @@
   export let open = true;
 
   const { subscribe } =
-    getContext<Writable<{ allOpen: boolean }>>("highlightState");
-  $: subscribe((state) => {
+    getContext<Writable<{ allOpen: boolean }>>("highlightState") ?? {};
+  $: subscribe?.((state) => {
     open = state.allOpen;
   });
   $: highlights = Object.entries(document.highlights ?? {});
@@ -43,6 +43,7 @@
   {highlights}
   getHref={pageHref}
   bind:open
+  showAll={Boolean(subscribe)}
   on:collapseAll
   on:expandAll
 >

diff --git a/src/lib/components/documents/stories/NoteHighlights.stories.svelte b/src/lib/components/documents/stories/NoteHighlights.stories.svelte
@@ -1,6 +1,9 @@
 <script context="module" lang="ts">
-  import type { Document } from "$lib/api/types";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import { Story } from "@storybook/addon-svelte-csf";
+
+  import type { Document } from "$lib/api/types";
   import NoteHighlights from "../NoteHighlights.svelte";
 
   import search from "@/test/fixtures/documents/search-highlight.json";
@@ -15,6 +18,13 @@
     tags: ["autodocs"],
     parameters: { layout: "fullscreen" },
   };
+
+  setContext(
+    "highlightState",
+    writable({
+      allOpen: true,
+    }),
+  );
 </script>
 
 <Story name="closed">

diff --git a/src/lib/components/documents/stories/PageHighlights.stories.svelte b/src/lib/components/documents/stories/PageHighlights.stories.svelte
@@ -1,7 +1,9 @@
 <script context="module" lang="ts">
-  import type { Document } from "$lib/api/types";
-
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import { Story } from "@storybook/addon-svelte-csf";
+
+  import type { Document } from "$lib/api/types";
   import PageHighlights from "../PageHighlights.svelte";
 
   import search from "@/test/fixtures/documents/search-highlight.json";
@@ -17,6 +19,13 @@
     tags: ["autodocs"],
     parameters: { layout: "fullscreen" },
   };
+
+  setContext(
+    "highlightState",
+    writable({
+      allOpen: true,
+    }),
+  );
 </script>
 
 <Story name="closed">