flockstr/components/Modals/EditEvent.tsx

import { useEffect, useState } from "react";
import FormModal from "./FormModal";
import { z } from "zod";
import useEvents from "@/lib/hooks/useEvents";
import { updateList } from "@/lib/actions/create";
import { unixTimeNowInSeconds } from "@/lib/nostr/dates";
import { useModal } from "@/app/_providers/modal/provider";
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>;

type EditListModalProps = {
  listEvent: NostrEvent;
};
export default function EditListModal({ listEvent }: EditListModalProps) {
  const modal = useModal();
  const [isLoading, setIsLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const { ndk } = useNDK();
  const { events } = useEvents({
    filter: {
      kinds: [listEvent.kind as number],
      authors: [listEvent.pubkey],
      since: unixTimeNowInSeconds() - 10,
      limit: 1,
    },
    enabled: sent,
  });
  useEffect(() => {
    if (events.length) {
      console.log("Done!");
      setIsLoading(false);
      toast.success("Event Updated!");
      modal?.hide();
    }
  }, [events]);

  async function handleSubmit(listData: EditListType) {
    setIsLoading(true);
    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!,
      { ...listEvent, content: listData.about ?? "" },
      newTags,
    );
  }
  const defaultValues: Partial<EditListType> = {
    name:
      getTagValues("title", listEvent.tags) ??
      getTagValues("name", listEvent.tags),
    image:
      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 (
    <FormModal
      title="Edit Event"
      fields={[
        {
          label: "Name",
          type: "input",
          slug: "name",
        },
        {
          label: "About",
          type: "text-area",
          slug: "about",
        },
        {
          label: "Image",
          type: "upload",
          slug: "image",
        },
        {
          label: "Start",
          type: "date-time",
          slug: "start",
        },
        {
          label: "End",
          type: "date-time",
          slug: "end",
        },
      ]}
      defaultValues={defaultValues ?? {}}
      formSchema={EditListSchema}
      onSubmit={handleSubmit}
      isSubmitting={isLoading}
      cta={{
        text: "Save Changes",
      }}
    />
  );
}