fixing display

app/(app)/calendar/[naddr]/_components/Header.tsx

@@ -141,7 +141,7 @@ export default function Header({ event }: { event: NDKEvent }) {
           </div>
         </div>
         <div className="flex flex-col gap-x-6 gap-y-3 pt-1 @md:pt-2 @xl:flex-row">
-          <div className="flex-1">
+          <div className="flex-2">
             {!!description && (
               <p className="text-sm text-muted-foreground @md:text-sm">
                 {description}

components/Modals/CreateCalendarEvent.tsx

@@ -5,18 +5,20 @@ import Image from "next/image";
 import { HiX } from "react-icons/hi";
 import { HiOutlineCalendarDays } from "react-icons/hi2";
 import { toast } from "sonner";
-import { cn } from "@/lib/utils";
+import { cn, satsToBtc } from "@/lib/utils";
 import { randomId } from "@/lib/nostr";
 import { unixTimeNowInSeconds } from "@/lib/nostr/dates";
 import { addMinutesToDate, toUnix, convertToTimezone } from "@/lib/utils/dates";
 
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { DatePicker } from "@/components/ui/date-picker";
 import { TimePicker } from "@/components/ui/time-picker";
 import { TimezoneSelector } from "@/components/ui/timezone";
 import { Label } from "@/components/ui/label";
 import Picker from "@/components/FormComponents/Picker";
+import { Switch } from "@/components/ui/switch";
 
 import SmallCalendarIcon from "@/components/EventIcons/DateIcon";
 import LocationIcon from "@/components/EventIcons/LocationIcon";
@@ -32,7 +34,6 @@ import useCurrentUser from "@/lib/hooks/useCurrentUser";
 import useImageUpload from "@/lib/hooks/useImageUpload";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { getTagValues } from "@/lib/nostr/utils";
-
 export default function CreateCalendarEventModal() {
   const modal = useModal();
   const now = new Date(new Date().setHours(12, 0, 0, 0));
@@ -47,6 +48,8 @@ export default function CreateCalendarEventModal() {
   const [error, setError] = useState<Record<string, string | undefined>>({});
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  const [tickets, setTickets] = useState(false);
+  const [price, setPrice] = useState<number>(1000);
   const [startDate, setStartDate] = useState<Date>(now);
   const startTime = `${
     startDate?.getHours().toLocaleString().length === 1
@@ -137,6 +140,12 @@ export default function CreateCalendarEventModal() {
       if (imageUrl) {
         tags.push(["image", imageUrl]);
       }
+      if (tickets) {
+        tags.push(["tickets", "true"]);
+        if (price) {
+          tags.push(["price", satsToBtc(price).toString(), "btc"]);
+        }
+      }
       const preEvent = {
         content: description,
         pubkey: currentUser.pubkey,
@@ -148,7 +157,6 @@ export default function CreateCalendarEventModal() {
       if (event) {
         const encodedEvent = event.encode();
         if (calendar) {
-          console.log("calendar", calendar);
           const selectedCalendar = Array.from(calendars)
             .find((option) => option.encode() === calendar)
             ?.rawEvent();
@@ -196,6 +204,7 @@ export default function CreateCalendarEventModal() {
         <HiX className="h-4 w-4" />
       </button>
       <div className="">
+        {/* Event Name */}
         <Textarea
           ref={titleRef}
           value={title}
@@ -203,13 +212,14 @@ export default function CreateCalendarEventModal() {
           autoFocus={true}
           placeholder="Event Name"
           className={cn(
-            "invisible-input !text-3xl font-bold text-foreground outline-none placeholder:text-muted-foreground/50 placeholder:hover:text-muted-foreground/80",
+            "invisible-input max-h-none !text-3xl font-bold text-foreground outline-none placeholder:text-muted-foreground/50 placeholder:hover:text-muted-foreground/80",
             title === "" && "max-h-[60px]",
             error["title"] &&
               "border-b border-red-600 placeholder:text-red-600/50",
           )}
         />
         <div className="space-y-4">
+          {/* General Details */}
           <div className="flex w-full items-start gap-x-3">
             <div className="shrink-0">
               <SmallCalendarIcon date={startDate ?? new Date()} />
@@ -295,7 +305,6 @@ export default function CreateCalendarEventModal() {
                   </div>
                 </div>
               </div>
-
               <div className="flex justify-between overflow-hidden p-0.5 px-1 pl-3">
                 <div className="flex-1 text-xs text-muted-foreground">
                   <div className="flex max-w-full justify-start bg-secondary">
@@ -383,6 +392,8 @@ export default function CreateCalendarEventModal() {
               )}
             </div>
           </div>
+
+          {/* Loction Details */}
           <div className="flex w-full items-start gap-x-3">
             <div className="shrink-0">
               <LocationIcon />
@@ -400,6 +411,39 @@ export default function CreateCalendarEventModal() {
               </div>
             </div>
           </div>
+
+          {/* Ticketing Details */}
+          <div className="w-full">
+            {/* <div className="shrink-0">
+              <LocationIcon />
+            </div> */}
+            <Label className="text-muted-foreground">Ticketing details</Label>
+            <div className="flex-1 divide-y overflow-hidden rounded-md bg-muted sm:max-w-[350px]">
+              <div className="flex w-full items-center justify-between px-3 py-2.5">
+                <Label className="text-muted-foreground">Require Tickets</Label>
+                <Switch
+                  checked={tickets}
+                  onCheckedChange={(checked) => setTickets(checked)}
+                />
+              </div>
+              {tickets && (
+                <div className="flex h-[40px] w-full items-center justify-between px-3 py-2.5">
+                  <Label className="text-muted-foreground">Price</Label>
+                  <Input
+                    value={price}
+                    type="number"
+                    onChange={(e) => setPrice(parseInt(e.target.value))}
+                    className={cn(
+                      "invisible-input ml-auto py-0 text-right placeholder:text-muted-foreground/40",
+                    )}
+                    placeholder="10,000"
+                  />
+                  <pre className="ml-1 text-xs text-muted-foreground">sats</pre>
+                </div>
+              )}
+            </div>
+          </div>
+
           <div className="w-full">
             <Label className="text-muted-foreground">Event details</Label>
             <Textarea

components/Modals/EditEvent.tsx

@@ -9,11 +9,14 @@ import { toast } from "sonner";
 import { useNDK } from "@/app/_providers/ndk";
 import { NostrEvent } from "@nostr-dev-kit/ndk";
 import { getTagValues } from "@/lib/nostr/utils";
+import { addMinutesToDate, fromUnix, toUnix } from "@/lib/utils/dates";
 
 const EditListSchema = z.object({
   name: z.string(),
   about: z.string().optional(),
   image: z.string().optional(),
+  start: z.string().optional(),
+  end: z.string().optional(),
 });
 
 type EditListType = z.infer<typeof EditListSchema>;
@@ -46,7 +49,15 @@ export default function EditListModal({ listEvent }: EditListModalProps) {
 
   async function handleSubmit(listData: EditListType) {
     setIsLoading(true);
-    const newTags = Object.entries(listData);
+    const dateKeys = ["start", "end"];
+    const newTags = Object.entries(listData).map(([key, val]) => {
+      if (dateKeys.includes(key)) {
+        const unix = toUnix(new Date(val));
+        return [key, unix.toString()];
+      } else {
+        return [key, val];
+      }
+    }) as [string, string][];
     setSent(true);
     const result = await updateList(
       ndk!,
@@ -62,6 +73,16 @@ export default function EditListModal({ listEvent }: EditListModalProps) {
       getTagValues("image", listEvent.tags) ??
       getTagValues("picture", listEvent.tags),
     about: listEvent.content,
+    start: getTagValues("start", listEvent.tags)
+      ? fromUnix(
+          parseInt(getTagValues("start", listEvent.tags) as string),
+        ).toISOString()
+      : new Date().toISOString(),
+    end: getTagValues("end", listEvent.tags)
+      ? fromUnix(
+          parseInt(getTagValues("end", listEvent.tags) as string),
+        ).toISOString()
+      : addMinutesToDate(new Date(), 60).toISOString(),
   };
 
   return (
@@ -83,6 +104,16 @@ export default function EditListModal({ listEvent }: EditListModalProps) {
           type: "upload",
           slug: "image",
         },
+        {
+          label: "Start",
+          type: "date-time",
+          slug: "start",
+        },
+        {
+          label: "End",
+          type: "date-time",
+          slug: "end",
+        },
       ]}
       defaultValues={defaultValues ?? {}}
       formSchema={EditListSchema}

components/Modals/FormModal.tsx

@@ -58,6 +58,7 @@ type FieldOptions =
   | "number"
   | "text-area"
   | "upload"
+  | "date-time"
   | "custom";
 
 type DefaultFieldType<TSchema> = {
@@ -304,6 +305,14 @@ export default function FormModal<TSchema extends FieldValues>({
                             }}
                           />
                         </FormControl>
+                      ) : type === "date-time" ? (
+                        <FormControl>
+                          <Input
+                            placeholder={placeholder}
+                            {...field}
+                            type="datetime-local"
+                          />
+                        </FormControl>
                       ) : (
                         <FormControl>
                           <Input placeholder={placeholder} {...field} />

containers/EventsTimeline/EventsFromCalendar.tsx

@@ -6,7 +6,7 @@ import { groupEventsByDay } from ".";
 import { useNDK } from "@/app/_providers/ndk";
 import { nip19 } from "nostr-tools";
 import CalendarSection, { CalendarSectionLoading } from "./CalendarSection";
-
+import useEvents from "@/lib/hooks/useEvents";
 type EventsFromCalendar = {
   calendar: NDKEvent;
   loader?: () => JSX.Element;
@@ -20,7 +20,7 @@ export default function EventsFromCalendar({
 }: EventsFromCalendar) {
   const calendarEvents = getTagsValues("a", calendar.tags);
   const { ndk } = useNDK();
-  const [events, setEvents] = useState<NDKEvent[]>([]);
+  const [eventsByDay, setEventsByDay] = useState<NDKEvent[][]>([]);
   const [isFetching, setIsFetching] = useState(false);
 
   const calendarEventIdentifiers = calendarEvents
@@ -28,42 +28,54 @@ export default function EventsFromCalendar({
     .map((e) => nip19.decode(e))
     .filter(({ type }) => type === "naddr")
     .map((e) => e.data as nip19.AddressPointer);
+  const { events } = useEvents({
+    filter: {
+      kinds: calendarEventIdentifiers.map((k) => k.kind),
+      authors: calendarEventIdentifiers.map((k) => k.pubkey),
+      ["#d"]: calendarEventIdentifiers.map((k) => k.identifier),
+    },
+  });
+  // async function handleFetchEvents(data: nip19.AddressPointer[]) {
+  //   if (!ndk) return;
+  //   setIsFetching(true);
+  //   const events: NDKEvent[] = [];
+  //   const promiseArray = [];
+  //   for (const info of data) {
+  //     console.log("INFO", info);
+  //     const calendarEventPromise = ndk
+  //       .fetchEvent({
+  //         authors: [info.pubkey],
+  //         ["#d"]: [info.identifier],
+  //         kinds: [info.kind],
+  //       })
+  //       .then((e) => e && events.push(e))
+  //       .catch((err) => console.log("err"));
+  //     promiseArray.push(calendarEventPromise);
+  //   }
+  //   await Promise.all(promiseArray);
+  //   setEvents(events);
+  //   setIsFetching(false);
+  // }
 
-  async function handleFetchEvents(data: nip19.AddressPointer[]) {
+  // useEffect(() => {
-    if (!ndk) return;
+  //   if (
-    setIsFetching(true);
+  //     !ndk ||
-    const events: NDKEvent[] = [];
+  //     calendarEventIdentifiers.length === 0 ||
-    const promiseArray = [];
+  //     isFetching ||
-    for (const info of data) {
+  //     events.length
-      console.log("INFO", info);
+  //   )
-      const calendarEventPromise = ndk
+  //     return;
-        .fetchEvent({
+  //   handleFetchEvents(calendarEventIdentifiers);
-          authors: [info.pubkey],
+  // }, [ndk, calendarEventIdentifiers]);
-          ["#d"]: [info.identifier],
-          kinds: [info.kind],
-        })
-        .then((e) => e && events.push(e))
-        .catch((err) => console.log("err"));
-      promiseArray.push(calendarEventPromise);
-    }
-    await Promise.all(promiseArray);
-    setEvents(events);
-    setIsFetching(false);
-  }
 
   useEffect(() => {
-    if (
+    if (events) {
-      !ndk ||
+      const grouped = groupEventsByDay(events);
-      calendarEventIdentifiers.length === 0 ||
+      console.log("Runnign group", events, " to", grouped);
-      isFetching ||
+      setEventsByDay(grouped);
-      events.length
+    }
-    )
+  }, [events]);
-      return;
+  console.log(eventsByDay);
-    handleFetchEvents(calendarEventIdentifiers);
-  }, [ndk, calendarEventIdentifiers]);
-
-  const eventsByDay = groupEventsByDay(events);
-
   if (isFetching) {
     if (Loader) {
       return <Loader />;

containers/EventsTimeline/index.tsx

@@ -46,11 +46,17 @@ export function groupEventsByDay(events: NDKEvent[]) {
   const eventDays: Record<string, NDKEvent[]> = {};
   for (const event of events) {
     const eventStartTime = getTagValues("start", event.tags);
+    console.log("start", eventStartTime);
     if (!eventStartTime) continue;
     const startDate = fromUnix(parseInt(eventStartTime));
     const daysAway = daysOffset(startDate);
-    if (daysAway < 1) continue;
+    if (daysAway < 1) {
-    if (eventDays[`${daysAway}`]) {
+      if (eventDays[`0`]) {
+        eventDays[`0`]!.push(event);
+      } else {
+        eventDays[`0`] = [event];
+      }
+    } else if (eventDays[`${daysAway}`]) {
       eventDays[`${daysAway}`]!.push(event);
     } else {
       eventDays[`${daysAway}`] = [event];