feat(blueprint): update search page layout

Author: DontMash

src/lib/search.schema.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { PAGINATION_PAGE_DEFAULT, PAGINATION_PER_PAGE_DEFAULT, SEARCH_ORDER_OPTION_DEFAULT, SEARCH_SORT_OPTION_DEFAULT } from "./search";
+
+const SEARCH_SORT_SCHEMA =
+    z.union([z.literal('created'), z.literal('updated'), z.literal('version'), z.literal('buildingCount'), z.literal('islandCount'), z.literal('viewCount'), z.literal('downloadCount'), z.literal('bookmarkCount')]);
+export type SearchSortOption = z.infer<typeof SEARCH_SORT_SCHEMA>;
+
+const SEARCH_ORDER_SCHEMA = z.union([z.literal('asc'), z.literal('desc')]);
+export type SearchOrderOption = z.infer<typeof SEARCH_ORDER_SCHEMA>;
+
+export const SEARCH_SCHEMA = z.object({
+    query: z.string().optional(),
+    filter: z.string().optional(),
+    sort: SEARCH_SORT_SCHEMA.optional().default(SEARCH_SORT_OPTION_DEFAULT),
+    order: SEARCH_ORDER_SCHEMA.optional().default(SEARCH_ORDER_OPTION_DEFAULT),
+});
+
+export const PAGINATION_SCHEMA = z.object({
+    page: z.number().optional().default(PAGINATION_PAGE_DEFAULT),
+    perPage: z.number().optional().default(PAGINATION_PER_PAGE_DEFAULT),
+})

src/lib/search.ts

@@ -0,0 +1,23 @@
+import type { SearchOrderOption, SearchSortOption } from "./search.schema";
+
+export const SEARCH_SORT_OPTION_DEFAULT: SearchSortOption = 'created';
+export const SEARCH_SORT_OPTIONS: Record<SearchSortOption, string> = {
+    created: "Created",
+    updated: "Update",
+    version: "Version",
+    buildingCount: "Buildings",
+    islandCount: "Islands",
+    viewCount: "Views",
+    downloadCount: "Download",
+    bookmarkCount: "Bookmarks",
+};
+
+export const SEARCH_ORDER_OPTION_DEFAULT: SearchOrderOption = 'desc';
+export const SEARCH_ORDER_OPTIONS: Record<SearchOrderOption, string> = {
+    asc: "Ascending",
+    desc: "Descending",
+};
+
+
+export const PAGINATION_PAGE_DEFAULT = 1;
+export const PAGINATION_PER_PAGE_DEFAULT = 10;

src/lib/server/blueprint.api.ts

@@ -15,6 +15,7 @@ import {
 } from '$lib/blueprint.schema';
 import type { BlueprintRecord, BlueprintTag } from '$lib/blueprint.types';
 import type { User } from '$lib/user.types';
+import { PAGINATION_PAGE_DEFAULT, PAGINATION_PER_PAGE_DEFAULT } from '$lib/search';
 
 type BlueprintGetOptions = {
   query: string;
@@ -36,14 +37,12 @@ const GET_FIELDS = [
   'expand.tags.name',
   'expand.creator.displayname',
 ];
-const DEFAULT_GET_PAGE = 1;
-const DEFAULT_GET_PAGE_ENTRIES = 10;
 const DEFAULT_GET_OPTIONS: BlueprintGetOptions = {
   query: '',
   sort: 'created',
   order: 'desc',
-  page: DEFAULT_GET_PAGE,
-  perPage: DEFAULT_GET_PAGE_ENTRIES,
+  page: PAGINATION_PAGE_DEFAULT,
+  perPage: PAGINATION_PER_PAGE_DEFAULT,
 };
 
 export const get = async (pb: PocketBase, options?: BlueprintGetOptions) => {
@@ -191,7 +190,7 @@ const getBlueprintFormData = (
   return formData;
 };
 
-export const getBlueprintOptions = (url: URL) => {
+export const getBlueprintOptions = (url: URL): BlueprintGetOptions => {
   const filterParams = String(url.searchParams.get('filter'));
   const filterEntries = filterParams.split(';');
   const filter = filterEntries.reduce<Record<string, Array<string>>>(
@@ -206,8 +205,8 @@ export const getBlueprintOptions = (url: URL) => {
   const options: BlueprintGetOptions = {
     query: url.searchParams.get('query') ?? '',
     filter,
-    page: Number(url.searchParams.get('page')),
-    perPage: Number(url.searchParams.get('perPage')),
+    page: Number(url.searchParams.get('page') ?? DEFAULT_GET_OPTIONS.page),
+    perPage: Number(url.searchParams.get('perPage') ?? DEFAULT_GET_OPTIONS.perPage),
   };
   const sort = url.searchParams.get('sort');
   if (sort) {

src/routes/(app)/blueprint/search/+page.server.ts

@@ -1,9 +1,14 @@
+import { z } from 'zod';
+import type { Actions, PageServerLoad } from './$types';
+import { fail, superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
 import type { BlueprintTag } from '$lib/blueprint.types';
+import { PAGINATION_SCHEMA, SEARCH_SCHEMA, type SearchOrderOption, type SearchSortOption } from '$lib/search.schema';
 import { get, getBlueprintOptions } from '$lib/server/blueprint.api';
-import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals, url }) => {
-  const result = await get(locals.pb, getBlueprintOptions(url));
+  const options = getBlueprintOptions(url);
+  const result = await get(locals.pb, options);
   const images = result.items?.reduce<Record<string, string>>(
     (result, current) => {
       if (current.images.length <= 0) return result;
@@ -14,26 +19,23 @@ export const load = (async ({ locals, url }) => {
     },
     {},
   );
-
   const tags = await locals.pb.collection<BlueprintTag>('tags').getFullList();
-  const query = url.searchParams.get('query');
-  const filter = url.searchParams.get('filter');
-  const sort = url.searchParams.get('sort');
-  const order = url.searchParams.get('order');
+
+  const query = url.searchParams.get('query') ?? undefined;
+  const filter = url.searchParams.get('filter') ?? undefined;
+  const sort = (url.searchParams.get('sort') ?? 'created') as SearchSortOption;
+  const order = (url.searchParams.get('order') ?? 'desc') as SearchOrderOption;
+
+  const form = await superValidate({ query, filter, sort, order, page: options.page, perPage: options.perPage }, zod(z.intersection(SEARCH_SCHEMA, PAGINATION_SCHEMA)));
 
   return {
     seo: {
-      title: `Browse blueprints`,
-      description: query
-        ? `List of blueprints for “${query}”.`
-        : 'List of all blueprints.',
+      title: 'Browse blueprints',
+      description: 'Search the whole collection of blueprints. Filter & sort to find the blueprint that suits your requirements.'
     },
     result,
     images,
     tags,
-    query,
-    filter,
-    sort,
-    order,
+    form,
   };
-}) satisfies PageServerLoad;
+}) satisfies PageServerLoad;