Add sorting and filtering logic for public lists

src/lib/server/sort-filter-util.ts

@@ -0,0 +1,55 @@
+import type { Prisma } from "@prisma/client";
+
+export const createFilter = (filter: string | null) => {
+    const search: Prisma.ItemWhereInput = {};
+    if (filter === "unclaimed") {
+        search.AND = [
+            {
+                pledgedById: null
+            },
+            {
+                publicPledgedById: null
+            }
+        ];
+    } else if (filter === "claimed") {
+        search.OR = [
+            {
+                pledgedById: {
+                    not: null
+                }
+            },
+            {
+                publicPledgedById: {
+                    not: null
+                }
+            }
+        ];
+    }
+    return search;
+};
+
+export const createSorts = (sort: string | null, direction: string | null) => {
+    let orderBy: Prisma.ItemOrderByWithRelationInput[] = [];
+    if (sort === "price" && direction && (direction === "asc" || direction === "desc")) {
+        orderBy = [
+            {
+                itemPrice: {
+                    value: direction
+                }
+            }
+        ];
+    } else {
+        orderBy = [
+            {
+                displayOrder: {
+                    sort: "asc",
+                    nulls: "last"
+                }
+            },
+            {
+                id: "asc"
+            }
+        ];
+    }
+    return orderBy;
+};

src/routes/lists/[id]/+page.server.ts

@@ -2,8 +2,9 @@ import { client } from "$lib/server/prisma";
 import { error } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { getConfig } from "$lib/server/config";
+import { createFilter, createSorts } from "$lib/server/sort-filter-util";
 
-export const load = (async ({ params }) => {
+export const load = (async ({ params, url }) => {
     const list = await client.publicList.findUnique({
         select: {
             user: true,
@@ -22,11 +23,17 @@ export const load = (async ({ params }) => {
         error(404, "Public list not found");
     }
 
+    const filter = createFilter(url.searchParams.get("filter"));
+    filter.userId = list.user.id;
+    filter.groupId = list.groupId;
+
+    const sort = url.searchParams.get("sort");
+    const direction = url.searchParams.get("dir");
+    const orderBy = createSorts(sort, direction);
+
     const items = await client.item.findMany({
-        where: {
-            userId: list.user.id,
-            groupId: list.groupId
-        },
+        where: filter,
+        orderBy: orderBy,
         include: {
             addedBy: {
                 select: {
@@ -56,6 +63,11 @@ export const load = (async ({ params }) => {
         }
     });
 
+    if (sort === "price" && direction === "asc") {
+        // need to re-sort when descending since Prisma can't order with nulls last
+        items.sort((a, b) => (a.itemPrice?.value ?? Infinity) - (b.itemPrice?.value ?? Infinity));
+    }
+
     return {
         user: {
             name: list.user.name

src/routes/lists/[id]/+page.svelte

@@ -44,6 +44,10 @@
     });
     onDestroy(() => eventSource?.close());
 
+    $effect(() => {
+        allItems = data.items;
+    });
+
     const subscribeToEvents = () => {
         eventSource = new EventSource(`${$page.url.pathname}/events`);
         eventSource.addEventListener(SSEvents.item.update, (e) => {
@@ -85,12 +89,10 @@
 <h1 class="h1 pb-2 md:pb-4">{`${data?.user.name}'s`} Wishes</h1>
 
 <!-- chips -->
-{#if items.length > 0}
-    <div class="flex flex-row flex-wrap space-x-4">
-        <ClaimFilterChip />
-        <SortBy />
-    </div>
-{/if}
+<div class="flex flex-row flex-wrap space-x-4">
+    <ClaimFilterChip />
+    <SortBy />
+</div>
 
 {#if items.length === 0}
     <div class="flex flex-col items-center justify-center space-y-4 pt-4">

src/routes/wishlists/[username]/+page.server.ts

@@ -2,9 +2,9 @@ import { error, redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
 import { client } from "$lib/server/prisma";
-import type { Prisma } from "@prisma/client";
 import { getConfig } from "$lib/server/config";
 import { getActiveMembership } from "$lib/server/group-membership";
+import { createFilter, createSorts } from "$lib/server/sort-filter-util";
 
 export const load: PageServerLoad = async ({ locals, params, url, depends }) => {
     if (!locals.user) {
@@ -27,7 +27,9 @@ export const load: PageServerLoad = async ({ locals, params, url, depends }) =>
         error(404, "user is not part of the group");
     }
 
-    const search: Prisma.ItemWhereInput = {
+    let search = createFilter(url.searchParams.get("filter"));
+    search = {
+        ...search,
         user: {
             username: params.username
         },
@@ -46,39 +48,9 @@ export const load: PageServerLoad = async ({ locals, params, url, depends }) =>
         };
     }
 
-    const filter = url.searchParams.get("filter");
-    if (filter === "unclaimed") {
-        search.pledgedById = null;
-    } else if (filter === "claimed") {
-        search.pledgedById = {
-            not: null
-        };
-    }
-
-    let orderBy: Prisma.ItemOrderByWithRelationInput[];
     const sort = url.searchParams.get("sort");
     const direction = url.searchParams.get("dir");
-    if (sort === "price" && direction && (direction === "asc" || direction === "desc")) {
-        orderBy = [
-            {
-                itemPrice: {
-                    value: direction
-                }
-            }
-        ];
-    } else {
-        orderBy = [
-            {
-                displayOrder: {
-                    sort: "asc",
-                    nulls: "last"
-                }
-            },
-            {
-                id: "asc"
-            }
-        ];
-    }
+    const orderBy = createSorts(sort, direction);
 
     const wishlistItemsQuery = client.item.findMany({
         where: search,

src/routes/wishlists/[username]/+page.svelte

@@ -172,19 +172,17 @@
 </script>
 
 <!-- chips -->
-{#if allItems.length > 0}
-    <div class="flex justify-between">
-        <div class="flex flex-row flex-wrap space-x-4">
-            {#if !data.listOwner.isMe}
-                <ClaimFilterChip />
-            {/if}
-            <SortBy />
-        </div>
-        {#if data.listOwner.isMe}
-            <ReorderChip onFinalize={handleReorderFinalize} bind:reordering />
+<div class="flex justify-between">
+    <div class="flex flex-row flex-wrap space-x-4">
+        {#if !data.listOwner.isMe}
+            <ClaimFilterChip />
         {/if}
+        <SortBy />
     </div>
-{/if}
+    {#if data.listOwner.isMe}
+        <ReorderChip onFinalize={handleReorderFinalize} bind:reordering />
+    {/if}
+</div>
 
 {#if data.listMode === "registry"}
     <div class="flex flex-row space-x-2 pb-4">