From e6d441e9f2c03b35a8b20e19b1a8ddf73faf2285 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 1 Sep 2025 11:27:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20load=20funct?=
 =?UTF-8?q?ion=20in=20+page.ts=20to=20use=20getSvgsByCategory=20for=20impr?=
 =?UTF-8?q?oved=20category=20filtering=20and=20sorting=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/directory/[category]/+page.ts | 36 +++++++++++++-----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/routes/directory/[category]/+page.ts b/src/routes/directory/[category]/+page.ts
index 5d7db34..cb3c5be 100644
--- a/src/routes/directory/[category]/+page.ts
+++ b/src/routes/directory/[category]/+page.ts
@@ -1,48 +1,50 @@
 import type { PageLoad } from "./$types";
 import type { iSVG } from "@/types/svg";
 
-import { svgs } from "@/data/svgs";
 import { error } from "@sveltejs/kit";
+import { getSvgsByCategory } from "@/data";
 import { searchWithFuse } from "@/utils/searchWithFuse";
 
 export const load: PageLoad = (async ({ params, url }) => {
   const { category } = params;
   const searchParam = url.searchParams.get("search") || "";
+  const sortParam = url.searchParams.get("sort") === "alphabetical";
 
-  const svgsByCategory = svgs.filter((svg: iSVG) => {
-    if (Array.isArray(svg.category)) {
-      return svg.category.some(
-        (categoryItem) => categoryItem.toLowerCase() === category.toLowerCase(),
-      );
-    } else {
-      return svg.category.toLowerCase() === category.toLowerCase();
-    }
-  });
+  const svgsByCategory = getSvgsByCategory(category);
 
-  if (svgsByCategory.length === 0) {
+  if (!svgsByCategory.length) {
     throw error(404, "Category not found");
   }
 
   let filteredSvgs: iSVG[] = [];
+  const latestSorted = [...svgsByCategory].sort((a, b) => b.id! - a.id!);
+  const alphabeticallySorted = [...svgsByCategory].sort((a, b) =>
+    a.title.localeCompare(b.title),
+  );
+  const formatCategory = category.charAt(0).toUpperCase() + category.slice(1);
 
   if (!searchParam) {
-    filteredSvgs = svgsByCategory;
+    filteredSvgs = sortParam ? alphabeticallySorted : latestSorted;
   } else {
     if (searchParam.length < 3) {
-      filteredSvgs = svgsByCategory.filter((svg: iSVG) =>
+      const baseData = sortParam ? alphabeticallySorted : latestSorted;
+      filteredSvgs = baseData.filter((svg: iSVG) =>
         svg.title.toLowerCase().includes(searchParam.toLowerCase()),
       );
     } else {
-      filteredSvgs = searchWithFuse(svgsByCategory)
+      const baseData = sortParam ? alphabeticallySorted : latestSorted;
+      filteredSvgs = searchWithFuse(baseData)
         .search(searchParam)
         .map((result) => result.item);
     }
   }
 
   return {
-    category: category,
+    category: formatCategory,
     searchTerm: searchParam,
-    svgs: svgsByCategory,
-    filteredSvgs: filteredSvgs,
+    sorted: sortParam,
+    initialSvgs: filteredSvgs,
+    latestSorted,
+    alphabeticallySorted,
   };
 }) satisfies PageLoad;