fixes + tickets empty state

Wave-Studio · Dec 14, 2023 · d93db2a · d93db2a
1 parent 04d3c30
commit d93db2a
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 18 deletions.
diff --git a/components/layout/eventEditNavbar.tsx b/components/layout/eventEditNavbar.tsx
@@ -53,7 +53,7 @@ export default function EventHeader({
   }
 
   return (
-    <div className="flex justfy-between">
+    <div className="flex justfy-between mt-2">
       <a href="/events/organizing">
         <CTA
           btnType="cta"

diff --git a/components/svgs/not-found.tsx b/components/svgs/not-found.tsx
diff --git a/islands/components/peices/navDropDown.tsx b/islands/components/peices/navDropDown.tsx
@@ -3,11 +3,15 @@ import Selector from "$tabler/selector.tsx";
 import Dropdown from "@/islands/components/pickers/dropdown.tsx";
 import CirclePlus from "$tabler/circle-plus.tsx";
 import Settings from "$tabler/settings.tsx";
-import UserCircle from "$tabler/user-circle.tsx"
+import UserCircle from "$tabler/user-circle.tsx";
+import { useSignal } from "@preact/signals";
 
 const NavbarDropDown = ({ user }: { user: UserPartial }) => {
+  const open = useSignal(false);
+
   return (
     <Dropdown
+      isOpen={open}
       className="ml-auto mr-1 md:mr-2 z-30 focus:outline-none my-auto"
       options={[
         {
@@ -18,7 +22,7 @@ const NavbarDropDown = ({ user }: { user: UserPartial }) => {
           ),
           onClick: () => alert("Teams is coming soon!"),
         },
-				{
+        {
           content: (
             <div class="flex items-center">
               <Settings class="w-5 h-5 mr-2" /> <p>Settings</p>
@@ -28,10 +32,12 @@ const NavbarDropDown = ({ user }: { user: UserPartial }) => {
         },
       ]}
     >
-      <button class="flex p-1 md:px-3 md:py-1.5 items-center hover:bg-gray-200 transition md:rounded-md rounded-full">
-        <p class="font-medium hidden md:block">{user.email.split("@")[0]}</p>
-        <Selector class="w-5 h-5 ml-2 hidden md:block" />
-				<UserCircle class="w-6 h-6 block md:hidden" />
+      <button class={`${open.value ? "bg-gray-200" : "hover:bg-gray-200"} flex p-1 md:px-3 md:py-1.5 items-center transition md:rounded-md rounded-full`}>
+        <p class="font-medium hidden md:block max-w-sm truncate">
+          {user.email.split("@")[0]}
+        </p>
+        <Selector class="w-5 h-5 ml-1 hidden md:block text-gray-600" />
+        <UserCircle class="w-6 h-6 block md:hidden" />
       </button>
     </Dropdown>
   );

diff --git a/islands/components/pickers/dropdown.tsx b/islands/components/pickers/dropdown.tsx
@@ -1,21 +1,25 @@
 import { ComponentChild } from "preact";
 import useClickAway from "@/components/hooks/onClickAway.tsx";
 import { useRef } from "preact/hooks";
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 
 export default function Dropdown({
   options,
   children,
-  className
+  className,
+  isOpen
 }: {
   options: {
     content: ComponentChild;
     onClick?: () => void;
   }[];
   children: ComponentChild;
-  className?: string
+  className?: string,
+  isOpen?: Signal<boolean>
 }) {
-  const open = useSignal(false);
+
+  const open = isOpen || useSignal(false);
+
   const dropdown = useRef<HTMLDivElement>(null);
   useClickAway([dropdown], () => {
     open.value = false;

diff --git a/islands/events/viewing/register.tsx b/islands/events/viewing/register.tsx
@@ -309,8 +309,7 @@ export default function EventRegister({
                 </h3>
                 <p class="text-center max-w-lg text-sm">
                   Your ticket has been emailed to you. You'll get another
-                  reminder email with your ticket on the day of the event. It's
-                  also below for brevity.
+                  reminder email with your ticket on the day of the event.
                 </p>
               </div>
               <Ticket

diff --git a/routes/events/[id]/tickets.tsx b/routes/events/[id]/tickets.tsx
@@ -11,6 +11,7 @@ import { signal } from "@preact/signals";
 import ShowtimeSelector from "@/islands/events/editing/showtimeSelector.tsx";
 import { kv, Ticket } from "@/utils/db/kv.ts";
 import { fmtDate } from "@/utils/dates.ts";
+import { NotFound } from "@/components/svgs/not-found.tsx";
 
 export default defineRoute(
   async (req, ctx: RouteContext<void, EventContext>) => {
@@ -35,23 +36,38 @@ export default defineRoute(
     const request = ["ticket", eventID];
     if (showTimeID !== "0") request.push(showTimeID);
 
-    const tix = kv.list<Ticket>({ prefix: request, });
+    const tix = kv.list<Ticket>({ prefix: request });
     const tickets: Deno.KvEntry<Ticket>[] = [];
     for await (const ticket of tix) {
       tickets.push(ticket);
     }
 
     return (
-      <main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-2 grow mb-10">
+      <main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-2 grow mb-10 ">
         <EventHeader editPositon={1} role={user.role} />
 
         <ShowtimeSelector
           defaultShowTime={showTimeID}
           showTimes={event.showTimes}
         />
         <TicketsFilters query={query} sort={sort} />
-        <div>
-          <h2 class="font-medium text-sm mb-0.5 mt-8">Tickets</h2>
+
+        <h2 class="font-medium text-sm mb-0.5 mt-8">Tickets</h2>
+        {tickets.length === 0 ? (
+          <>
+            <div class="flex flex-col items-center justify-center grow py-2 text-center">
+              <div class="hidden md:block absolute -z-10">
+                <NotFound />
+              </div>
+              <h2 class="font-semibold">
+                No one has signed up for this event yet
+              </h2>
+              <p class="mt-1 text-sm text-gray-700">
+                Share your event page to encorage others to sign up
+              </p>
+            </div>
+          </>
+        ) : (
           <div class="grid md:grid-cols-2 gap-4">
             {tickets.map((ticket) => {
               const { value, key } = ticket;
@@ -101,7 +117,7 @@ export default defineRoute(
               );
             })}
           </div>
-        </div>
+        )}
       </main>
     );
   },