Add visit count functionality to Navbar and Log page

src/lib/components/Navbar.svelte

@@ -5,6 +5,7 @@
   import type { DatabaseUser } from "$lib/server/auth";
   export let user: any;
   import UserAvatar from "./UserAvatar.svelte";
+  import { onMount } from "svelte";
   async function goHome() {
     goto("/");
   }
@@ -22,6 +23,15 @@
   }
 
   let count = 0;
+
+  // get value from fetch /api/visitcount
+
+  onMount(async () => {
+    const res = await fetch("/api/visitcount");
+    const data = await res.json();
+    visitCount.set(data.visitCount);
+  });
+
   visitCount.subscribe((value) => {
     count = value;
   });
@@ -30,10 +40,6 @@
   const isBrowser = typeof window !== "undefined";
   if (isBrowser) {
     const storedAdventures = localStorage.getItem("adventures");
-    if (storedAdventures) {
-      let parsed = JSON.parse(storedAdventures);
-      visitCount.set(parsed.length);
-    }
   }
 </script>
 
@@ -57,12 +63,12 @@
     <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
   </div>
   <div class="navbar-end flex justify-around md:justify-end mr-4">
-    <p>Adventures: {count}</p>
     {#if !user}
       <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
       <button class="btn btn-primary ml-4" on:click={toToSignup}>Signup</button>
     {/if}
     {#if user}
+      <p>Adventures: {count}</p>
       <UserAvatar {user} />
       <form method="post" action="/" use:enhance>
         <button class="btn btn-primary ml-4">Logout</button>

src/lib/utils/stores/visitCountStore.ts

@@ -1,3 +1,5 @@
 import { writable } from "svelte/store";
 
-export const visitCount = writable(0);
+let value = 0;
+export const visitCount = writable(value);
+

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

@@ -0,0 +1,36 @@
+import type { RequestEvent } from "@sveltejs/kit";
+import { count } from 'drizzle-orm';
+import { eq } from "drizzle-orm";
+import { userVisitedAdventures } from "$lib/db/schema";
+import { db } from "$lib/db/db.server";
+
+export async function GET(event: RequestEvent): Promise<Response> {
+    if (!event.locals.user) {
+      return new Response(JSON.stringify({ error: "No user found" }), {
+        status: 401,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
+    // get the count of the number of adventures the user has visited
+    let result = await db
+      .select({ count: count() })
+      .from(userVisitedAdventures)
+      .where(eq(userVisitedAdventures.userId,event.locals.user.id))
+      .execute();
+
+      console.log(result[0].count);
+
+    return new Response(
+      JSON.stringify({
+        visitCount: result[0].count,
+      }),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }

src/routes/log/+page.svelte

@@ -19,6 +19,7 @@
   import mapDrawing from "$lib/assets/adventure_map.svg";
   import EditModal from "$lib/components/EditModal.svelte";
   import { generateRandomString } from "$lib";
+  import { visitCount } from "$lib/utils/stores/visitCountStore";
 
   let newName = "";
   let newLocation = "";
@@ -37,6 +38,11 @@
     adventures = data.result.adventures;
   });
 
+  let count = 0;
+  visitCount.subscribe((value) => {
+    count = value;
+  });
+
   function showToast(action: string) {
     toastAction = action;
     isShowingToast = true;
@@ -80,6 +86,7 @@
         newName = ""; // Reset newName and newLocation after adding adventure
         newLocation = "";
         showToast("added");
+        visitCount.update((n) => n + 1);
       })
       .catch((error) => {
         console.error("Error:", error);
@@ -183,6 +190,7 @@
           (adventure) => adventure.id !== event.detail,
         );
         showToast("removed");
+        visitCount.update((n) => n - 1);
       })
       .catch((error) => {
         console.error("Error:", error);