From f7fc46caac3e82cadb10f970291550724dcca1ce Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 10 Apr 2024 18:25:53 +0000
Subject: [PATCH] Add InfoModal component and update Navbar component

---
 config.ts                           |  2 -
 src/lib/components/InfoModal.svelte | 60 +++++++++++++++++++++++++++++
 src/lib/components/Navbar.svelte    | 28 +++++++++++---
 src/lib/config.ts                   |  3 ++
 src/routes/featured/+page.svelte    | 12 ++++--
 5 files changed, 95 insertions(+), 10 deletions(-)
 delete mode 100644 config.ts
 create mode 100644 src/lib/components/InfoModal.svelte
 create mode 100644 src/lib/config.ts

diff --git a/config.ts b/config.ts
deleted file mode 100644
index f66ff54..0000000
--- a/config.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export let appVersion = "0.0.1";
-export let appTitle = "AdventureLog";
\ No newline at end of file
diff --git a/src/lib/components/InfoModal.svelte b/src/lib/components/InfoModal.svelte
new file mode 100644
index 0000000..abcae56
--- /dev/null
+++ b/src/lib/components/InfoModal.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import type { Adventure } from "$lib/utils/types";
+  const dispatch = createEventDispatcher();
+  import { onMount } from "svelte";
+  let modal: HTMLDialogElement;
+  import { appVersion, copyrightYear } from "$lib/config";
+
+  onMount(() => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  });
+
+  function close() {
+    dispatch("close");
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">About AdventureLog</h3>
+    <p class="py-1">
+      AdventureLog {appVersion}
+    </p>
+    <p class="py-1">
+      © {copyrightYear}
+      <a
+        href="https://github.com/seanmorley15"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary-500 underline">Sean Morley</a
+      >
+    </p>
+    <p class="py-1">Liscensed under the GPL-3.0 License.</p>
+    <p class="py-1">
+      <a
+        href="https://github.com/seanmorley15/AdventureLog"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary-500 underline">Source Code</a
+      >
+    </p>
+    <p class="py-1">Made with ❤️ in Connecticut.</p>
+    <div
+      class="modal-action items-center"
+      style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+    ></div>
+    <button class="btn btn-primary" on:click={close}>Close</button>
+  </div>
+</dialog>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index d377bb2..b115052 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -6,6 +6,7 @@
   export let user: any;
   import UserAvatar from "./UserAvatar.svelte";
   import { onMount } from "svelte";
+  import InfoModal from "./InfoModal.svelte";
   async function goHome() {
     goto("/");
   }
@@ -24,13 +25,25 @@
 
   let count = 0;
 
+  let infoModalOpen = false;
+
+  function showModal() {
+    infoModalOpen = true;
+  }
+
+  function closeModal() {
+    infoModalOpen = false;
+  }
+
   // get value from fetch /api/visitcount
 
-  onMount(async () => {
-    const res = await fetch("/api/visitcount");
-    const data = await res.json();
-    visitCount.set(data.visitCount);
-  });
+  $: if (user) {
+    onMount(async () => {
+      const res = await fetch("/api/visitcount");
+      const data = await res.json();
+      visitCount.set(data.visitCount);
+    });
+  }
 
   visitCount.subscribe((value) => {
     count = value;
@@ -62,7 +75,12 @@
   <div class="navbar-center flex justify-center md:justify-center">
     <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
   </div>
+
+  {#if infoModalOpen}
+    <InfoModal on:close={closeModal} />
+  {/if}
   <div class="navbar-end flex justify-around md:justify-end mr-4">
+    <button class="btn btn-primary" on:click={showModal}>Info</button>
     {#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>
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 0000000..15e14b9
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,3 @@
+export let appVersion = "Web 0.0.1";
+export let appTitle = "AdventureLog";
+export let copyrightYear = "2024"
\ No newline at end of file
diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte
index 947840c..f16c409 100644
--- a/src/routes/featured/+page.svelte
+++ b/src/routes/featured/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   export let data;
   console.log(data.result);
+  import { goto } from "$app/navigation";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import { visitCount } from "$lib/utils/stores/visitCountStore.js";
   import type { Adventure } from "$lib/utils/types.js";
@@ -10,8 +11,8 @@
     count = value;
   });
 
-  function add(event: CustomEvent<{ name: string; location: string }>) {
-    fetch("/api/visits", {
+  async function add(event: CustomEvent<{ name: string; location: string }>) {
+    const response = await fetch("/api/visits", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -22,7 +23,12 @@
         created: "",
       }),
     });
-    visitCount.update((n) => n + 1);
+
+    if (response.status === 401) {
+      goto("/login");
+    } else {
+      visitCount.update((n) => n + 1);
+    }
   }
 </script>