Search changes

src/routes/search/+page.server.ts

@@ -1,17 +1,20 @@
 // +page.server.js
-import { error, redirect } from "@sveltejs/kit";
+import { redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { db } from "$lib/db/db.server";
 import { adventureTable } from "$lib/db/schema";
-import { and, eq, arrayContains, inArray } from "drizzle-orm";
+import { and, eq, arrayContains } from "drizzle-orm";
 
+/**
+ * Loads the page data based on the provided URL and locals.
+ *
+ * @param {PageServerLoadParams} params - The parameters for loading the page.
+ * @returns {Promise<PageServerLoadResult>} The result of loading the page.
+ */
 export const load: PageServerLoad = async ({ url, locals }) => {
   if (!locals.user) {
     return redirect(301, "/login");
   }
-
-  // db.select().from(posts)
-  // .where(arrayContains(posts.tags, ['Typescript', 'ORM']))
   let param: string = "";
   let value: string = "";
   if (Array.from(url.searchParams.entries()).length > 0) {
@@ -19,14 +22,26 @@ export const load: PageServerLoad = async ({ url, locals }) => {
     param = params[0][0];
     value = params[0][1];
   }
+  // Activity type search
   if (param === "activity") {
     let arr: string[] = [];
     arr.push(value);
     let res = await db
       .select()
       .from(adventureTable)
-      .where(arrayContains(adventureTable.activityTypes, arr))
+      .where(
+        and(
+          arrayContains(adventureTable.activityTypes, arr),
+          eq(adventureTable.userId, locals.user.id)
+        )
+      )
       .execute();
     console.log(res);
+
+    return {
+      props: {
+        adventures: res,
+      },
+    };
   }
 };

src/routes/search/+page.svelte

@@ -1,5 +1,24 @@
 <script lang="ts">
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import type { Adventure } from "$lib/utils/types";
   import type { PageData } from "./$types";
 
   export let data: PageData;
+  let adventureArray: Adventure[] = data.props?.adventures as Adventure[];
+  console.log(adventureArray);
 </script>
+
+<main>
+  <h1 class="text-center font-bold text-4xl">Search Results</h1>
+  {#if adventureArray.length > 0}
+    <div
+      class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+    >
+      {#each adventureArray as adventure}
+        <AdventureCard {adventure} type="mylog" />
+      {/each}
+    </div>
+  {:else}
+    <p>No results found</p>
+  {/if}
+</main>