From 6a2a6bf0289f459cf2e04ee6d15377150640a7d3 Mon Sep 17 00:00:00 2001
From: Eric Kim <bosung90@gmail.com>
Date: Thu, 12 Oct 2023 22:54:16 -0700
Subject: [PATCH] fix bug

---
 package.json                     |  3 ++-
 src/lib/components/Drawer.svelte |  8 ++++++--
 src/lib/store/index.ts           | 21 ++++++++++++---------
 yarn.lock                        |  2 +-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 24ed190..3e6bab5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "firebase-admin": "^11.11.0",
     "flowbite-svelte": "^0.44.17",
     "luxon": "^3.4.1",
-    "svelte-french-toast": "^1.2.0"
+    "svelte-french-toast": "^1.2.0",
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
     "@smui/data-table": "^7.0.0-beta.15",
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index 89abc29..f4b48d1 100644
--- a/src/lib/components/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -3,7 +3,8 @@
   import List, {Item, Text} from '@smui/list'
   import {goto} from '$app/navigation'
   import {AdminTable} from './index'
-
+  import {selectedEventId} from '$lib/store'
+  import {twMerge} from 'tailwind-merge'
   export let events: DB.Event[]
   export let ticketValue: Map<string, DB.Ticket>
 </script>
@@ -16,7 +17,10 @@
           <button on:click={() => goto(`/admin/dashboard?eventId=${event.id}`)}>
             <Item
               id="event-title"
-              class="flex p-2 cursor-pointer bg-gray-100 hover:bg-gray-300 ease-in-out duration-200 rounded hover:font-semibold">
+              class={twMerge(
+                'flex p-2 cursor-pointer bg-gray-100 hover:bg-gray-300 ease-in-out duration-200 rounded hover:font-semibold',
+                event.id === $selectedEventId && 'bg-purple-300'
+              )}>
               <Text class="text-start">{event.title}</Text>
             </Item>
           </button>
diff --git a/src/lib/store/index.ts b/src/lib/store/index.ts
index c4dc58c..333dd7a 100644
--- a/src/lib/store/index.ts
+++ b/src/lib/store/index.ts
@@ -31,11 +31,12 @@ function handleQuerySnapshot<T extends DocumentData>(
 
 function deriveStoreFromQuery<V, T extends DocumentData>(
   stores: Parameters<typeof derived>[0],
-  getQuery: (value: V) => Query
+  getQuery: (value: V) => Query | null
 ) {
-  return derived(stores, ($stores, set) =>
-    handleQuerySnapshot<T>(getQuery($stores), set)
-  ) as Readable<Map<string, T>>
+  return derived(stores, ($stores, set) => {
+    const q = getQuery($stores)
+    q ? handleQuerySnapshot<T>(q, set) : q
+  }) as Readable<Map<string, T>>
 }
 
 function handleDocSnapshot<T extends DocumentData>(
@@ -61,11 +62,13 @@ export const selectedEventId = writable<string>()
 export const ticketValue = deriveStoreFromQuery<string, DB.Ticket>(
   selectedEventId,
   ($selectedEventId) =>
-    query(
-      collection(db, 'Tickets'),
-      where('eventId', '==', $selectedEventId),
-      orderBy('createdAt', 'desc')
-    )
+    $selectedEventId
+      ? query(
+          collection(db, 'Tickets'),
+          where('eventId', '==', $selectedEventId),
+          orderBy('createdAt', 'desc')
+        )
+      : null
 )
 export const selectedTicket = {
   // State
diff --git a/yarn.lock b/yarn.lock
index 0c681bb..aafa51c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4142,7 +4142,7 @@ svg.select.js@^3.0.1:
 
 tailwind-merge@^1.14.0:
   version "1.14.0"
-  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
 tailwindcss@^3.3.3: