chore: update to use per_page

Signed-off-by: Charlie Drage <[email protected]>

Author: cdrage

src/lib/ui/ExtensionsList.spec.ts

@@ -50,10 +50,10 @@ test('check categories', async () => {
   expect(category2).toBeInTheDocument();
 });
 
-test('if query is passed into window.location.search then it should be used to filter extensions', async () => {
+test('if per_page is passed into window.location.search then it should be used to filter extensions', async () => {
   // Mock query to be last 1
   vi.spyOn(window, 'location', 'get').mockReturnValue({
-    search: '?query=1',
+    search: '?per_page=1',
   } as unknown as Location);
 
   const extensionsByCategories: ExtensionByCategoryInfo[] = [
@@ -108,10 +108,10 @@ test('if query is passed into window.location.search then it should be used to f
   expect(category2).not.toBeInTheDocument();
 });
 
-test('if query is passed in with 4, it should show last 4 extensions even if there is 5 in the list', async () => {
+test('if per_page is passed in with 4, it should show last 4 extensions even if there is 5 in the list', async () => {
   // Mock query to be last 4
   vi.spyOn(window, 'location', 'get').mockReturnValue({
-    search: '?query=4',
+    search: '?per_page=4',
   } as unknown as Location);
 
   const extensionsByCategories: ExtensionByCategoryInfo[] = [

src/lib/ui/ExtensionsList.svelte

@@ -12,10 +12,10 @@ let { extensionsByCategories }: Props = $props();
 let filteredExtensions = $state<CatalogExtensionInfo[]>([]);
 let showCategories = $state<boolean>(true);
 
-// Get the query from the URL
-function getQueryLimit(): number | undefined {
-  const query = new URLSearchParams(window.location.search).get('query');
-  return query ? parseInt(query, 10) : undefined;
+// Get the per_page from the URL
+function getPerPageLimit(): number | undefined {
+  const perPage = new URLSearchParams(window.location.search).get('per_page');
+  return perPage ? parseInt(perPage, 10) : undefined;
 }
 
 // Sort extensions based upon the last updated date based upon what's in .versions array
@@ -28,7 +28,7 @@ function getSortedExtensions(extensions: CatalogExtensionInfo[]): CatalogExtensi
 }
 
 $effect(() => {
-  const limit = getQueryLimit();
+  const limit = getPerPageLimit();
   showCategories = !limit;
 
   if (limit) {
@@ -47,7 +47,7 @@ $effect(() => {
 		<div
 		class="mt-2 grid min-[920px]:grid-cols-2 min-[1180px]:grid-cols-3 gap-3"
 		role="region"
-		aria-label="Queried extensions"
+		aria-label="Filtered extensions"
 		>
 			{#each filteredExtensions as extension}
 				<ExtensionByCategoryCard {extension} />