Add log page, update database schema, and API endpoint for user visits

src/lib/components/Navbar.svelte

@@ -43,10 +43,12 @@
       class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
       on:click={goHome}>Home</button
     >
-    <button
-      class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
-      on:click={goToLog}>My Log</button
-    >
+    {#if user}
+      <button
+        class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
+        on:click={goToLog}>My Log</button
+      >
+    {/if}
     <button class="btn btn-primary my-2 md:my-0" on:click={goToFeatured}
       >Featured</button
     >

src/lib/db/schema.ts

@@ -40,10 +40,11 @@ export const sessionTable = pgTable("session", {
 });
 
 export const userVisitedAdventures = pgTable("userVisitedAdventures", {
+  adventureID: serial("adventure_id").primaryKey(),
   userId: text("user_id")
     .notNull()
     .references(() => userTable.id),
   adventureName: text("adventure_name").notNull(),
   location: text("location"),
-  adventureVistied: text("adventure_visited"),
+  visitedDate: text("visited_date"),
 });

src/routes/api/visits/+server.ts

@@ -3,6 +3,7 @@ import type { RequestEvent } from "@sveltejs/kit";
 import { userVisitedAdventures } from "$lib/db/schema";
 import { db } from "$lib/db/db.server";
 import { eq } from "drizzle-orm";
+import type { Adventure } from "$lib/utils/types";
 
 // Gets all the adventures that the user has visited
 export async function GET(event: RequestEvent): Promise<Response> {
@@ -14,16 +15,19 @@ export async function GET(event: RequestEvent): Promise<Response> {
       },
     });
   }
-
   let result = await db
     .select()
     .from(userVisitedAdventures)
     .where(eq(userVisitedAdventures.userId, event.locals.user.id))
     .execute();
-
   return new Response(
     JSON.stringify({
-      result: result,
+      adventures: result.map((item) => ({
+        id: item.adventureID,
+        name: item.adventureName,
+        location: item.location,
+        created: item.visitedDate,
+      })),
     }),
     {
       status: 200,

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

@@ -0,0 +1,13 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+  const response = await event.fetch("/api/visits");
+  const result = await response.json();
+  return {
+    result,
+  };
+};

src/routes/log/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  let adventures: Adventure[] = [];
+  export let data;
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import type { Adventure } from "$lib/utils/types";
   import {
@@ -27,8 +29,6 @@
   let editLocation: string = "";
   let editCreated: string = "";
 
-  let adventures: Adventure[] = [];
-
   let isShowingToast: boolean = false;
   let toastAction: string = "";
 
@@ -62,6 +62,7 @@
 
   onMount(async () => {
     adventures = getAdventures();
+    console.log(data.result);
   });
 
   function triggerRemoveAdventure(event: { detail: number }) {
@@ -177,7 +178,7 @@
 <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 adventures as adventure (adventure.id)}
+  {#each data.result.adventures as adventure (adventure.id)}
     <AdventureCard
       type="mylog"
       id={adventure.id}