fixing display

2023-11-01 16:54:16 -04:00 · 2023-11-01 16:54:16 -04:00 · ca8d8bc4e8
commit ca8d8bc4e8
parent 8e7e04e122
6 changed files with 146 additions and 44 deletions
--- a/app/(app)/calendar/[naddr]/_components/Header.tsx
+++ b/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}
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/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
--- a/components/Modals/EditEvent.tsx
+++ b/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}
--- a/components/Modals/FormModal.tsx
+++ b/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} />
--- a/containers/EventsTimeline/EventsFromCalendar.tsx
+++ b/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[]) {
-    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);
-  }
+  // useEffect(() => {
+  //   if (
+  //     !ndk ||
+  //     calendarEventIdentifiers.length === 0 ||
+  //     isFetching ||
+  //     events.length
+  //   )
+  //     return;
+  //   handleFetchEvents(calendarEventIdentifiers);
+  // }, [ndk, calendarEventIdentifiers]);

  useEffect(() => {
-    if (
-      !ndk ||
-      calendarEventIdentifiers.length === 0 ||
-      isFetching ||
-      events.length
-    )
-      return;
-    handleFetchEvents(calendarEventIdentifiers);
-  }, [ndk, calendarEventIdentifiers]);
-
-  const eventsByDay = groupEventsByDay(events);
-
+    if (events) {
+      const grouped = groupEventsByDay(events);
+      console.log("Runnign group", events, " to", grouped);
+      setEventsByDay(grouped);
+    }
+  }, [events]);
+  console.log(eventsByDay);
  if (isFetching) {
    if (Loader) {
      return <Loader />;
--- a/containers/EventsTimeline/index.tsx
+++ b/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 (eventDays[`${daysAway}`]) {
+    if (daysAway < 1) {
+      if (eventDays[`0`]) {
+        eventDays[`0`]!.push(event);
+      } else {
+        eventDays[`0`] = [event];
+      }
+    } else if (eventDays[`${daysAway}`]) {
      eventDays[`${daysAway}`]!.push(event);
    } else {
      eventDays[`${daysAway}`] = [event];