Load pinnedAddons in load, not in component

MuckRock · Apr 12, 2024 · 9b043d9 · 9b043d9
1 parent 6f02004
commit 9b043d9
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git a/src/lib/components/addons/AddOnListItem.svelte b/src/lib/components/addons/AddOnListItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { AddOnListItem } from "@/addons/types";
+
   import { _ } from "svelte-i18n";
 
   import AddOnPin from "@/addons/AddOnPin.svelte";
   import AddOnPopularity from "@/addons/Popularity.svelte";
-  import type { AddOnListItem } from "@/addons/types";
   import PremiumBadge from "@/premium-credits/PremiumBadge.svelte";
 
   export let addon: AddOnListItem;

diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Hash16, Infinity16, StarFill16, Tag16 } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
+  import { Infinity16, StarFill16 } from "svelte-octicons";
+
   import Pin from "@/common/icons/Pin.svelte";
-  import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
   import Premium from "@/common/icons/Premium.svelte";
-  import { _ } from "svelte-i18n";
+  import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
   import Flex from "../common/Flex.svelte";
+
   import { CATEGORIES } from "$lib/api/addons";
 
   export let active: string = "all";

diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
@@ -89,7 +89,7 @@
         ><PlusCircle16 /> Upload Documents</Button
       >
       <Actions />
-      <AddOns />
+      <AddOns pinnedAddOns={data.pinnedAddons} />
     </SignedIn>
   </svelte:fragment>
 </MainLayout>

diff --git a/src/routes/app/+page.ts b/src/routes/app/+page.ts
@@ -2,6 +2,7 @@ import type { SearchOptions } from "$lib/api/types";
 
 import { DEFAULT_PER_PAGE } from "@/config/config.js";
 import { search } from "$lib/api/documents";
+import { getPinnedAddons } from "@/lib/api/addons.js";
 
 export async function load({ url, fetch }) {
   const query = url.searchParams.get("q") || "";
@@ -22,11 +23,13 @@ export async function load({ url, fetch }) {
   }
 
   const searchResults = search(query, options, fetch);
+  const pinnedAddons = getPinnedAddons(fetch);
 
   return {
     query,
     per_page,
     cursor,
     searchResults,
+    pinnedAddons,
   };
 }
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
@@ -14,7 +14,7 @@
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Error from "@/lib/components/common/Error.svelte";
   import ListItem from "$lib/components/addons/AddOnListItem.svelte";
-  import AddOnsNavigation from "@/lib/components/addons/AddOnsNavigation.svelte";
+  import AddOnsNavigation from "$lib/components/addons/AddOnsNavigation.svelte";
 
   export let data;
 
@@ -37,7 +37,7 @@
     const formData = new FormData(event.currentTarget as HTMLFormElement);
     const query = formData.get("query") ?? "";
     if (!query) return;
-    url.searchParams.set("query", query);
+    url.searchParams.set("query", query as string);
     goto(url);
   }
 

diff --git a/src/routes/app/sidebar/AddOns.svelte b/src/routes/app/sidebar/AddOns.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import type { Page } from "@/api/types/common";
+  import type { AddOnListItem } from "@/addons/types";
+
   import { Book16, Hourglass24, Pin24, Plug16 } from "svelte-octicons";
   import Action from "$lib/components/common/Action.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
@@ -8,7 +11,7 @@
   import Pin from "@/common/Pin.svelte";
   import { getPinnedAddons } from "@/lib/api/addons";
 
-  let pinnedAddOns = getPinnedAddons();
+  export let pinnedAddOns: Promise<Page<AddOnListItem>>;
 </script>
 
 <SidebarGroup>