auto select calendar and some other simple stuff

2023-11-02 09:48:06 -04:00 · 2023-11-02 09:48:06 -04:00 · e3156d7e21
commit e3156d7e21
parent 80be2c0197
6 changed files with 97 additions and 111 deletions
--- a/app/(app)/calendar/[naddr]/_components/CreateEventButton.tsx
+++ b/app/(app)/calendar/[naddr]/_components/CreateEventButton.tsx
@ -3,16 +3,20 @@ import { useModal } from "@/app/_providers/modal/provider";
 import CreateCalendarEventModal from "@/components/Modals/CreateCalendarEvent";

 type CreateEventButtonProps = {
-  eventReference: string;
+  eventIdentifier: string;
 };

 export default function CreateEventButton({
-  eventReference,
+  eventIdentifier,
 }: CreateEventButtonProps) {
  const modal = useModal();

  return (
-    <Button onClick={() => modal?.show(<CreateCalendarEventModal />)}>
+    <Button
+      onClick={() =>
+        modal?.show(<CreateCalendarEventModal calendar={eventIdentifier} />)
+      }
+    >
      Create Event
    </Button>
  );
--- a/app/(app)/calendar/[naddr]/_components/Header.tsx
+++ b/app/(app)/calendar/[naddr]/_components/Header.tsx
@ -19,9 +19,9 @@ import {
  checkPayment,
  updateListUsersFromZaps,
 } from "@/lib/actions/zap";
-import { useModal } from "@/app/_providers/modal/provider";
 import { type NDKEvent } from "@nostr-dev-kit/ndk";
 import { btcToSats, formatNumber } from "@/lib/utils";
+import { nip19 } from "nostr-tools";

 const CreateEventButton = dynamic(() => import("./CreateEventButton"), {
  ssr: false,
@ -32,13 +32,12 @@ const EditCalendarButton = dynamic(() => import("./EditCalendarButton"), {

 export default function Header({ event }: { event: NDKEvent }) {
  const { currentUser } = useCurrentUser();
-  const modal = useModal();
  const { ndk } = useNDK();
  const [checkingPayment, setCheckingPayment] = useState(false);
  const [hasValidPayment, setHasValidPayment] = useState(false);
  const { pubkey, tags } = event;
  const { profile } = useProfile(pubkey);
-  const eventReference = event.encode();
+  const identifier = event.tagId();
  const name = getTagValues("name", tags) ?? "Untitled";
  const image =
    getTagValues("banner", tags) ??
@ -134,7 +133,7 @@ export default function Header({ event }: { event: NDKEvent }) {
          <div className="flex flex-wrap items-center justify-end gap-3">
            {!!currentUser && currentUser.pubkey === pubkey && (
              <>
-                <CreateEventButton eventReference={eventReference} />
+                <CreateEventButton eventIdentifier={identifier} />
                <EditCalendarButton event={event.rawEvent()} />
              </>
            )}
--- a/app/(app)/explore/_components/CalendarCard.tsx
+++ b/app/(app)/explore/_components/CalendarCard.tsx
@ -13,15 +13,17 @@ import {
 import { cn, getLettersPlain, getTwoLetters } from "@/lib/utils";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { BANNER } from "@/constants/app";
-import { getNameToShow } from "@/lib/utils";
 import { nip19 } from "nostr-tools";
 import useProfile from "@/lib/hooks/useProfile";
 import useEvents from "@/lib/hooks/useEvents";
-import { getTagsValues, getTagValues } from "@/lib/nostr/utils";
-import { useNDK } from "@/app/_providers/ndk";
+import {
+  getTagsValues,
+  getTagValues,
+  sortEventsByTagNumber,
+} from "@/lib/nostr/utils";
 import { Skeleton } from "@/components/ui/skeleton";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { unixTimeNowInSeconds } from "@/lib/nostr/dates";

 type CalendarCardProps = {
  calendar: NDKEvent;
@ -29,12 +31,9 @@ type CalendarCardProps = {

 export default function CalendarCard({ calendar }: CalendarCardProps) {
  const { pubkey, tags, content } = calendar;
-  const { ndk } = useNDK();
-  const npub = nip19.npubEncode(pubkey);
  const { profile } = useProfile(pubkey);
  const encodedEvent = calendar.encode();
  const [upcomingEvents, setUpcomingEvents] = useState<NDKEvent[]>([]);
-  const [isFetching, setIsFetching] = useState(false);
  const name = getTagValues("name", tags);
  const image = getTagValues("image", tags);
  const banner =
@ -46,38 +45,25 @@ export default function CalendarCard({ calendar }: CalendarCardProps) {
    .map((e) => nip19.decode(e))
    .filter(({ type }) => type === "naddr")
    .map((e) => e.data as nip19.AddressPointer);
-
-  async function handleFetchEvents(data: nip19.AddressPointer[]) {
-    if (!ndk) return;
-    setIsFetching(true);
-    const events: NDKEvent[] = [];
-    const promiseArray = [];
-    for (const info of data) {
-      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);
-    setUpcomingEvents(events);
-    setIsFetching(false);
-  }
+  const { events } = useEvents({
+    filter: {
+      kinds: calendarEventIdentifiers.map((k) => k.kind),
+      authors: calendarEventIdentifiers.map((k) => k.pubkey),
+      ["#d"]: calendarEventIdentifiers.map((k) => k.identifier),
+    },
+  });

  useEffect(() => {
-    if (
-      !ndk ||
-      calendarEventIdentifiers.length === 0 ||
-      isFetching ||
-      upcomingEvents.length
-    )
-      return;
-    handleFetchEvents(calendarEventIdentifiers);
-  }, [ndk, calendarEventIdentifiers]);
+    if (events) {
+      const filteredEvents = events.filter(
+        (e) =>
+          parseInt(getTagValues("start", e.tags) ?? "0") >
+          unixTimeNowInSeconds(),
+      );
+      const sortedEvents = sortEventsByTagNumber(filteredEvents, "start");
+      setUpcomingEvents(sortedEvents);
+    }
+  }, [events]);

  return (
    <Card className="relative h-[350px] w-[250px] min-w-[250] overflow-hidden">
@ -119,34 +105,40 @@ export default function CalendarCard({ calendar }: CalendarCardProps) {
              <CardTitle>Upcoming Events:</CardTitle>
            </CardHeader>
            <CardContent className="overflow-hidden px-0">
-              <ul className="w-full">
-                {upcomingEvents.map((item) => {
-                  const { tags, content } = item;
-                  const encodedEvent = item.encode();
-                  const name = getTagValues("name", tags);
-                  const description = content;
-                  return (
-                    <li key={item.id} className="w-full overflow-hidden">
-                      <Link
-                        href={`/event/${encodedEvent}`}
-                        className="flex max-w-full items-center justify-between overflow-hidden py-1.5 pl-4 pr-2 transition-colors hover:bg-muted hover:text-primary"
-                      >
-                        <div className="shrink overflow-x-hidden">
-                          <h4 className="line-clamp-1 text-sm font-semibold text-card-foreground">
-                            {name}
-                          </h4>
-                          <p className="line-clamp-2 text-[10px] leading-4 text-muted-foreground">
-                            {description ?? ""}
-                          </p>
-                        </div>
-                        <div className="center ml-auto shrink-0 pl-2">
-                          <RiArrowRightLine className="h-5 w-5" />
-                        </div>
-                      </Link>
-                    </li>
-                  );
-                })}
-              </ul>
+              {upcomingEvents.length ? (
+                <ul className="w-full">
+                  {upcomingEvents.map((item) => {
+                    const { tags, content } = item;
+                    const encodedEvent = item.encode();
+                    const name = getTagValues("name", tags);
+                    const description = content;
+                    return (
+                      <li key={item.id} className="w-full overflow-hidden">
+                        <Link
+                          href={`/event/${encodedEvent}`}
+                          className="flex max-w-full items-center justify-between overflow-hidden py-1.5 pl-4 pr-2 transition-colors hover:bg-muted hover:text-primary"
+                        >
+                          <div className="shrink overflow-x-hidden">
+                            <h4 className="line-clamp-1 text-sm font-semibold text-card-foreground">
+                              {name}
+                            </h4>
+                            <p className="line-clamp-2 text-[10px] leading-4 text-muted-foreground">
+                              {description ?? ""}
+                            </p>
+                          </div>
+                          <div className="center ml-auto shrink-0 pl-2">
+                            <RiArrowRightLine className="h-5 w-5" />
+                          </div>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              ) : (
+                <div className="py-3 text-center text-sm text-muted-foreground">
+                  <p>No upcoming events</p>
+                </div>
+              )}
            </CardContent>
          </Card>
        </div>
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/components/Modals/CreateCalendarEvent.tsx
@ -34,7 +34,14 @@ 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() {
+
+type CreateCalendarEventModalProps = {
+  calendar?: string;
+};
+
+export default function CreateCalendarEventModal({
+  calendar: _calendar,
+}: CreateCalendarEventModalProps) {
  const modal = useModal();
  const now = new Date(new Date().setHours(12, 0, 0, 0));
  const [isLoading, setIsLoading] = useState(false);
@ -73,7 +80,7 @@ export default function CreateCalendarEventModal() {
  const [timezone, setTimezone] = useState(
    Intl.DateTimeFormat().resolvedOptions().timeZone,
  );
-  const [calendar, setCalendar] = useState<string>();
+  const [calendar, setCalendar] = useState<string>(_calendar ?? "");
  const [location, setLocation] = useState<{
    address: string;
    name: string;
@ -154,6 +161,7 @@ export default function CreateCalendarEventModal() {
        kind: 31923,
      };
      const event = await createEvent(ndk, preEvent);
+
      if (event) {
        const encodedEvent = event.encode();
        if (calendar) {
@ -326,7 +334,7 @@ export default function CreateCalendarEventModal() {
                          ({
                            ...o,
                            label: getTagValues("name", o.tags) as string,
-                            value: o.encode(),
+                            value: o.tagId(),
                          }) as NDKEvent & {
                            label: string;
                            value: string;
@ -339,7 +347,7 @@ export default function CreateCalendarEventModal() {
                      }
                      className="px-0 pr-1 font-normal"
                      value={calendar}
-                      onChange={(calendar) => setCalendar(calendar.encode())}
+                      onChange={(calendar) => setCalendar(calendar.tagId())}
                    />
                  </div>
                </div>
--- a/containers/EventsTimeline/EventsFromCalendar.tsx
+++ b/containers/EventsTimeline/EventsFromCalendar.tsx
@ -35,47 +35,12 @@ export default function EventsFromCalendar({
      ["#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);
-  // }
-
-  // useEffect(() => {
-  //   if (
-  //     !ndk ||
-  //     calendarEventIdentifiers.length === 0 ||
-  //     isFetching ||
-  //     events.length
-  //   )
-  //     return;
-  //   handleFetchEvents(calendarEventIdentifiers);
-  // }, [ndk, calendarEventIdentifiers]);
-
  useEffect(() => {
    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/lib/nostr/utils.ts
+++ b/lib/nostr/utils.ts
@ -43,11 +43,29 @@ export function aTagToNip19(aTag: string[]): string {
    identifier: tagIdSplit[2] as string,
  });
 }
+export function sortEventsByTagNumber<T extends { tags: string[][] }>(
+  events: T[],
+  key: string,
+  swap?: boolean,
+) {
+  const direction = swap ? -1 : 1;
+  return events.sort((a, b) => {
+    const aVal = parseInt(getTagValues(key, a.tags) ?? "0");
+    const bVal = parseInt(getTagValues(key, b.tags) ?? "0");
+    if (aVal > bVal) {
+      return direction;
+    } else if (aVal < bVal) {
+      return direction * -1;
+    }
+    return 0;
+  });
+}
 export const getTagValues = (name: string, tags: string[][]) => {
  const [itemTag] = tags.filter((tag: string[]) => tag[0] === name);
  const [, item] = itemTag || [, undefined];
  return item;
 };
+
 export const getTagAllValues = (name: string, tags: string[][]) => {
  const [itemTag] = tags.filter((tag: string[]) => tag[0] === name);
  const itemValues = itemTag || [, undefined];